Contenedores

Contenedor principal

Para cuando no se tiene suficiente contenido y se quiere poner el footer abajo de la pantalla, pero que si el contenido crece se quede hasta el final. Se utiliza la clase .main-container para el contenedor principal y .flex para el contenedor del contenido que puede variar de altura.

El .main-container tiene altura mínima del alto de la pantalla y el .flex hace que tome el alto variable de lo que sea que sobre de alto.

a

b

c


<div class="main-container">
  <div class="bg-primary to-bg-step2">a</div>
  <div class="flex bg-primary to-bg-step3">b</div>
  <div class="bg-primary to-bg-step4">c</div>
</div>

Contenedor

Este es el contenedor que se utiliza en todos lados para centrar la página. Se utiliza con la clase .container y funciona en base a 5 variables que se pueden editar en el archivo de _vars.sass, definen el ancho máximo que puede tomar y el ancho que tendrá en mobile, tablets, laptops y pantallas.

Contenido


<div class="container bg-primary"> Contenido </div>

Margenes

El margen es el espacio que queda entre un elemento y el siguiente ó un elemento y su padre.
Se utiliza con la clase .margin-top para agregar margen arriba y si se agrega la clase .margin-small se reduce el margen a la mitad.

Margen arriba


<div class="margin-top bg-primary">
  Margen arriba
</div>

Margen abajo


<div class="margin-bottom bg-primary">
  Margen abajo
</div>

Margen arriba y abajo


<div class="margin-vsides bg-primary">
  Margen arriba y abajo
</div>

Margenes especiales

Navegación fija

Para cuando se utiliza el navbar fijo arriba, se utiliza la clase .navbar-fixed-top al menos en el primer elemento, para tener el margen de espacio que ocupa la navegación al inicio de la página.


<div class="navbar-fixed-top bg-primary">
  Navegación fija arriba
</div>

Para cuando la navegación esta fija abajo, se utiliza la clase .navbar-fixed-bottom en el último elemento.


<div class="navbar-fixed-bottom bg-primary">
  Navegación fija abajo
</div>

Espaciado

Es el espacio que existe entre un elemento y su contenido.
Se utiliza con la clase .padding-around para agregar el espaciado alrededor y si se agrega la clase .padding-small se reduce el espacio a la mitad.

Espacio alrededor


<div class="padding-around bg-primary">
  Espacio alrededor
</div>

Espacio arriba


<div class="padding-top bg-primary">
  Espacio arriba
</div>

Espacio abajo


<div class="padding-bottom bg-primary">
  Espacio abajo
</div>

Espacio izquierdo


<div class="padding-left bg-primary">
  Espacio izquierdo
</div>

Espacio derecho


<div class="padding-right bg-primary">
  Espacio derecho
</div>

Espacio arriba y abajo


<div class="padding-vsides bg-primary">
  Espacio arriba y abajo
</div>

Espacio izquierdo y derecho


<div class="padding-hsides bg-primary">
  Espacio izquierdo y derecho
</div>