Construir con una grilla se ha convertido en un requisito cotidiano para los desarrolladores front-end. Las cuadrículas no solo proporcionan una sensación de ritmo y consistencia en el diseño, sino que cuando se utiliza una estructura de cuadrícula conocida, proporciona un lenguaje de diseño colectivo simple para el trabajo entre equipos..

Flexboxgrid es un nuevo marco que le permite combinar la previsibilidad y la estructura del lenguaje común de un sistema de cuadrícula con la flexibilidad y simplicidad de flexbox. Hoy, analizaremos los aspectos básicos del uso de Flexboxgrid y lo utilizaremos para crear una página de portafolio de alimentación de Dribbble simple. Empecemos!

Comience con el Flexboxgrid CSS

El primer paso para comenzar con Flexboxgrid es tomar el CSS. Para el desarrollo, usa la versión no minada..

A continuación, hablemos un poco sobre cómo funciona Flexboxgrid. La documentación está completamente incluida en la página de inicio en Flexboxgrid.com, pero repasaremos los puntos altos.

Columnas responsivas

Flexboxgrid está diseñado para admitir cuatro puntos de interrupción primarios, nombrados arbitrariamente para evitar problemas de mantenimiento de puntos de interrupción específicos de píxeles. Estos puntos de interrupción son mano, regazo, escritorio, y pared, lleva el nombre de lo que se ve como anchos de vista, de mano, de regazo, de escritorio y de pared (es decir, donde es probable que se encuentre un dispositivo). Las clases de columnas en sí están estructuradas así:

column- [number] - [breakpoint] column-4 - hand column-auto - wall

Flexboxgrid es una cuadrícula de doce columnas y utiliza columnas basadas en porcentajes en combinación con el poder de flexbox para una cuadrícula sólida..

Nota: el soporte del navegador para flexbox todavía está incompleto; No se debe confiar en Flexboxgrid para proyectos que requieran una implementación completa en varios navegadores.

Un ejemplo de fila

Tomando directamente de la documentación, el marcado para una fila de ejemplo usando Flexboxgrid se ve algo como esto:

 
 
Sensible
 
 

Columnas automáticas

Hay un ancho de columna "automático" disponible en cada punto de interrupción. Esto hace algo diferente a un tradicional. ancho: auto regla. Flexbox llenará automáticamente la fila de manera apropiada con columnas de tamaño uniforme, independientemente de cuántas se coloquen en la fila.

 
 
auto
 
 
 
auto
 
 
 
auto
 
 

Por ejemplo, en el ejemplo anterior, las columnas ocuparán un tercio cada una.

Alineación

Hay mucho más que se puede hacer con Flexboxgrid, incluida la alineación de las columnas de una fila horizontalmente:

así como verticalmente:

Flexboxgrid también aprovecha las sencillas técnicas de reordenación de Flexbox y las opciones de espaciado dinámico, pero por ahora vamos a seguir adelante con la creación de nuestra red Dribbble.!

Una rejilla Dribbble

Comenzaremos con un simple documento HTML vacío, que incluye jQuery y Normalize. Siéntase libre de usar algo como HTML5 Boilerplate con herramientas como Modernizr, pero para este proyecto nos mantendremos enfocados en el JavaScript, HTML y CSS que necesita para escribir por sí mismo..

A partir de aquí, construiremos la estructura del HTML que queremos usar y luego lo conectaremos todo con la API de Dribbble..

Nuestro marcado de cuadrícula

Primero, digamos que queremos configurar una cuadrícula que comience en un mínimo de dos bloques por fila horizontal y se mueva hasta seis bloques por fila en el pared punto de quiebre Aquí es cómo lograríamos eso:

columna-6 - mano dicta que en el mano punto de interrupción (para los dispositivos que se sostienen en la mano) cada bloque llenará seis de las doce columnas. Por lo tanto, podremos colocar dos miniaturas de Dribbble en una fila de nuestro diseño en este punto.

En el regazo punto de quiebre, columna-4 - vuelta dicta que cada bloque tendrá cuatro columnas de ancho, por lo que podremos ajustar tres en una fila.

Más marcado dinámico

Digamos que queremos hacer la cuadrícula un poco más dinámica. Aquí hay un ejemplo de una fila de cuadrícula que usa ancho automático y ancho variable.

Nota: en el punto de ruptura de la pared, en realidad tenemos una cuadrícula con cinco a través; esto normalmente no sería posible con un sistema de cuadrícula de doce columnas sin clases personalizadas agregadas, ya que doce no es divisible por cinco. Sin embargo, con Flexbox, los anchos de columna se pueden calcular fácilmente de forma automática.

Trayendo en Jribbble

Ahora que tenemos una estructura de cuadrícula en su lugar, escribamos el código necesario para incorporar nuestro contenido de Dribbble. Estaremos usando el complemento jQuery Jribbble. Puede obtener la fuente de GitHub. Jribbble hará que sea extremadamente fácil tirar de Dribbble.

Incluya Jribbble en un archivo JS separado, o en la parte superior de su script.js. Debajo de Jribbble, este código traerá tus tomas Dribbble deseadas.

(function () var playerId = "envato"; $ .jribbble.getShotsByPlayerId (playerId, function (data) var shots = data.shots; var h = "; $ (shots) .each (función (i, shot) h + = '
'; h + = ''; h + = '
'; ); $ ('. dribbble-shots'). html (h); );  ());

Primero envolvemos nuestro código en una expresión de función invocada de inmediato, lo que garantiza que protejamos nuestro ámbito de JavaScript. A continuación, establecemos nuestra identificación de jugador y, posteriormente, usamos Jribbble para introducir nuestros disparos. Una vez que tenemos nuestras tomas, construimos el html iterando sobre cada toma y llenamos un elemento con la clase chupitos con ese html.

Nuestra estructura HTML debería verse así:

         
 
Mis disparos de Dribbble
 
 
 
    

Tenga en cuenta que también hemos incluido una fuente de Google. 

Estilo minimalista

A continuación, le proporcionaremos un estilo mínimo en style.css:

body font-family: 'Maven Pro', sans-serif; color de fondo: # f1faff;  h1 font-weight: 400;  * [clase ^ = columna] / * max-height: 100px; * / overflow: hidden; margen inferior: 12px;  * [clase ^ = columna] img ancho: 100%;  .container ancho: 80%; margen: 0 auto; posición: relativa; relleno superior: 100px;  a display: block; opacidad: 0,9;  a: flotar opacidad: 1; 

Su producto final debe verse similar a esto:

Conclusión

Flexboxgrid ofrece una solución de cuadrícula muy flexible que permite un control muy interesante sobre el espaciado, el tamaño, la visualización e incluso el orden de los elementos. Cuando se combina con contenido atractivo, Flexboxgrid le permite hacer fácilmente lo que antes era mucho más complicado con su cuadrícula.