Visión general

Componentes y opciones para diseñar su proyecto, incluidos contenedores de envoltura, un potente sistema de cuadrícula, un objeto de medios flexible y clases de utilidad receptivas.

Usar el grid de Resim

Lo primero que necitas es tener un contenedor, y para ello se usa la clase .container.Esta clase hace que el contenedor en tamaño largo se centra y en tamaño se expanda,pero si lo que deseas es tener el contenedor expandido en tamaño largo ,entonces puedes usar la clase .expanded que se se lo aplicas al contenedor

<div class="container">
   <div class="row bg--dark">
      <div class="col-sm-12 flex jc--center">
         <p>.container</p>
      </div>  
   </div>
</div>
   

Contenedor expandido

Si lo que deseas es tener el contenedor expandido en tamaño largo ,entonces puedes usar la clase .expanded que se se lo aplicas al contenedor.

<div class="container expanded">
   <div class="row bg--dark">
      <div class="col-sm-12 flex jc--center">
         <p>.container .expanded</p>
      </div>  
   </div>
</div>

Columnas

Las columnas que puedes usar son 12. Antes de usar las columnas de Resim, tines que que crear una fila con la clase .row .Para crear columnas hay 3 tipos:

• 1. La clase .col-sm-{size}, que sirve para tamaños pequeños
• 2. La clase .col-md-{size}, que sirve para tamaños medianos
• 3. La clase .col-lg-{size}, que sirve para tamaños largos

El funcionamiento de las clase para crear columnas ,depende de que valores tengas en los breakpoints

$breakpoints:(
  xsmall:320px,
  small: 576px,
  medium: 768px,
  large : 1024px,
  xlarge: 1200px
);

<div class="container">
   <div class="row">
      <div class="col-sm-12 col-md-3 col-lg-6 bg--dark p-4">
         <p>.col-sm-12.col-md-3.col-lg-6</p>
      </div>
      <div class="col-sm-12 col-md-3 col-lg-6 bg--dark p-4">
         <p>.col-sm-12.col-md-3.col-lg-6</p>
      </div>
      <div class="col-sm-12 col-md-3 col-lg-6 bg--dark p-4">
         <p>.col-sm-12.col-md-3.col-lg-6</p>
      </div>
      <div class="col-sm-12 col-md-3 col-lg-6 bg--dark p-4">
         <p>.col-sm-12.col-md-3.col-lg-6</p>
      </div>
   </div>
</div>
   

Columna centrada

La columna se centra en tamaños largos y medianos,pero en pequeño ,se convierte en una columna de .col-sm-12

<div class="container">
   <div class="row">
      <div class="col-center bg--dark flex jc--center p-4">
         <p class="text-sub">.col-center</p>
      </div>
   </div>
</div>