Development mode

Antes de empezar, es necesario saber que Fresh CSS tiene un modo de desarrollo. Es útil si necesitas resaltar las columnas sobre las que trabajas, además, obtienes datos sobre las clases que estás usando en cada una de las columnas y el tamaño del navegador en el que te encuentres situado.

Para activarlo basta con sólo colocar class="developer" en la etiqueta body


  <body class="developer">
    ...
  </body>

Grid

Para el sistema de grilla en Fresh se decidió crear el tradicional de 12 columnas, esto es por ser el mas popular en frameworks de prototipado web, además, es muy fácil de usar.

Como se mencionó antes, la grilla se compone de 12 columnas encerradas en un contenedor class="row". El número 12 significaría 100%, por lo tanto class="col_12" ocuparía todo el ancho del contenedor padre.

Grid simple

En el siguiente ejemplo se muestra una primera columna col_12 ocupando todo el ancho, debajo se situan col_4 col_6 y col_2, la suma de estas ultimas columnas resulta de 12, por lo tanto cubren todo el ancho del contenedor.

col_12
col_4
col_6
col_2

  <div class="row">
    <div class="col_12">col_12</div>
    <div class="col_4">col_4</div>
    <div class="col_6">col_6</div>
    <div class="col_2">col_2</div>
  </div>

Offset

Las clases offset o de compensación, se usan como su nombre lo indican para compensar al momento de llevar una o varias columnas al extremo contrario ó para dejar espacios vacios entre dos o mas columnas.

En el siguiente ejemplo se muestra una compensación de 8 columnas class="offset_8" seguido del tamaño de la columna a compensar class="col_4" la suma de ambas resulta de 12, haciendo que nuestra columna col_4 se mantenga en el extremo derecho del contenedor padre

offset_8, col_4

  <div class="row">
    <div class="col_4 offset_8">offset_8, col_4</div>
  </div>

Offset none

Para cancelar la compensación en distintos dispositivos usar las clases offset_mobileS_ offset_mobileM_ offset_mobileL_ offset_tablet_ offset_laptop_ o offset_laptopL seguido de la palabra none

Ejemplo: offset_tablet_none

col_7, offset_5, tablet_12, offset_tablet_none

Para apreciar el ejemplo usa el Device mode de Chrome o en su defecto reduce la ventana del navegador.


  <div class="row">
    <div class="col_7 offset_5 tablet_12 offset_tablet_none">col_7, offset_5, tablet_12, offset_tablet_none</div>
  </div>

Manual responsive

Con el sistema de grillas nuestra web ya es responsive, pero no totalmente, para tener mas control sobre el tamaño de nuestras columnas en dispositivos mas pequeños es necesario las clases responsivas: mobileS_ mobileM_ mobileL_ tablet_ laptop_ o laptopL_, añadelas a las columnas que necesites modificar su ancho seguido del número 1 a 12.

Ejemplo: mobileL_12

col_4
col_6, tablet_8
col_2, tablet_12

Para apreciar el ejemplo usa el Device mode de Chrome o en su defecto reduce la ventana del navegador.


  <div class="row">
    <div class="col_4">col_4</div>
    <div class="col_6 tablet_8">col_6, tablet_8</div>
    <div class="col_2 tablet_12">col_2, tablet_12</div>
  </div>

Hide/Block - responsive

Para ocultar y mostrar elementos sólo basta con usar class="hide" para ocultar y class="block" para mostrar.

Para ocultar y mostrar elementos en distintos dispositivos se usan las clases mobileS_ mobileM_ mobileL_ tablet_ laptop_ o laptopL_ seguido de la palabra hide o block

Ejemplo: tablet_hide o mobileL_block

col_12, tablet_hide, mobileL_block

Para apreciar el ejemplo usa el Device mode de Chrome o en su defecto reduce la ventana del navegador.


  <div class="row">
    <div class="col_12 tablet_hide mobileL_block">col_12, tablet_hide, mobileL_block</div>
  </div>

Row

Por defecto la clase row tiene margen bottom de 15px, si desea eliminarlo usar class="margin_bottom_none"

Helpers

Text align

Para alinear a la izquierda o left class="text_left"

Este texto está alineado a la izquierda.


  <p class="text_left">Este texto está alineado a la izquierda.</p>

Para alinear al centro class="text_center"

Este texto está alineado al centro.


  <p class="text_center">Este texto está alineado al centro.</p>

Para alinear a la derecha o right class="text_right"

Este texto está alineado a la derecha.


  <p class="text_right">Este texto está alineado a la derecha.</p>

Center block

Puedes usar tambien class="center_block" para alinear los hijos de un contenedor padre, esto siempre y cuando el elemento hijo tenga un ancho predeterminado.

Block Center

  <div class="center_block" style="width: 200px;">Block Center</div>

Responsive videos embeds

Para el uso de videos responsivos en Fresh CSS es necesario envolverlo en un contenedor class="embed_container" como se muestra en el siguiente ejemplo.


  <div class="embed_container">

    <!-- Video -->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Y1PVmANeyAg" frameborder="0" allowfullscreen=""></iframe>
    <!-- End video -->

  </div>

Tablev.1.0.3

Una tabla no es mas que un componente para organizar una gran cantidad de datos, en Fresh CSS ya tenemos un estilo predeterminado para ellas.

Lunes Martes Miércoles
Soleado Mayormente soleado Parcialmente nublado
19°C 17°C 12°C
E 13 km/h E 11 km/h S 16 km/h

Options

  • Responsive - Para hacer que tu tabla sea totalmente responsiva, usa la siguiente clase: responsive
  • Center - Por defecto las tablas están centradas, para eliminar esta caracteristica, usa la siguiente clase: no_center
  • Striped - Para eliminar el rayado en las filas de tu tabla, usa no_striped

  <table class="responsive">

    <thead>
      <tr>
          <th>Lunes</th>
          <th>Martes</th>
          <th>Miércoles</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Soleado</td>
        <td>Mayormente soleado</td>
        <td>Parcialmente nublado</td>
      </tr>
      <tr>
        <td>19°C</td>
        <td>17°C</td>
        <td>12°C</td>
      </tr>
      <tr>
        <td>E 13 km/h</td>
        <td>E 11 km/h</td>
        <td>S 16 km/h</td>
      </tr>
    </tbody>

  </table>

Alerts

Alert Inserte aquí su mensaje Link
Success Inserte aquí su mensaje Link
Warning Inserte aquí su mensaje Link
Danger Inserte aquí su mensaje Link

  <!-- Default -->
  <div class="alert"><strong>Alert</strong><span> Inserte aquí su mensaje<a href="#!">Link</a></span></div>

  <!-- Others -->
  <div class="alert success"><strong>Success</strong><span> Inserte aquí su mensaje <a href="#!">Link</a></span></div>
  <div class="alert warning"><strong>Warning</strong><span> Inserte aquí su mensaje <a href="#!">Link</a></span></div>
  <div class="alert danger"><strong>Danger</strong><span> Inserte aquí su mensaje <a href="#!">Link</a></span></div>