Sha256: 19253c0b08eba9baa7d4a78af87f7ab5fe6ac6dc86319eec35e555a076f91767

Contents?: true

Size: 1.9 KB

Versions: 9

Compression:

Stored size: 1.9 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);
                }

                $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; }
            .#{$device}-omega { @include omega(); }
        }
    }
}

Version data entries

9 entries across 9 versions & 1 rubygems

Version Path
rapido-css-0.2.1 stylesheets/components/_grids.scss
rapido-css-0.2.0 stylesheets/components/_grids.scss
rapido-css-0.1.9 stylesheets/components/_grids.scss
rapido-css-0.1.8 stylesheets/components/_grids.scss
rapido-css-0.1.7 stylesheets/components/_grids.scss
rapido-css-0.1.6 stylesheets/components/_grids.scss
rapido-css-0.1.5 stylesheets/components/_grids.scss
rapido-css-0.1.4 stylesheets/components/_grids.scss
rapido-css-0.1.3 stylesheets/components/_grids.scss