Grid CSS y marcador de Grid ahora en Firefox Developer Edition

22 enero, 2017 20:42 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

El Grid CSS ha sido añadido a la Developer Edition 52 de Firefox (¡descárgatela aquí!). Con las implementaciones de Chrome (y ojalá Safari y Edge) llegando dentro de poco, usar la cuadrícula para construir sitios web será posible con las nuevas versiones en todos los navegadores.

El Grid permite a los usuarios disociar HTML del diseño, expresando esos asuntos en CSS exclusivamente. Se adapta para consultas de media y contextos diferentes, haciéndolo una alternativa viable a frameworks tales como Twitter Bootstrap o Skeleton, los cuales confían en una estructura precisa y altamente acoplada de clases para definir la cuadrícula de contenido.

Reduciendo los riesgos de fragilidad, de código inflado, y altos costes de mantenimiento inherentes en como actualmente se construye la web, grid realmente tiene potencial en cambiar la forma en que hacemos diseños. Jen Simmons lo denomina Dirección de Arte Real para la Web y Rachel Andrew ha creado Grid mediante Ejemplos para informar, compartir, y evangelizar sobre ello. Si eres nuevo en grid, asegúrate de echarle un vistazo.

Como puedes ver en el vídeo, la herramienta de marcador del grid te ayudará a comenzar ilustrando l cuadrícula en la página mientras estás trabajando. Herramientas adicionales están planeadas en un futuro cercano para continuar trabajando con grid.

Para acceder a esta herramienta, asegurate que estas ejecutando una versión actualizada de Developer Edition. Lo siguiente, abre una página que sepas que tiene código de grid—te recomendamos una de estas demos para esto.

Abre el Inspector mediante Desarrollador Inspector. Selecciona un elemento con la propiedad display:grid;. Para alternar líneas de grid, haz click en el icono cercano a “grid” el cual continuará las líneas de manera permanente.

El equipo de herramientas de desarrollo de Firefox ha planeado una serie de mejoras para hacer que el trabajo con grid sea más fácil en el futuro. Puedes seguir el progreso en los siguientes bugs:

El bug para el seguimiento de este trabajo es bug 1181227.

The following two tabs change content below.

Compartir artículo:

Join the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa