"a series of intersecting horizontal and vertical lines spaced at regular intervals"
http://www.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/
"The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries."
Reglas anidadas, variables, mixins, herencia de
selectores y más.
Es un framework para Sass, diseñado para hacer
el trabajo de estilos más fácil y eficiente.
Una explicación sencilla de este concepto:
"puts users on mobile devices as your first priority and then you work your way outward to desktop users"
<div class="row">
<div class="span6">
<h3>About us</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing.</p>
</div>
<div class="span6">
<div class="row">
<div class="span3">
<h3><a href="#">News Title</a></h3>
<p>Lorem ipsum dolor sit amet, consectetu elit.</p>
</div>
<div class="span3">
<h3><a href="#">News Title</a></h3>
<p>Lorem ipsum dolor sit amet, consectetu elit.</p>
</div>
</div>
</div>
</div>
.span6 {
width: 49%;
}
.span3 {
width: 23.5%;
}
@mixin breakpoint($point) {
@if ($point == phone-portrait) {
@media only screen and (min-width: 480px) {
@content;
}
} @if ($point == tablet) {
@media only screen and (min-width: 768px) {
@content;
}
} @else if ($point == desktop) {
@media only screen and (min-width: 960px) {
@content;
}
}
}
$cols: 12;
$gutter: 2%;
$one_col: (100% - ($gutter * ($cols - 1))) / $cols;
$one_col: (100% - (2% * (12 - 1))) / 12;
$one_col: 6.5%;
@mixin cols($num) { width: ($one_col * $num) + ($gutter * ($num - 1)); }
@mixin cols(5) { width: (6.5% * 5) + (2% * (5% - 1)); }
width: 40.5%;
@mixin sub_cols($num_child, $num_parent) {
$parent_size: ($one_col * $num_parent) + ($gutter * ($num_parent - 1));
$child_size: ($one_col * $num_child) + ($gutter * ($num_child - 1));
margin-left: ($gutter / $parent_size) * 100%; width: ($child_size / $parent_size) * 100%;
}
@mixin sub_cols(2, 4) {
$parent_size: (6.5% * 4) + (2% * (4 - 1));
$parent_size: 32%
$child_size: (6.5% * 2) + (2% * (2 - 1));
$child_size: 15%
margin-left: (2% / 32%) * 100%;
margin-left: 6.25%
width: (15% / 32%) * 100%;
width: 46.875%;
}
.row {
// IE8 support #{enumerate('.span', 1, $cols, '')} { float: left; margin-left: $gutter; }
[class^="span"], [class*="span"]{ float: left; margin-left: $gutter; }
}
.row {
@for $i from 1 through $cols {
.span#{$i} {
@include cols($i);
@for $j from 1 through ($i - 1) {
.span#{$j} {
@include sub_cols($j, $i);
}
}
}
}
}
.row {
> :first-child,
.row > :first-child {
margin-left: 0;
}
}
.row .span4 .span3 {
margin-left: 6.25%;
width: 73.4375%;
}
.row .span5 {
width: 40.5%;
}
.row .span5 .span1 {
margin-left: 4.93827%;
width: 16.04938%;
}
Responsive grids
para Compass
gem install susy
compass create -r susy -u susy
# config.rb
require "susy"
// a 12-column grid $total-columns : 12;
// each column is 4em wide $column-width : 4em;
// 1em gutters between columns $gutter-width : 1em;
// grid-padding equal to gutters $grid-padding : $gutter-width;
$container-style: magic | static | fluid.
$container-width: <length>
<div class="container">
<header>
<a href="" class="logo">Susy Layout</a>
<nav>
<ul>
<li><a href="#">Item1</a></li>
</ul>
</nav>
</header>
<div class="main">
<p class="about">Lorem ipsum dolor sit amet.</p>
<ul class="news">
<li>
<h3><a href="#">News Title</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
</ul>
</div>
<footer>
<p>Backcountry 2013</p>
</footer>
</div>
// Imports
@import "compass";
@import "normalize";
@import "susy";
// Basic Grid
$container-style: fluid;
$total-columns: 4;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: 1em;
// Alternative layouts
$tablet: 40em 8;
$computer: 60em 12;
$show-grid-backgrounds: true;
// Imports @import "base";
// Layout .container { @include container; @include susy-grid-background; @include at-breakpoint($tablet) { @include container; @include susy-grid-background; } @include at-breakpoint($computer) { @include container; @include susy-grid-background; } }
.logo {
display: block;
background: gray;
@include at-breakpoint($tablet) {
@include span-columns(2);
}
@include at-breakpoint($computer) {
@include span-columns(3);
}
}
nav {
@include at-breakpoint($tablet) {
@include span-columns(6 omega);
}
@include at-breakpoint($computer) {
@include span-columns(9 omega);
}
ul {
margin: 0;
padding: 0;
}
li {
@include inline-block;
}
}
.about {
@include at-breakpoint($tablet) {
@include span-columns(2);
}
@include at-breakpoint($computer) {
@include span-columns(6);
}
}
.news {
@include at-breakpoint($tablet) {
@include span-columns(6 omega);
li {
@include span-columns(2, 6);
&:last-child {
@include omega;
}
}
}
}
.news {
@include at-breakpoint($computer) {
@include span-columns(6 omega);
li {
@include span-columns(2, 6);
}
}
}