Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/tachyons-columns. Tachyons module for CSS columns www.npmjs.com/package/tachyons-columns
tachyons tachyons-css
Something went wrong. Try again.
2.8 kB · 101 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102/* Variables */
/* Spacing Scale - based on a ratio of 1:2 */:root { --spacing-none: 0; --spacing-extra-small: .25rem; --spacing-small: .5rem; --spacing-medium: 1rem; --spacing-large: 2rem; --spacing-extra-large: 4rem;}
/* Media Queries */
@custom-media --breakpoint-not-small screen and (min-width: 30em);@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);@custom-media --breakpoint-large screen and (min-width: 60em);
/* COLUMNS
A six step powers of two scale ranging from 0 to 4rem. Namespaces are composable and thus highly grockable - check the legend below
Legend:
cc = column-count cg = column-gap
0 = none 1 = 1st step in spacing scale 2 = 2nd step in spacing scale 3 = 3rd step in spacing scale 4 = 4th step in spacing scale 5 = 5th step in spacing scale
*/
.cc2 { column-count: 2; }.cc3 { column-count: 3; }.cc4 { column-count: 4; }.cc5 { column-count: 5; }.cc6 { column-count: 6; }
@media (--breakpoint-not-small) { .cc2-ns { column-count: 2; } .cc3-ns { column-count: 3; } .cc4-ns { column-count: 4; } .cc5-ns { column-count: 5; } .cc6-ns { column-count: 6; }}
@media (--breakpoint-medium) { .cc2-m { column-count: 2; } .cc3-m { column-count: 3; } .cc4-m { column-count: 4; } .cc5-m { column-count: 5; } .cc6-m { column-count: 6; }}
@media (--breakpoint-large) { .cc2-l { column-count: 2; } .cc3-l { column-count: 3; } .cc4-l { column-count: 4; } .cc5-l { column-count: 5; } .cc6-l { column-count: 6; }}
.cg0 { column-gap: var(--spacing-none); }.cg1 { column-gap: var(--spacing-extra-small); }.cg2 { column-gap: var(--spacing-small); }.cg3 { column-gap: var(--spacing-medium); }.cg4 { column-gap: var(--spacing-large); }.cg5 { column-gap: var(--spacing-extra-large); }
@media (--breakpoint-not-small) { .cg0-ns { column-gap: var(--spacing-none); } .cg1-ns { column-gap: var(--spacing-extra-small); } .cg2-ns { column-gap: var(--spacing-small); } .cg3-ns { column-gap: var(--spacing-medium); } .cg4-ns { column-gap: var(--spacing-large); } .cg5-ns { column-gap: var(--spacing-extra-large); }}
@media (--breakpoint-medium) { .cg0-m { column-gap: var(--spacing-none); } .cg1-m { column-gap: var(--spacing-extra-small); } .cg2-m { column-gap: var(--spacing-small); } .cg3-m { column-gap: var(--spacing-medium); } .cg4-m { column-gap: var(--spacing-large); } .cg5-m { column-gap: var(--spacing-extra-large); }}
@media (--breakpoint-large) { .cg0-l { column-gap: var(--spacing-none); } .cg1-l { column-gap: var(--spacing-extra-small); } .cg2-l { column-gap: var(--spacing-small); } .cg3-l { column-gap: var(--spacing-medium); } .cg4-l { column-gap: var(--spacing-large); } .cg5-l { column-gap: var(--spacing-extra-large); }}