Sha256: 281499021f2e304c114ce43fc482a8980851c9710f99f24febe132abd4cdd4b1
Contents?: true
Size: 1.97 KB
Versions: 1
Compression:
Stored size: 1.97 KB
Contents
/* Grids Grids usually are defined directly in the scss/sass files using the `columns` mixin. This is the best solution and keep the html free of classes that one day may be changed requiring more work that editing the stylesheet file and recompiling. Sometimes is easier to add a class to the html for quick prototiping, in this case there are available several classes just for that. In this example the columns width is 3 on desktop, 6 on tablet and 12 on smartphone. Markup: <div class="desk-3 lap-6 palm-12">1</div> <div class="desk-3 lap-6 palm-12">2</div> <div class="desk-3 lap-6 palm-12">3</div> <div class="desk-3 lap-6 palm-12">4</div> <div class="desk-3 lap-6 palm-12">5</div> <div class="desk-3 lap-6 palm-12">6</div> <div class="desk-3 lap-6 palm-12">7</div> <div class="desk-3 lap-6 palm-12">8</div> Styleguide 9 */ $media-queries: palm, lap, portable, lap-and-up, desk; @if $grids { @each $device in $media-queries { $i: $total-columns + 1; @include media($device) { @while $i > 0 { $nth: $total-columns / $i; .#{$device}-#{$i} { @include span-columns($i); } [class*="#{$device}-#{$i}"]:nth-child(#{$nth}n) { @include omega() } $i: $i - 1; } } } } /* Show and Hide There're also available some helper classes: * **Hide element**: Used to hide an element at a breackpoint * `.palm-hide` * `.lap-hide` * `.portable-hide` * `.lap-and-up-hide` * `.desk-hide` * **Show element**: Used to show an element at a breackpoint * `.palm-show` * `.lap-show` * `.portable-show` * `.lap-and-up-show` * `.desk-show` Styleguide 9.1 */ @if $grids-helpers { @each $device in $media-queries { @include media($device) { .#{$device}-hide { display: none !important; } .#{$device}-show { display: block !important; } } } }
Version data entries
1 entries across 1 versions & 1 rubygems
Version | Path |
---|---|
rapido-css-0.1.2 | stylesheets/components/_grids.scss |