Taffy: Marco CSS delgado basado en CSS Flexbox

La sintaxis de CSS Flexbox no es tan fácil de comprender. Si no lo maneja a diario, prefiere usar algo más sencillo si es necesario. El pequeño marco CSS Taffy es esa cosa.

CSS Flexbox: inducción inevitable

Aquí en Noupe, ya hemos tratado con Flexbox varias veces. Te mostramos sus ventajas generales en este artículo.

Para obtener resultados más rápido, le mostré un par de patrones de Flexbox, esencialmente fragmentos de código, aquí mismo. En t3n, presenté la pequeña herramienta Atributo de diseño flexible, que también está destinado a acelerar el flujo de trabajo. Por último, pero no menos importante, encontré Fibonacci Flexbox Composer. Pero al final, no puedo negar que Flexbox necesita una cantidad de inducción superior a la media.

Flexbox simplificado con Taffy

El desarrollador web estadounidense Logan Carlile usó frameworks más antiguos como modelos, como el popular boilerplate 960.gs. Se orientó hacia los sistemas de cuadrícula, que proporcionan una estructura de diseño en una sintaxis muy parecida al lenguaje natural, pero que integra CSS Flexbox como base.

De esta manera, Carlile logra que la flexibilidad de Flexbox sea accesible para cualquiera que pueda diferenciar 12 columnas entre sí. Él renuncia intencionalmente a amplias opciones de configuración al estilo de Bootstrap o Foundation.

Por lo tanto, Taffy es más un modelo estándar que un marco. Por eso, a 11 kb, el tamaño del CSS es mínimo y no tiene dependencias. Taffy todavía ofrece estilo y tipografía, pero más como un equipo básico.

Taffy se crea usando Sass / SCSS y está disponible para descargar como un proyecto de código abierto bajo la licencia liberal MIT de el sitio web del proyecto. Aquí también encontrará una documentación suficientemente elaborada y comprensible.

Creación de columnas con Taffy

Como se mencionó anteriormente, Taffy recuerda a los sistemas de cuadrícula populares, al tiempo que sigue el enfoque de respuesta móvil primero y trabaja con puntos de interrupción para diferentes tamaños de pantalla. Como contenedor del contenido, la clase .container se utiliza.

Esta clase se preocupa por mantener el contenido centrado y limitado a 960 píxeles siempre que la ventana gráfica no tenga más de 1000 píxeles de ancho. Hasta un tamaño de ventana gráfica de 1.192 píxeles, el contenedor de contenido tiene un ancho de 1.152 píxeles y, en pantallas aún más amplias, el contenido está restringido a 1.344 píxeles. Estos, valores aparentemente aleatorios, fueron seleccionados, ya que todos se pueden dividir entre 12.

La cuadrícula real se coloca dentro de la clase de contenedor. Por eso, la clase .grid se utiliza, dentro del cual las columnas se definen mediante .grid_col. La clase .grid puede verse como una línea aquí. Dentro de esa línea, todas las columnas generalmente tienen el mismo ancho. Cuantas más columnas, más delgada es la individual. Eso es tan lógico como suena.

Dado que este enfoque no suele coincidir con los deseos del diseñador, existen varias formas de anular esta regulación predeterminada. Por ejemplo, podría asignar porcentajes a las columnas individuales, haciendo que ocupen una cierta cantidad del espacio disponible. Por ejemplo, agregando la clase .is-50p a .grid_col, crea una columna que ocupa el 50 por ciento del ancho total. Las columnas restantes de la fila respectiva comparten automáticamente el espacio sobrante.

Las clases proporcionan una forma más precisa de dividir la sala existente. .is-1 a .is-12. El orden grid_col is-1 daría como resultado que la columna ocupara una de las 12 columnas de ancho total. Si quisiéramos dos columnas, en este caso, la segunda sería grid_col is-11, por lo que el resultado final es 12. De esta manera, puede distribuir libremente las columnas.

Ahora, si se muestra una cuadrícula en una pantalla con un ancho inferior a 768 píxeles, todas las columnas se convierten en de ancho completo y se muestran una debajo de la otra. Si desea influir en la visualización de los puntos de interrupción individuales, Taffy ofrece las adiciones --small, --medium, y --large. Estos le permiten definir que una columna recibe diferentes valores de ancho en diferentes pantallas, por ejemplo.

El aprendizaje de la sintaxis de Taffy se puede realizar en media hora. El texto estándar también se ocupa de la tipografía, las formas, los botones, las tablas y los medios. Definitivamente vale la pena echarle un vistazo más de cerca. Caramelo.