Presentamos CSS Gridish: una herramienta de código abierto para ayudar a su equipo a adaptar CSS Grid hoy

Hoy, me complace presentar una nueva herramienta de código abierto de IBM llamada CSS Gridish.

CSS Gridish toma especificaciones de diseño de la cuadrícula de su producto y desarrolla varios recursos para que su equipo los use:

  • Un archivo de boceto con mesas de trabajo y configuraciones de cuadrícula / diseño para diseñadores
  • Código CSS / SCSS usando CSS Grid con una alternativa de CSS Flexbox para desarrolladores
  • Una extensión de Google Chrome para que cualquiera pueda verificar la alineación de una página web

El objetivo es ayudar a los equipos a adaptar CSS Grid antes y permitir diseños más complejos. Para mostrar cuán versátil es la herramienta, aquí hay algunos ejemplos de cuadrículas de Bootstrap, Carbon Design System y Material Design.

Por qué los desarrolladores de IBM hicieron esto

La nueva especificación CSS Grid es maravillosa para el diseño web. Ahora, los diseñadores pueden poner tanto cuidado en el eje y como tienen el eje x en el pasado. Los proyectos de izquierda y derecha están comenzando a documentar su transición a CSS Grid.

Muchos equipos de IBM están ansiosos por usar CSS Grid, pero se enfrentan a un par de bloqueadores que superar. CSS Gridish ayuda al abordar estos bloqueadores.

La captura de pantalla superior es una página que se carga en Chrome usando CSS Grid. La captura de pantalla inferior es la misma página en IE 11 usando CSS Flexbox. (Fuente)

Compatibilidad del navegador

CSS Grid actualmente tiene una gran compatibilidad con el navegador (~ 75%). Sin embargo, muchos productos aún necesitan servir a los navegadores restantes. Por ejemplo, ibm.com todavía recibe el 10% de su tráfico de Internet Explorer. Se necesita mucho trabajo adicional para admitir esos navegadores antiguos.

Si bien CSS Gridish siempre construye yourGrid.css que usa CSS Grid, también crea un archivo que llamamos yourGrid-legacy.css. Este archivo heredado todavía solo sirve código CSS Grid si un navegador lo admite. Si el navegador no es compatible con CSS Grid, el usuario recibe un respaldo de Flexbox. Agregue las clases adicionales para yourGrid-legacy.css y ha agregado compatibilidad con versiones anteriores.

¿Qué haces si ya no necesitas soportar navegadores antiguos? Todo lo que se necesita es cambiar a yourGrid.css para eliminar preciosos kilobytes de la experiencia.

Puente de diseño y código

Han surgido grandes herramientas que crean una única fuente de verdad para el diseño y el código como React Sketchapp y Lona. Estas herramientas aseguran que los diseñadores y desarrolladores estén haciendo con los mismos componentes.

Use la extensión de Chrome para CSS Gridish para revisar páginas web con la misma cuadrícula y configuraciones de diseño en sus mesas de trabajo de Sketch.

Esperamos traer esa misma unidad de equipo a la parrilla. Las mesas de trabajo para Sketch y el código para el desarrollo web se generan a partir del mismo archivo de configuración. Si bien el archivo de configuración de cuadrícula no es perfecto, queremos que CSS Gridish inicie una conversación sobre estándares de cuadrícula en herramientas similares.

Además, es fácil que los detalles del diseño se pierdan en la transición al desarrollo. Por eso hemos creado una extensión de Google Chrome para revisar su trabajo codificado. La extensión de Chrome se puede configurar en el archivo de configuración de cuadrícula de su equipo para ver la misma cuadrícula y diseño del archivo de croquis con los mismos accesos directos (CTRL + G y CTRL + L). Los desarrolladores disfrutan usando la extensión con el archivo Sketch que están implementando abierto. A los diseñadores les encanta revisar páginas web codificadas con él.

Respetando toda la página

Usando CSS Grid, un desarrollador puede seguir el diseño de la cuadrícula al comenzar en la primera capa de HTML. Pero las cosas se ponen más difíciles cuando el desarrollador tiene que trabajar dentro de diferentes secciones y otros nodos. Esto se debe a que display: subgrid sigue ganando compatibilidad con el navegador.

CSS Gridish funciona alrededor de esto confiando en unidades de ancho de ventana gráfica en lugar de unidades de porcentaje relativo. Puede incrustar tantos elementos .yourGrid-grid entre sí, pero aún así respetar las columnas y filas de la página. El único inconveniente que hemos encontrado es que los navegadores tratan la unidad vw de manera diferente con barras de desplazamiento. Esto se puede evitar con margen en su cuadrícula.

Cómo funciona

La única entrada que necesita CSS Gridish es un archivo json llamado css-gridish.json. El archivo acepta sus especificaciones y opciones de diseño de cuadrícula para dónde / cómo se guardan los archivos de salida. Por ahora, CSS Gridish hace un par de suposiciones sobre su diseño de cuadrícula:

  • Las canaletas externas son la mitad del tamaño de las canaletas internas
  • Sus columnas principales son fluidas en lugar de anchos fijos

Sugerencia: Para obtener los mejores resultados en Sketch, le recomendamos que haga divisibles los puntos de corte, el margen y la canaleta por la altura de la fila.

Mientras que el diseñador de la cuadrícula especifica las dimensiones en rojo (más el número de columnas), un desarrollador recibe los valores útiles en azul.

CSS Gridish se ejecuta en una línea de comandos con solo npx css-gridish. ¡Entonces debería ver una carpeta con todos los archivos para que su equipo use su grilla! Lo mejor de CSS Gridish es que lo hace bastante fácil para los usuarios nuevos de CSS Gridish. Después de que los usuarios aprendan las clases detalladas en la documentación, generalmente usarán solo dos reglas:

.myElement {
    columna de cuadrícula: 1 / span 4; // Abarca cuatro columnas de la primera fila
    fila de cuadrícula: 4 / span 8; // Abarca ocho filas desde la cuarta fila
}

El código de reserva de Flexbox funciona de manera similar a la mayoría de los marcos de cuadrícula con nombres de clase BEM reconocibles.

Por defecto, el código funciona con columnas fluidas y filas fijas. También permite viceversa con útiles clases modificadoras. Utilizará la clase de fila fluida para crear formas como cuadrados que se escalan con el ancho de pantalla del usuario.

Un inconveniente cuando se utiliza el código CSS Gridish es que no utilizamos la propiedad gap de CSS Grid para canalones. En cambio, hay clases de relleno que tienen un tamaño de medio canal que aplica para respetar el canal. Esto se debe a la incapacidad de ignorar las brechas para situaciones como colores de fondo y medios de tamaño completo. Esperemos que la próxima versión de la especificación CSS Grid lo resuelva.

El futuro

CSS Gridish tiene como objetivo obtener más productos para adoptar CSS Grid antes, y facilitar la transición a usuarios y equipos.

A largo plazo, esperamos que esto fomente una idea llamada bibliotecas de componentes bidimensionales. La industria ha tenido una era sólida de bibliotecas de componentes que llenan el ancho en el que los usuarios colocan un componente. Ahora con CSS Grid, podemos crear componentes que también llenen el alto en el que están colocados. Esto proporciona más posibilidades creativas para quienes hacen un diseño sistema y más flexibilidad para los equipos que lo utilizan.

Mientras tanto, utilice y contribuya de nuevo a CSS Gridish. ¡Hay mucho más trabajo por hacer!

Si te ayuda, ¡deja CSS Gridish como una estrella!

James Y Rauhut (@seejamescode) es un diseñador de ATX que trabaja para IBM Design. Le encanta codificar, investigar e intentar lo mejor para Dios. El artículo anterior es personal y no representa necesariamente las posiciones, estrategias u opiniones de IBM.

Un agradecimiento especial a Hayley Hughes por el logotipo discotástico. Además, las siguientes personas fueron de gran ayuda para el proyecto en sí: Trevor Wong, Daniel Kuehn, Seth Johnson, Chiu-Ping Chiu, Jen Downs, Josh Black, Jessica Tremblay, Maranda Bodas, Wonil Suh, Quincy Larson y todo el FED. Comunidad @IBM