mCSS/dist/css/component.tiles.css at 071b00fdb796b2f3a01f2087b9bfb256200873de · minimaldesign/mCSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/*! mCSS v1.4.0 | MIT | https://mcss.dev */
/*
SETTINGS MEDIA QUERIES

https://github.com/argyleink/open-props/blob/main/src/props.media.css
https://open-props.style/#media-queries

Can't use var() inside media queries 🤦‍♂️
https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
so breakpoints are not in theme.default.tokens.css

xxs: 240px
xs: 360px
sm: 480px
md: 768px
lg: 1024px
xl: 1440px
xxl: 1920px
*/

/* https://github.com/postcss/postcss-mixins */

/* Example */

/* truncate single line of text and adds … */

@layer components {
/* TILES */

/*
  Equal tiles in container-responsive columns: cards, feature items,
  pricing tiers, anything repeated at one size. The column count answers
  "how wide is the column I live in", not "how wide is the viewport": the
  .layout scaffolds declare their main column as a size container; outside
  a scaffold, wrap the list in a .tiles_container (or any inline-size
  container). The wrapper is required there: with no container ancestor
  the queries never match and the list stays single-column.

  Sizes name the tile: each one is a set of container thresholds tuned to
  how much room that tile needs, and columns keep coming as the container
  crosses them (no count cap; the column's width is the cap). A bare
  .tiles uses the md thresholds (card-sized tiles); .tiles-sm fits small
  icon + blurb tiles, so its columns appear sooner. The thresholds are
  deliberately not the global viewport breakpoints: those can't see how
  wide the column is. To pin a count yourself, set --tiles-columns on a
  hook class of your own (unlayered CSS beats the rules below), or write
  your own @container rules.
*/

.tiles {
  --tiles-columns: 1;
  display: grid;
  grid-template-columns: repeat(var(--tiles-columns), 1fr);
  grid-column-gap: var(--grid-column-gap);
  grid-row-gap: var(--grid-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;

  > li {
    /* grid items stretch, so tiles in a row share the same height */
    display: grid;
  }
}

/* md, the default (.tiles-md exists as the explicit spelling): a tile
   keeps roughly 17rem of room */
@container (width >= 36rem) {
  .tiles {
    --tiles-columns: 2;
  }
}

@container (width >= 56rem) {
  .tiles {
    --tiles-columns: 3;
  }
}

@container (width >= 76rem) {
  .tiles {
    --tiles-columns: 4;
  }
}

@container (width >= 96rem) {
  .tiles {
    --tiles-columns: 5;
  }
}

@container (width >= 116rem) {
  .tiles {
    --tiles-columns: 6;
  }
}

/* sm: a tile keeps roughly 13rem of room. Same specificity as the base
   rules, so these must stay after them (a smaller tile never means fewer
   columns at the same width). */
@container (width >= 28rem) {
  .tiles-sm {
    --tiles-columns: 2;
  }
}

@container (width >= 44rem) {
  .tiles-sm {
    --tiles-columns: 3;
  }
}

@container (width >= 60rem) {
  .tiles-sm {
    --tiles-columns: 4;
  }
}

@container (width >= 76rem) {
  .tiles-sm {
    --tiles-columns: 5;
  }
}

@container (width >= 92rem) {
  .tiles-sm {
    --tiles-columns: 6;
  }
}

/* Fallback container for tiles used outside the .layout scaffolds */
.tiles_container {
  container-type: inline-size;
}

}