baselinewidely| Class | CSS |
|---|---|
| ys:0 | block-size: 0; |
| ys:1 | block-size: .25rem; |
| ys:2 | block-size: .5rem; |
| ys:3 | block-size: .75rem; |
| ys:4 | block-size: 1rem; |
| ys:5 | block-size: 1.25rem; |
| ys:6 | block-size: 1.5rem; |
| ys:7 | block-size: 1.75rem; |
| ys:8 | block-size: 2rem; |
| ys:9 | block-size: 2.25rem; |
| ys:10 | block-size: 2.5rem; |
| ys:11 | block-size: 2.75rem; |
| ys:12 | block-size: 3rem; |
| ys:13 | block-size: 3.25rem; |
| ys:14 | block-size: 3.5rem; |
| ys:15 | block-size: 3.75rem; |
| ys:16 | block-size: 4rem; |
| ys:17 | block-size: 4.25rem; |
| ys:18 | block-size: 4.5rem; |
| ys:19 | block-size: 4.75rem; |
| ys:20 | block-size: 5rem; |
| ys:21 | block-size: 5.25rem; |
| ys:22 | block-size: 5.5rem; |
| ys:23 | block-size: 5.75rem; |
| ys:24 | block-size: 6rem; |
| ys:25 | block-size: 6.25rem; |
| ys:26 | block-size: 6.5rem; |
| ys:27 | block-size: 6.75rem; |
| ys:28 | block-size: 7rem; |
| ys:29 | block-size: 7.25rem; |
| ys:30 | block-size: 7.5rem; |
| ys:31 | block-size: 7.75rem; |
| ys:32 | block-size: 8rem; |
| ys:33 | block-size: 8.25rem; |
| ys:34 | block-size: 8.5rem; |
| ys:35 | block-size: 8.75rem; |
| ys:36 | block-size: 9rem; |
| ys:37 | block-size: 9.25rem; |
| ys:38 | block-size: 9.5rem; |
| ys:39 | block-size: 9.75rem; |
| ys:40 | block-size: 10rem; |
| ys:41 | block-size: 10.25rem; |
| ys:42 | block-size: 10.5rem; |
| ys:43 | block-size: 10.75rem; |
| ys:44 | block-size: 11rem; |
| ys:45 | block-size: 11.25rem; |
| ys:46 | block-size: 11.5rem; |
| ys:47 | block-size: 11.75rem; |
| ys:48 | block-size: 12rem; |
| ys:49 | block-size: 12.25rem; |
| ys:50 | block-size: 12.5rem; |
| ys:51 | block-size: 12.75rem; |
| ys:52 | block-size: 13rem; |
| ys:53 | block-size: 13.25rem; |
| ys:54 | block-size: 13.5rem; |
| ys:55 | block-size: 13.75rem; |
| ys:56 | block-size: 14rem; |
| ys:57 | block-size: 14.25rem; |
| ys:58 | block-size: 14.5rem; |
| ys:59 | block-size: 14.75rem; |
| ys:60 | block-size: 15rem; |
| ys:61 | block-size: 15.25rem; |
| ys:62 | block-size: 15.5rem; |
| ys:63 | block-size: 15.75rem; |
| ys:64 | block-size: 16rem; |
| ys:65 | block-size: 16.25rem; |
| ys:66 | block-size: 16.5rem; |
| ys:67 | block-size: 16.75rem; |
| ys:68 | block-size: 17rem; |
| ys:69 | block-size: 17.25rem; |
| ys:70 | block-size: 17.5rem; |
| ys:71 | block-size: 17.75rem; |
| ys:72 | block-size: 18rem; |
| ys:73 | block-size: 18.25rem; |
| ys:74 | block-size: 18.5rem; |
| ys:75 | block-size: 18.75rem; |
| ys:76 | block-size: 19rem; |
| ys:77 | block-size: 19.25rem; |
| ys:78 | block-size: 19.5rem; |
| ys:79 | block-size: 19.75rem; |
| ys:80 | block-size: 20rem; |
| ys:81 | block-size: 20.25rem; |
| ys:82 | block-size: 20.5rem; |
| ys:83 | block-size: 20.75rem; |
| ys:84 | block-size: 21rem; |
| ys:85 | block-size: 21.25rem; |
| ys:86 | block-size: 21.5rem; |
| ys:87 | block-size: 21.75rem; |
| ys:88 | block-size: 22rem; |
| ys:89 | block-size: 22.25rem; |
| ys:90 | block-size: 22.5rem; |
| ys:91 | block-size: 22.75rem; |
| ys:92 | block-size: 23rem; |
| ys:93 | block-size: 23.25rem; |
| ys:94 | block-size: 23.5rem; |
| ys:95 | block-size: 23.75rem; |
| ys:96 | block-size: 24rem; |
| ys:97 | block-size: 24.25rem; |
| ys:98 | block-size: 24.5rem; |
| ys:99 | block-size: 24.75rem; |
| ys:100 | block-size: 25rem; |
| ys:101 | block-size: 25.25rem; |
| ys:102 | block-size: 25.5rem; |
| ys:103 | block-size: 25.75rem; |
| ys:104 | block-size: 26rem; |
| ys:105 | block-size: 26.25rem; |
| ys:106 | block-size: 26.5rem; |
| ys:107 | block-size: 26.75rem; |
| ys:108 | block-size: 27rem; |
| ys:109 | block-size: 27.25rem; |
| ys:110 | block-size: 27.5rem; |
| ys:111 | block-size: 27.75rem; |
| ys:112 | block-size: 28rem; |
| ys:113 | block-size: 28.25rem; |
| ys:114 | block-size: 28.5rem; |
| ys:115 | block-size: 28.75rem; |
| ys:116 | block-size: 29rem; |
| ys:117 | block-size: 29.25rem; |
| ys:118 | block-size: 29.5rem; |
| ys:119 | block-size: 29.75rem; |
| ys:120 | block-size: 30rem; |
| ys:121 | block-size: 30.25rem; |
| ys:122 | block-size: 30.5rem; |
| ys:123 | block-size: 30.75rem; |
| ys:124 | block-size: 31rem; |
| ys:125 | block-size: 31.25rem; |
| ys:126 | block-size: 31.5rem; |
| ys:127 | block-size: 31.75rem; |
| ys:128 | block-size: 32rem; |
| ys:129 | block-size: 32.25rem; |
| ys:130 | block-size: 32.5rem; |
| ys:131 | block-size: 32.75rem; |
| ys:132 | block-size: 33rem; |
| ys:133 | block-size: 33.25rem; |
| ys:134 | block-size: 33.5rem; |
| ys:135 | block-size: 33.75rem; |
| ys:136 | block-size: 34rem; |
| ys:137 | block-size: 34.25rem; |
| ys:138 | block-size: 34.5rem; |
| ys:139 | block-size: 34.75rem; |
| ys:140 | block-size: 35rem; |
| ys:141 | block-size: 35.25rem; |
| ys:142 | block-size: 35.5rem; |
| ys:143 | block-size: 35.75rem; |
| ys:144 | block-size: 36rem; |
| ys:145 | block-size: 36.25rem; |
| ys:146 | block-size: 36.5rem; |
| ys:147 | block-size: 36.75rem; |
| ys:148 | block-size: 37rem; |
| ys:149 | block-size: 37.25rem; |
| ys:150 | block-size: 37.5rem; |
| ys:151 | block-size: 37.75rem; |
| ys:152 | block-size: 38rem; |
| ys:153 | block-size: 38.25rem; |
| ys:154 | block-size: 38.5rem; |
| ys:155 | block-size: 38.75rem; |
| ys:156 | block-size: 39rem; |
| ys:157 | block-size: 39.25rem; |
| ys:158 | block-size: 39.5rem; |
| ys:159 | block-size: 39.75rem; |
| ys:160 | block-size: 40rem; |
| ys:161 | block-size: 40.25rem; |
| ys:162 | block-size: 40.5rem; |
| ys:163 | block-size: 40.75rem; |
| ys:164 | block-size: 41rem; |
| ys:165 | block-size: 41.25rem; |
| ys:166 | block-size: 41.5rem; |
| ys:167 | block-size: 41.75rem; |
| ys:168 | block-size: 42rem; |
| ys:169 | block-size: 42.25rem; |
| ys:170 | block-size: 42.5rem; |
| ys:171 | block-size: 42.75rem; |
| ys:172 | block-size: 43rem; |
| ys:173 | block-size: 43.25rem; |
| ys:174 | block-size: 43.5rem; |
| ys:175 | block-size: 43.75rem; |
| ys:176 | block-size: 44rem; |
| ys:177 | block-size: 44.25rem; |
| ys:178 | block-size: 44.5rem; |
| ys:179 | block-size: 44.75rem; |
| ys:180 | block-size: 45rem; |
| ys:181 | block-size: 45.25rem; |
| ys:182 | block-size: 45.5rem; |
| ys:183 | block-size: 45.75rem; |
| ys:184 | block-size: 46rem; |
| ys:185 | block-size: 46.25rem; |
| ys:186 | block-size: 46.5rem; |
| ys:187 | block-size: 46.75rem; |
| ys:188 | block-size: 47rem; |
| ys:189 | block-size: 47.25rem; |
| ys:190 | block-size: 47.5rem; |
| ys:191 | block-size: 47.75rem; |
| ys:192 | block-size: 48rem; |
| ys:193 | block-size: 48.25rem; |
| ys:194 | block-size: 48.5rem; |
| ys:195 | block-size: 48.75rem; |
| ys:196 | block-size: 49rem; |
| ys:197 | block-size: 49.25rem; |
| ys:198 | block-size: 49.5rem; |
| ys:199 | block-size: 49.75rem; |
| ys:200 | block-size: 50rem; |
| ys:201 | block-size: 50.25rem; |
| ys:202 | block-size: 50.5rem; |
| ys:203 | block-size: 50.75rem; |
| ys:204 | block-size: 51rem; |
| ys:205 | block-size: 51.25rem; |
| ys:206 | block-size: 51.5rem; |
| ys:207 | block-size: 51.75rem; |
| ys:208 | block-size: 52rem; |
| ys:209 | block-size: 52.25rem; |
| ys:210 | block-size: 52.5rem; |
| ys:211 | block-size: 52.75rem; |
| ys:212 | block-size: 53rem; |
| ys:213 | block-size: 53.25rem; |
| ys:214 | block-size: 53.5rem; |
| ys:215 | block-size: 53.75rem; |
| ys:216 | block-size: 54rem; |
| ys:217 | block-size: 54.25rem; |
| ys:218 | block-size: 54.5rem; |
| ys:219 | block-size: 54.75rem; |
| ys:220 | block-size: 55rem; |
| ys:221 | block-size: 55.25rem; |
| ys:222 | block-size: 55.5rem; |
| ys:223 | block-size: 55.75rem; |
| ys:224 | block-size: 56rem; |
| ys:225 | block-size: 56.25rem; |
| ys:226 | block-size: 56.5rem; |
| ys:227 | block-size: 56.75rem; |
| ys:228 | block-size: 57rem; |
| ys:229 | block-size: 57.25rem; |
| ys:230 | block-size: 57.5rem; |
| ys:231 | block-size: 57.75rem; |
| ys:232 | block-size: 58rem; |
| ys:233 | block-size: 58.25rem; |
| ys:234 | block-size: 58.5rem; |
| ys:235 | block-size: 58.75rem; |
| ys:236 | block-size: 59rem; |
| ys:237 | block-size: 59.25rem; |
| ys:238 | block-size: 59.5rem; |
| ys:239 | block-size: 59.75rem; |
| ys:240 | block-size: 60rem; |
| ys:241 | block-size: 60.25rem; |
| ys:242 | block-size: 60.5rem; |
| ys:243 | block-size: 60.75rem; |
| ys:244 | block-size: 61rem; |
| ys:245 | block-size: 61.25rem; |
| ys:246 | block-size: 61.5rem; |
| ys:247 | block-size: 61.75rem; |
| ys:248 | block-size: 62rem; |
| ys:249 | block-size: 62.25rem; |
| ys:250 | block-size: 62.5rem; |
| ys:251 | block-size: 62.75rem; |
| ys:252 | block-size: 63rem; |
| ys:253 | block-size: 63.25rem; |
| ys:254 | block-size: 63.5rem; |
| ys:255 | block-size: 63.75rem; |
| ys:256 | block-size: 64rem; |
| ys:257 | block-size: 64.25rem; |
| ys:258 | block-size: 64.5rem; |
| ys:259 | block-size: 64.75rem; |
| ys:260 | block-size: 65rem; |
| ys:261 | block-size: 65.25rem; |
| ys:262 | block-size: 65.5rem; |
| ys:263 | block-size: 65.75rem; |
| ys:264 | block-size: 66rem; |
| ys:265 | block-size: 66.25rem; |
| ys:266 | block-size: 66.5rem; |
| ys:267 | block-size: 66.75rem; |
| ys:268 | block-size: 67rem; |
| ys:269 | block-size: 67.25rem; |
| ys:270 | block-size: 67.5rem; |
| ys:271 | block-size: 67.75rem; |
| ys:272 | block-size: 68rem; |
| ys:273 | block-size: 68.25rem; |
| ys:274 | block-size: 68.5rem; |
| ys:275 | block-size: 68.75rem; |
| ys:276 | block-size: 69rem; |
| ys:277 | block-size: 69.25rem; |
| ys:278 | block-size: 69.5rem; |
| ys:279 | block-size: 69.75rem; |
| ys:280 | block-size: 70rem; |
| ys:281 | block-size: 70.25rem; |
| ys:282 | block-size: 70.5rem; |
| ys:283 | block-size: 70.75rem; |
| ys:284 | block-size: 71rem; |
| ys:285 | block-size: 71.25rem; |
| ys:286 | block-size: 71.5rem; |
| ys:287 | block-size: 71.75rem; |
| ys:288 | block-size: 72rem; |
| ys:289 | block-size: 72.25rem; |
| ys:290 | block-size: 72.5rem; |
| ys:291 | block-size: 72.75rem; |
| ys:292 | block-size: 73rem; |
| ys:293 | block-size: 73.25rem; |
| ys:294 | block-size: 73.5rem; |
| ys:295 | block-size: 73.75rem; |
| ys:296 | block-size: 74rem; |
| ys:297 | block-size: 74.25rem; |
| ys:298 | block-size: 74.5rem; |
| ys:299 | block-size: 74.75rem; |
| ys:300 | block-size: 75rem; |
| ys:301 | block-size: 75.25rem; |
| ys:302 | block-size: 75.5rem; |
| ys:303 | block-size: 75.75rem; |
| ys:304 | block-size: 76rem; |
| ys:305 | block-size: 76.25rem; |
| ys:306 | block-size: 76.5rem; |
| ys:307 | block-size: 76.75rem; |
| ys:308 | block-size: 77rem; |
| ys:309 | block-size: 77.25rem; |
| ys:310 | block-size: 77.5rem; |
| ys:311 | block-size: 77.75rem; |
| ys:312 | block-size: 78rem; |
| ys:313 | block-size: 78.25rem; |
| ys:314 | block-size: 78.5rem; |
| ys:315 | block-size: 78.75rem; |
| ys:316 | block-size: 79rem; |
| ys:317 | block-size: 79.25rem; |
| ys:318 | block-size: 79.5rem; |
| ys:319 | block-size: 79.75rem; |
| ys:320 | block-size: 80rem; |
| ys:321 | block-size: 80.25rem; |
| ys:322 | block-size: 80.5rem; |
| ys:323 | block-size: 80.75rem; |
| ys:324 | block-size: 81rem; |
| ys:325 | block-size: 81.25rem; |
| ys:326 | block-size: 81.5rem; |
| ys:327 | block-size: 81.75rem; |
| ys:328 | block-size: 82rem; |
| ys:329 | block-size: 82.25rem; |
| ys:330 | block-size: 82.5rem; |
| ys:331 | block-size: 82.75rem; |
| ys:332 | block-size: 83rem; |
| ys:333 | block-size: 83.25rem; |
| ys:334 | block-size: 83.5rem; |
| ys:335 | block-size: 83.75rem; |
| ys:336 | block-size: 84rem; |
| ys:337 | block-size: 84.25rem; |
| ys:338 | block-size: 84.5rem; |
| ys:339 | block-size: 84.75rem; |
| ys:340 | block-size: 85rem; |
| ys:341 | block-size: 85.25rem; |
| ys:342 | block-size: 85.5rem; |
| ys:343 | block-size: 85.75rem; |
| ys:344 | block-size: 86rem; |
| ys:345 | block-size: 86.25rem; |
| ys:346 | block-size: 86.5rem; |
| ys:347 | block-size: 86.75rem; |
| ys:348 | block-size: 87rem; |
| ys:349 | block-size: 87.25rem; |
| ys:350 | block-size: 87.5rem; |
| ys:351 | block-size: 87.75rem; |
| ys:352 | block-size: 88rem; |
| ys:353 | block-size: 88.25rem; |
| ys:354 | block-size: 88.5rem; |
| ys:355 | block-size: 88.75rem; |
| ys:356 | block-size: 89rem; |
| ys:357 | block-size: 89.25rem; |
| ys:358 | block-size: 89.5rem; |
| ys:359 | block-size: 89.75rem; |
| ys:360 | block-size: 90rem; |
| ys:361 | block-size: 90.25rem; |
| ys:362 | block-size: 90.5rem; |
| ys:363 | block-size: 90.75rem; |
| ys:364 | block-size: 91rem; |
| ys:365 | block-size: 91.25rem; |
| ys:366 | block-size: 91.5rem; |
| ys:367 | block-size: 91.75rem; |
| ys:368 | block-size: 92rem; |
| ys:369 | block-size: 92.25rem; |
| ys:370 | block-size: 92.5rem; |
| ys:371 | block-size: 92.75rem; |
| ys:372 | block-size: 93rem; |
| ys:373 | block-size: 93.25rem; |
| ys:374 | block-size: 93.5rem; |
| ys:375 | block-size: 93.75rem; |
| ys:376 | block-size: 94rem; |
| ys:377 | block-size: 94.25rem; |
| ys:378 | block-size: 94.5rem; |
| ys:379 | block-size: 94.75rem; |
| ys:380 | block-size: 95rem; |
| ys:381 | block-size: 95.25rem; |
| ys:382 | block-size: 95.5rem; |
| ys:383 | block-size: 95.75rem; |
| ys:384 | block-size: 96rem; |
| ys:10% | block-size: 10%; |
| ys:20% | block-size: 20%; |
| ys:30% | block-size: 30%; |
| ys:40% | block-size: 40%; |
| ys:50% | block-size: 50%; |
| ys:60% | block-size: 60%; |
| ys:70% | block-size: 70%; |
| ys:80% | block-size: 80%; |
| ys:90% | block-size: 90%; |
| ys:100% | block-size: 100%; |
| ys:auto | block-size: auto; |
| ys:dvh | block-size: 100dvh; |
| ys:dvw | block-size: 100dvw; |
| ys:fc | block-size: fit-content; |
| ys:lg | block-size: 64rem; |
| ys:lvh | block-size: 100lvh; |
| ys:lvw | block-size: 100lvw; |
| ys:max | block-size: max-content; |
| ys:md | block-size: 48rem; |
| ys:min | block-size: min-content; |
| ys:px | block-size: 1px; |
| ys:s | block-size: stretch; |
| ys:sm | block-size: 40rem; |
| ys:svh | block-size: 100svh; |
| ys:svw | block-size: 100svw; |
| ys:vb | block-size: 100vb; |
| ys:vh | block-size: 100vh; |
| ys:vi | block-size: 100vi; |
| ys:vmax | block-size: 100vmax; |
| ys:vmin | block-size: 100vmin; |
| ys:vw | block-size: 100vw; |
| ys:xl | block-size: 80rem; |
| ys:xs | block-size: 32rem; |
| ys:xxl | block-size: 96rem; |
The same values work with max-ys & min-ys, as in min-ys:4.
Variants
Prefix any class with a variant to apply it only under that condition. Variants stack, as in @md:h:ys:4.
Breakpoints
Apply a class from a viewport width up. Each breakpoint covers its width & every width above it.
| @xs:ys:4 | From 32rem up. |
| @sm:ys:4 | From 40rem up. |
| @md:ys:4 | From 48rem up. |
| @lg:ys:4 | From 64rem up. |
| @xl:ys:4 | From 80rem up. |
| @xxl:ys:4 | From 96rem up. |
Containers
Apply a class from a container's width up, not the viewport's. Mark the parent with ct:is first.
| @c:xs:ys:4 | Container from 32rem up. |
| @c:sm:ys:4 | Container from 40rem up. |
| @c:md:ys:4 | Container from 48rem up. |
| @c:lg:ys:4 | Container from 64rem up. |
| @c:xl:ys:4 | Container from 80rem up. |
| @c:xxl:ys:4 | Container from 96rem up. |
Media
Apply a class when the device or the page matches a condition, or on the first frame an element renders.
| @pc:ys:4 | On a touch screen. |
| @prm:ys:4 | With reduced motion on. |
| @st:ys:4 | On the first frame. |
States
Apply a class only while the element is in a state, such as hovered, focused or checked.
| h:ys:4 | On :hover. |
| f:ys:4 | On :focus. |
| fv:ys:4 | On :focus-visible. |
| a:ys:4 | On :active. |
| d:ys:4 | On :disabled. |
| fc:ys:4 | On :first-child. |
| c:ys:4 | On :checked. |
| e:ys:4 | On :empty. |
| fw:ys:4 | On :focus-within. |
| i:ys:4 | On :invalid. |
| in:ys:4 | On :indeterminate. |
| lc:ys:4 | On :last-child. |
| nc:ys:4 | On :nth-child. |
| r:ys:4 | On :required. |
| ro:ys:4 | On :read-only. |
| v:ys:4 | On :valid. |
Pseudo Elements
Style a part of the element rather than the element itself, such as its placeholder or the selected text.
| a::ys:4 | On ::after. |
| b::ys:4 | On ::before. |
| p::ys:4 | On ::placeholder. |
| s::ys:4 | On ::selection. |