Styleguide

Container

Contenedor que enmarca el sitio web. Es necesario para responsive.

CONTAINER
<div class="container">CONTAINER</div>

Container Feature

Contenedor que obliga a un mínimo de 500px de alto.

Container feature 500px mínimo de alto. 
<div class="container_feature">Container feature 500px mínimo de alto. </div>

Container Feature Half

Contenedor que obliga a un mínimo de 300px de alto.

Container feature 300px mínimo de alto. 
<div class="container_feature_half">Container feature 300px mínimo de alto. </div>

Container Feature Quarter

Contenedor que obliga a un mínimo de 70px de alto.

Container feature 70px mínimo de alto. 
<div class="container_feature_quarter">Container feature 70px mínimo de alto. </div>

Container Width

Contenedor con ancho regulado. Por porcentaje.

Nota la classe Marged centra el div por medio de margin

Para estas clases tenemos:

.container_width_100 : Contenedor al 100%

.container_width_90 : Contenedor al 90%

.container_width_80 : Contenedor al 80%

.container_width_70 : Contenedor al 70%

.container_width_60 : Contenedor al 60%

.container_width_50 : Contenedor al 50%

Contenedor al 100% de ancho 
<div class="container_width_100">Contenedor al 100%  de ancho  </div>
Contenedor al 90% de ancho 
<div class="container_width_90" marged>Contenedor al 90%  de ancho </div>
Contenedor al 80% de ancho 
<div class="container_width_80 marged">Contenedor al 80%  de ancho </div>
Contenedor al 70% de ancho 
<div class="container_width_70 marged">Contenedor al 70%  de ancho </div>
Contenedor al 60% de ancho 
<div class="container_width_60 marged">Contenedor al 60%  de ancho </div>
Contenedor al 50% de ancho 
<div class="container_width_50 marged">Contenedor al 50%  de ancho </div>

Espacio

Espacio para agregar

seccion-spacer

x x x x x x x x x x x x x
x x x x x x x x x x x x x 
x x x x x x x x x x x x x
<div class="seccion-spacer"></div>
x x x x x x x x x x x x x

seccion-spacer-half

x x x x x x x x x x x x x
x x x x x x x x x x x x x 
x x x x x x x x x x x x x
<div class="seccion-spacer-half"></div>
x x x x x x x x x x x x x

seccion-spacer-quarter

x x x x x x x x x x x x x
x x x x x x x x x x x x x 
x x x x x x x x x x x x x
<div class="seccion-spacer-quarter"></div>
x x x x x x x x x x x x x

Grid Container

Para poder aplicar un contenedor de grid, es necesario la clase grid-container

y cada columna debe de ser declarada también. grid-columna

Dos columnas

Oat cake powder cotton candy icing bear claw chupa chups marshmallow liquorice dessert. Chocolate bar oat cake apple pie toffee. Sesame snaps fruitcake pie biscuit lollipop pastry macaroon halvah halvah. Croissant powder gummi bears ice cream icing cake jujubes oat cake sesame snaps.
Oat cake powder cotton candy icing bear claw chupa chups marshmallow liquorice dessert. Chocolate bar oat cake apple pie toffee. Sesame snaps fruitcake pie biscuit lollipop pastry macaroon halvah halvah. Croissant powder gummi bears ice cream icing cake jujubes oat cake sesame snaps. 
<div class="grid-container grid-columna-2">

    <div class="grid-columna">

        Oat cake powder cotton candy icing bear claw chupa 
        chups marshmallow liquorice dessert. Chocolate bar 
        oat cake apple pie toffee. Sesame snaps fruitcake 
        pie biscuit lollipop pastry macaroon halvah halvah. 
        Croissant powder gummi bears ice cream icing cake 
        jujubes oat cake sesame snaps.

    </div>

    <div class="grid-columna">

        Oat cake powder cotton candy icing bear claw chupa 
        chups marshmallow liquorice dessert. Chocolate bar 
        oat cake apple pie toffee. Sesame snaps fruitcake 
        pie biscuit lollipop pastry macaroon halvah halvah. 
        Croissant powder gummi bears ice cream icing cake 
        jujubes oat cake sesame snaps.

    </div>

</div>

Dos columnas Sided

Significa que la primera es leve mente más ancha que la segunda.

Oat cake powder cotton candy icing bear claw chupa chups marshmallow liquorice dessert. Chocolate bar oat cake apple pie toffee. Sesame snaps fruitcake pie biscuit lollipop pastry macaroon halvah halvah. Croissant powder gummi bears ice cream icing cake jujubes oat cake sesame snaps.
Oat cake powder cotton candy icing bear claw chupa chups marshmallow liquorice dessert. Chocolate bar oat cake apple pie toffee. Sesame snaps fruitcake pie biscuit lollipop pastry macaroon halvah halvah. Croissant powder gummi bears ice cream icing cake jujubes oat cake sesame snaps. 
<div class="grid-container grid-columna-2-sided">

    <div class="grid-columna">

        Oat cake powder cotton candy icing bear claw chupa 
        chups marshmallow liquorice dessert. Chocolate bar 
        oat cake apple pie toffee. Sesame snaps fruitcake 
        pie biscuit lollipop pastry macaroon halvah halvah. 
        Croissant powder gummi bears ice cream icing cake 
        jujubes oat cake sesame snaps.

    </div>

    <div class="grid-columna">

        Oat cake powder cotton candy icing bear claw chupa 
        chups marshmallow liquorice dessert. Chocolate bar 
        oat cake apple pie toffee. Sesame snaps fruitcake 
        pie biscuit lollipop pastry macaroon halvah halvah. 
        Croissant powder gummi bears ice cream icing cake 
        jujubes oat cake sesame snaps.

    </div>

</div>

Tres columnas

x x x x x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x x x x x 
<div class="grid-container grid-columna-3">

    <div class="grid-columna ">

        x x x x x x x x x x x x x x x x x x x x x x x x x 

    </div>

    <div class="grid-columna">

        x x x x x x x x x x x x x x x x x x x x x x x x x 

    </div>

    <div class="grid-columna">

        x x x x x x x x x x x x x x x x x x x x x x x x x 

    </div>

</div>

Cuatro columnas

a a a a a a a a a a a a a a a a a a a a a a a a a
b b b b b b b b b b b b b b b b b b b b b b b b b
c c c c c c c c c c c c c c c c c c c c c c c c c
d d d d d d d d d d d d d d d d d d d d d d d d d 
<div class="grid-container">

    <div class="grid-columna grid-columna-4">

        a a a a a a a a a a a a a a a a a a a a a a a a a

    </div>

    <div class="grid-columna grid-columna-4">

        b b b b b b b b b b b b b b b b b b b b b b b b b

    </div>

    <div class="grid-columna grid-columna-4">

        c c c c c c c c c c c c c c c c c c c c c c c c c

    </div>

    <div class="grid-columna grid-columna-4">

        d d d d d d d d d d d d d d d d d d d d d d d d d

    </div>

</div>

Padding

Genera un espacio de padding a los elementos. De 3%

Padding 
<div class="padding">Padding </div>