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.
4.0 kB · 73 lines
CSS
at master
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374/* Variables *//* Spacing Scale - based on a ratio of 1:2 *//* Media Queries *//* 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 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }.cc3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }.cc4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }.cc5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }.cc6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; }.cg0 { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; }.cg1 { -webkit-column-gap: .25rem; -moz-column-gap: .25rem; column-gap: .25rem; }.cg2 { -webkit-column-gap: .5rem; -moz-column-gap: .5rem; column-gap: .5rem; }.cg3 { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; }.cg4 { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; }.cg5 { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }@media screen and (min-width: 30em) { .cc2-ns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .cc3-ns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .cc4-ns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .cc5-ns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .cc6-ns { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; } .cg0-ns { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } .cg1-ns { -webkit-column-gap: .25rem; -moz-column-gap: .25rem; column-gap: .25rem; } .cg2-ns { -webkit-column-gap: .5rem; -moz-column-gap: .5rem; column-gap: .5rem; } .cg3-ns { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; } .cg4-ns { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } .cg5-ns { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }}@media screen and (min-width: 30em) and (max-width: 60em) { .cc2-m { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .cc3-m { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .cc4-m { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .cc5-m { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .cc6-m { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; } .cg0-m { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } .cg1-m { -webkit-column-gap: .25rem; -moz-column-gap: .25rem; column-gap: .25rem; } .cg2-m { -webkit-column-gap: .5rem; -moz-column-gap: .5rem; column-gap: .5rem; } .cg3-m { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; } .cg4-m { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } .cg5-m { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }}@media screen and (min-width: 60em) { .cc2-l { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .cc3-l { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .cc4-l { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .cc5-l { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .cc6-l { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; } .cg0-l { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } .cg1-l { -webkit-column-gap: .25rem; -moz-column-gap: .25rem; column-gap: .25rem; } .cg2-l { -webkit-column-gap: .5rem; -moz-column-gap: .5rem; column-gap: .5rem; } .cg3-l { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; } .cg4-l { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } .cg5-l { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }}