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: $palm,
  lap: $lap,
  portable: $portable,
  lap-and-up: $lap-and-up,
  desk: $desk
);

@if $grids {
    @each $media-query, $device in $media-queries {
        @include breakpoint($device) {
            @for $i from 1 through $total-columns {
                .#{$media-query}-#{$i} {
                    @include span($i);
                }
            }
        }
    }
}

/*

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 $media-query, $device in $media-queries {
        @include breakpoint($device) {
            .#{$media-query}-hide { display: none !important; }
            .#{$media-query}-show { display: block !important; }
            .#{$media-query}-omega { @include omega(); }
        }
    }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
rapido-css-0.2.4	stylesheets/components/_grids.scss
rapido-css-0.2.3	stylesheets/components/_grids.scss