picasso 0.5.2 → 0.6.0

data/lib/picasso/version.rb

@@ -1,3 +1,3 @@
 module Picasso
-  VERSION = "0.5.2"
+  VERSION = "0.6.0"
 end

data/stylesheets/picasso/utils/_grid.scss

@@ -2,12 +2,13 @@
 
 // Grilla responsiva a 12 columnas (o mas).
 
+// #### Manejo de columnas y filas
+
 // Cada set de columnas tiene un ancho porcentual. El elemento que haga uso de un espacio debe tener la clase `colX`, 
 // en donde *X* es el número de columnas a ocupar. Las columnas definidas siempre deben estar contenidas por un elemento con la clase `row-col`.
+// En caso de utilizar la clase `col0` la misma quedará oculta.
 
-// ### Ejemplos
-
-// #### Simétrico
+// ##### Ejemplo1: Simétrico
 
 // ```
 // <div class="row-col">
@@ -52,7 +53,7 @@
 // </div>
 // ```
 
-// #### Asim&eacute;trico
+// ##### Ejemplo2: Asim&eacute;trico
 
 // ```
 // <div class="row-col">
@@ -77,7 +78,7 @@
 // </div>
 // ```
 
-// #### Anidado
+// ##### Ejemplo3: Anidado
 
 // ```
 // <div class="row-col">
@@ -120,39 +121,200 @@
 // </div>
 // ```
 
+// #### Clases responsivas
+
+// La grilla ofrece una serie de clases para poder manejar el comportamiento de las columnas ante diferentes resoluciones. 
+// Las clases disponibles son: `colX-small` (máximo 480px), `colX-medium` (entre 481px y 800px) y `colX-large` (entre 801px y 1024px):
+
+// ##### Ejemplo 1
+// 
+// Comportamiento esperado:
+// 
+// - 12 columnas de 1 unidad
+// - Large: 10 columnas de 1 unidad
+// - Medium: 8 columnas de 1 unidad
+// - Small: 6 columnas de 1 unidad
+
+// ```
+// <div class="row-col">
+// 	<div class="col1">1</div>
+// 	<div class="col1">2</div>
+// 	<div class="col1">3</div>
+// 	<div class="col1">4</div>
+// 	<div class="col1">5</div>
+// 	<div class="col1">6</div>
+// 	<div class="col1 col0-small">7</div>
+// 	<div class="col1 col0-small">8</div>
+// 	<div class="col1 col0-medium col0-small">9</div>
+// 	<div class="col1 col0-medium col0-small">10</div>
+// 	<div class="col1 col0-large col0-medium col0-small">11</div>
+// 	<div class="col1 col0-large col0-medium col0-small">12</div>
+// </div>
+// ```
+
+// ##### Ejemplo 2
+// 
+// Comportamiento esperado:
+// 
+// - 12 columnas de 1 unidad
+// - Large: 6 columnas de 2 unidades
+// - Medium: 4 columnas de 3 unidades
+// - Small: 2 columnas de 6 unidades
+
+// ```
+// <div class="row-col">
+// 	<div class="col1 col2-large col3-medium col6-small">1</div>
+// 	<div class="col1 col2-large col3-medium col6-small">2</div>
+// 	<div class="col1 col2-large col3-medium col0-small">3</div>
+// 	<div class="col1 col2-large col3-medium col0-small">4</div>
+// 	<div class="col1 col2-large col0-medium col0-small">5</div>
+// 	<div class="col1 col2-large col0-medium col0-small">6</div>
+// 	<div class="col1 col0-large col0-medium col0-small">7</div>
+// 	<div class="col1 col0-large col0-medium col0-small">8</div>
+// 	<div class="col1 col0-large col0-medium col0-small">9</div>
+// 	<div class="col1 col0-large col0-medium col0-small">10</div>
+// 	<div class="col1 col0-large col0-medium col0-small">11</div>
+// 	<div class="col1 col0-large col0-medium col0-small">12</div>
+// </div>
+// ```
+
+// ##### Ejemplo 3
+// 
+// Comportamiento esperado:
+// 
+// - 4 columnas de 3 unidades
+// - Large: 3 columnas de 4 unidades (la primera columna debe ser 2)
+// - Medium: 2 columnas de 6 unidades (la primera columna debe ser 3)
+// - Small: 1 columna de 12 unidades (la única columna debe ser 4)
+
+// ```
+// <div class="row-col">
+// 	<div class="col3 col0-large col0-medium col0-small">1</div>
+// 	<div class="col3 col4-large first-large col0-medium col0-small">2</div>
+// 	<div class="col3 col4-large col6-medium first-medium col0-small">3</div>
+// 	<div class="col3 col4-large col6-medium col12-small first-small">4</div>
+// </div>
+// ```
+
+// > Notar que se utiliza la clase `first-<size>`. 
+// La misma permite aplicar aplicar a una columna que no es primera como si lo fuera. 
+// Caso contrario la misma tendrá un margen izquierdo por defecto.
+
 // #### Offset
 
-// La grilla ofrece la psibilidad de utilizar offsets, los mismos se manejan a trav&eacute;s de la clase `offsetX`:
+// La grilla ofrece la posibilidad de utilizar aplicar márgenes, los mismos se manejan a trav&eacute;s de la clase `offsetX`. 
+// A su vez también se encuentran disponibles clases para el manejo de offsets ante diferentes resoluciones. 
+// Las clases disponibles son: `offsetX-small`, `offsetX-medium` y `offsetX-large`:
+
+// ##### Ejemplo 1
+// 
+// - 4 columnas de 1 unidad separadas cada una por 2 unidades
 
 // ```
 // <div class="row-col">
-// 	<div class="col1">col1</div>
-// 	<div class="col2 offset1">col2 offset1</div>
-// 	<div class="col2 offset1">col2 offset1</div>
-// 	<div class="col2 offset1">col2 offset1</div>
-// 	<div class="col1 offset1">col1 1</div>
+// 	<div class="col1 offset2">1</div>
+// 	<div class="col1 offset2">2</div>
+// 	<div class="col1 offset2">3</div>
+// 	<div class="col1 offset2">4</div>
 // </div>
+// ```
+
+// ##### Ejemplo 2
+// 
+// Comportamiento esperado:
+// 
+// - 4 columnas de 1 unidad separadas cada una por 2 unidades
+// - Large: 3 columnas de 1 unidad separadas cada una por 3 unidades
+// - Medium: 2 columnas de 1 unidad separadas cada una por 5 unidades
+// - Small: 1 columna de 1 unidad separada a 11 unidades
+
+// ```
 // <div class="row-col">
-// 	<div class="col2">col2</div>
-// 	<div class="col4 offset2">col2 offset2</div>
-// 	<div class="col2 offset2">col2 offset2</div>
+// 	<div class="col1 offset2 offset3-large offset5-medium offset11-small">1</div>
+// 	<div class="col1 offset2 offset3-large offset5-medium col0-small">2</div>
+// 	<div class="col1 offset2 offset3-large col0-medium col0-small">3</div>
+// 	<div class="col1 offset2 col0-large col0-medium col0-small">4</div>
 // </div>
+// ```
+
+// #### Pull / Push
+
+// La grilla ofrece la posibilidad de utilizar posicionamiento relativo, los mismos se manejan a trav&eacute;s de las clases `pullX` y `pushX`. 
+// A su vez también se encuentran disponibles clases para el manejo de posiciones ante diferentes resoluciones. 
+// Las clases disponibles son: `pullX-small`/`pushX-small`, `pullX-medium`/`pushX-medium` y `pullX-large`/`pushX-large`:
+
+// ##### Ejemplo 1
+// 
+// - 2 columnas de 6 unidades (orden inverso)
+
+// ```
 // <div class="row-col">
-// 	<div class="col4">col4</div>
-// 	<div class="col2 offset1">col2 offset1</div>
-// 	<div class="col4 offset1">col4 offset1</div>
+// 	<div class="col6 push6">1</div>
+// 	<div class="col6 pull6">2</div>
 // </div>
+// ```
+
+// ##### Ejemplo 2
+// 
+// - 12 columnas de 1 unidad (orden inverso)
+
+// ```
 // <div class="row-col">
-// 	<div class="col5">col5</div>
-// 	<div class="col5 offset2">col5 offset2</div>
+// 	<div class="col1 push11">1</div>
+// 	<div class="col1 push9">2</div>
+// 	<div class="col1 push7">3</div>
+// 	<div class="col1 push5">4</div>
+// 	<div class="col1 push3">5</div>
+// 	<div class="col1 push1">6</div>
+// 	<div class="col1 pull1">7</div>
+// 	<div class="col1 pull3">8</div>
+// 	<div class="col1 pull5">9</div>
+// 	<div class="col1 pull7">10</div>
+// 	<div class="col1 pull9">11</div>
+// 	<div class="col1 pull11">12</div>
 // </div>
+// ```
+
+// ##### Ejemplo 3
+// 
+// Comportamiento esperado:
+// 
+// - 4 columnas de 3 unidades (orden normal)
+// - Large: 4 columnas de 3 unidades (orden inverso)
+// - Medium: 4 columnas de 3 unidades (orden impares primero)
+// - Small: 4 columnas de 3 unidades (orden pares primero)
+
+// ```
 // <div class="row-col">
-// 	<div class="col1 offset2">col1 2</div>
-// 	<div class="col2 offset2">col1 offset2</div>
-// 	<div class="col1 offset2">col1 2</div>
+// 	<div class="col3 push9-large push6-small">1</div>
+// 	<div class="col3 push3-large push3-medium pull3-small">2</div>
+// 	<div class="col3 pull3-large pull3-medium push3-small">3</div>
+// 	<div class="col3 pull9-large pull6-small">4</div>
 // </div>
 // ```
 
+// #### Centered
+
+// La grilla ofrece la posibilidad de posicionar una columna de manera centrada a trav&eacute;s de la clase `centered`. 
+// A su vez también se encuentran disponibles clases para el manejo ante diferentes resoluciones. 
+// Las clases disponibles son: `centered-small`, `centered-medium` y `centered-large`:
+
+// ##### Ejemplo 1
+// 
+// Comportamiento esperado:
+// 
+// - 1 columna de 4 unidades sin centrar
+// - Large: 1 columna de 4 unidades centrada
+// - Medium: 1 columnas de 4 unidades sin centrar
+// - Small: 1 columnas de 4 unidades centrada
+
+// ```
+// <div class="row-col">
+// 	<div class="col4 centered-large centered-small">1</div>
+// </div>
+// ```
+
+
 // ### Sass
 
 // #### Import
@@ -172,9 +334,15 @@
 // * `$grid-default-row-class`: Nombre de la clase para el contenedor (`row-col`). Valor predeterminado: `row-col`.
 // * `$grid-default-column-class`: Nombre de la clase para las columnas (`colX`). Valor predeterminado: `col`.
 // * `$grid-default-offset-class`: Nombre de la clase para aplicar offset (`offsetX`). Valor predeterminado: `offset`.
+// * `$grid-default-centered-class`: Nombre de la clase para aplicar el centrado de columnas (`centered`). Valor predeterminado: `centered`.
+// * `$grid-default-pull-class`: Nombre de la clase para aplicar pull (`pullX`). Valor predeterminado: `pull`.
+// * `$grid-default-push-class`: Nombre de la clase para aplicar push (`pushX`). Valor predeterminado: `push`.
+// * `$grid-default-first-class`: Nombre de la clase para aplicar el comportamiento de primeras columnas (`first`). Valor predeterminado: `first`.
 // * `$grid-default-container-class`: Nombre de la clase para el contenedor principal (`container`). Valor predeterminado: `container`.
 // * `$grid-default-include-offset`: Incluir estilos para aplicar offset. Valor predeterminado: `true`.
 // * `$grid-default-include-container`: Incluir estilos para el contenedor. Valor predeterminado: `true`.
+// * `$grid-default-include-push`: Incluir estilos para aplicar push. Valor predeterminado: `true`.
+// * `$grid-default-include-pull`: Incluir estilos para aplicar pull. Valor predeterminado: `true`.
 
 
 @import "compass/css3/box-sizing";
@@ -185,8 +353,14 @@ $grid-default-row-class: "row-col" !default;
 $grid-default-column-class: "col" !default;
 $grid-default-offset-class: "offset" !default;
 $grid-default-container-class: "container" !default;
+$grid-default-centered-class: "centered" !default;
+$grid-default-first-class: "first" !default;
+$grid-default-pull-class: "pull" !default;
+$grid-default-push-class: "push" !default;
 $grid-default-include-container: true !default;
 $grid-default-include-offset: true !default;
+$grid-default-include-pull: true !default;
+$grid-default-include-push: true !default;
 
 @mixin grid(){
 	
@@ -194,21 +368,29 @@ $grid-default-include-offset: true !default;
 		@include grid-container();
 	}
 
-	@include grid-columns();
+	.#{$grid-default-row-class} {
+		width: 100%;
+		@include clearfix;
 
-}
+		@include grid-columns("");
 
-@mixin grid-container(){
+		@media (max-width: 480px){
+			@include grid-columns("-small");
+		}
+
+		@media (min-width: 481px) and (max-width: 800px){
+			@include grid-columns("-medium");
+		}
+
+		@media (min-width: 801px) and (max-width: 1024px){
+			@include grid-columns("-large");
+		}
 
-	.#{$grid-default-container-class} {
-		width: 90%;
-		max-width: 1200px;
-		min-width: 950px;
 	}
 
 }
 
-@mixin grid-columns(){
+@mixin grid-columns($grid-size){
 
 	$grid-gutters: $grid-default-columns - 1;
 	$grid-space-width: 100% / $grid-default-columns;
@@ -217,56 +399,105 @@ $grid-default-include-offset: true !default;
 	$grid-column-unit-width: ($grid-space-unit-width * 3) + $grid-corrector;
 	$grid-gutter-unit-width: $grid-space-unit-width + $grid-corrector;
 	$grid-magic-number-ie: 0.092;
-
-	.#{$grid-default-row-class} {
+		
+	[class^="#{$grid-default-column-class}#{$grid-size}"]{
 		width: 100%;
-		@include clearfix;
+		display: block;
+		float: left;
+		margin-left: $grid-gutter-unit-width;
+		@include box-sizing(border-box);
 
-		[class^="#{$grid-default-column-class}"]{
-			width: 100%;
-			display: block;
-			float: left;
-			margin-left: $grid-gutter-unit-width;
-			@include box-sizing(border-box);
+		&:first-child{
+			margin-left: 0;
+		}
 
-			&:first-child{
-				margin-left: 0;
-			}
+	}
+	
+	@if ($grid-default-include-pull == true) {
 
+		[class*="#{$grid-default-pull-class}"], [class*="#{$grid-default-push-class}"]{
+			position: relative;
 		}
 
-		@for $i from 1 through $grid-default-columns {
-
-			$grid-column-width: ($grid-column-unit-width * $i) + ($grid-gutter-unit-width * ($i - 1));
+	}
 
-			.#{$grid-default-column-class}#{$i} {
-				width: $grid-column-width;
+	//Estilos para cada columna
+	@for $i from 1 through $grid-default-columns {
+		
+		//Cálculo del ancho de las columnas
+		$grid-column-width: ($grid-column-unit-width * $i) + ($grid-gutter-unit-width * ($i - 1));
 
-				@if $i != $grid-default-columns {
+		.#{$grid-default-column-class}#{$i}#{$grid-size}{
+			width: $grid-column-width;
 
-					.ie7 &{
-						width: $grid-column-width - $grid-magic-number-ie;
-					}
+			@if ($i != $grid-default-columns and $grid-size == "") {
 
+				.ie7 &{
+					width: $grid-column-width - $grid-magic-number-ie;
 				}
 
 			}
 
-			@if $grid-default-include-offset == true {
+		}
+		
+		//Offset
+		@if ($grid-default-include-offset == true) {
 
-				[class^="#{$grid-default-column-class}"].#{$grid-default-offset-class}#{$i}{
-					margin-left: $grid-column-width + ($grid-space-unit-width * 2);
+			.#{$grid-default-offset-class}#{$i}#{$grid-size},
+			.#{$grid-default-offset-class}#{$i}#{$grid-size}:first-child{
+				margin-left: $grid-column-width;
+			}
 
-					&:first-child{
-						margin-left: $grid-column-width + $grid-space-unit-width;
-					}
+		}
+		
+		//Push
+		@if ($grid-default-include-push == true) {
 
-				}
+			.#{$grid-default-push-class}#{$i}#{$grid-size}, 
+			.#{$grid-default-push-class}#{$i}#{$grid-size}:first-child{
+				left: $grid-column-width + $grid-gutter-unit-width;
+			}
+
+		}
 
+		//Pull
+		@if ($grid-default-include-pull == true) {
+
+			.#{$grid-default-pull-class}#{$i}#{$grid-size}, 
+			.#{$grid-default-pull-class}#{$i}#{$grid-size}:first-child{
+				left: -($grid-column-width + $grid-gutter-unit-width);
 			}
 
 		}
 
 	}
+	
+	//Clase helper para las primeras columnas que no lo son
+	.#{$grid-default-first-class}#{$grid-size}{
+		margin-left: 0;
+	}
 
-}
+	//Clase para ocultar columnas
+	.#{$grid-default-column-class}0#{$grid-size}{
+		display: none;
+	}
+	
+	//Clase para columnas centradas
+	.#{$grid-default-centered-class}#{$grid-size},
+	.#{$grid-default-centered-class}#{$grid-size}:first-child {
+		margin-left: auto;
+		margin-right: auto;
+		float: none;
+	}
+
+}
+
+@mixin grid-container(){
+
+	.#{$grid-default-container-class} {
+		width: 90%;
+		max-width: 1200px;
+		min-width: 950px;
+	}
+
+}