Ebp-grid

Ebp-grid es un framework solo para CSS para diseñar web adaptables a todos los dispositivos mobiles, tableta y web.

Autor : Francisco Javier Moreno García de elboqueronpaco.org.

Este respositorios incluye los siguientes archivos:

• css - contiene ebp-grid.css en su version css.
• sass - contiene ebp-grid.scss en su versión sass.

Instalar desde npm

npm i -S ebp-grid

Caracteristicas

• Ebp-grid esta reseteado inspirado por:

  i. Paul Irish`s {Box-sizing: border-box}

  ii. Zero Box Model {margin:0; padding:0;}

  iii. Nicolas Gallagher`s normalize.css

• Estructura base en Contendores & Item.

• Con dos tipos de Contenedores:

  i. Contenedor que ocupa todo el ancho de pagina **.Contendor-total**.

  ii. Contenedor con máximo de 1200px se usa **.contenedor**

• Diseñado para Mobile Firt Grido Sytem con 12 columnas & 5 Media Queries Size:

  i. Para telefonos > (20em o 320px) se usa .ph-1 a .ph-12

  ii. Telefono > (30em o 480px) se usa .mo-1 a .mo-12

  iii. Tablet > (37.5em o 600px) se usa .t-1 a .t-12

  iv. Tablet Grandes > (48em o 768px) se usa .xt-1 a .xt-12

  v. Large Devices > (64em o 1024px) se usa .w-1 a .w-12

  vi. HD > (75em o 1200px) se usa .hd-1 a .hd-12

• Tiene layouts de multiples tecnicas:

  i. Float:

    - En el contenedor agreamos .ph-clear, mo-clear, t-clear. xt-clear
    w-clear, hd-clear, según el dipositivo que quieras utilizarlo, si un ejemplo lo
    utilizamos .ph-clear se le aplicará a todos demás dispositivo.
      
    - En el contenedor agreamos .ph-(floatizquirda o floatderecha),
    mo-(floatizquirda o floatderecha),
    t-(floatizquirda o floatderecha), xt-(floatizquirda o floatderecha)
    w-(floatizquirda o floatderecha), hd-(floatizquirda o floatderecha),
    según el dipositivo que quieras utilizarlo, 
    si un ejemplo lo
    utilizamos .ph-(floatizquirda o floatderecha) 
    se le aplicará a todos demás dispositivo.

Construir un menu adaptable:

Para crear un menu adatable a todos los dispositivo y deplegable utilizaremos la siguiente html el color pretemilado es un gris oscuro que podremos sustituir en nuestra pagina estilo si deseamos.

<header class="Header contendor-total"> <section class="contenedor t-flex t-flex-row t-flex-j-c-between"> <h1 class="Logo"><a class="Logo-link t-flex-item" href="#">Logo</a></h1><a class="Menu-button t-none" href="#">Botón </a> <article class="Navegacion t-flex-item"> <nav class="Menu"> <ul class="Menu-list"> <li class="Menu-list-item"><a class="Menu-list-item-link" href="#">link 1</a></li> <li class="Menu-list-item"><a class="Menu-list-item-link" href="#">link 2</a></li> <li class="Menu-list-item"><a class="Menu-list-item-link" href="#">link 3</a></li> <li class="Menu-list-item"><a class="Menu-list-item-link" href="#">link 4</a></li> <li class="Menu-list-item"><a class="Menu-list-item-link" href="#">link 5</a></li> </ul> </nav> </article> </section> </header>