Página principal » Diseño web » Fundación 6 - 10 increíbles nuevas características

    Fundación 6 - 10 increíbles nuevas características

    Los desarrolladores del framework front-end de la Fundación no solo se han sentado en sus laureles, mientras que el equipo de Bootstrap ha estado trabajando en su nuevo e importante lanzamiento. El año pasado realizaron un increíble World Tour para compartir sus conocimientos con sus usuarios y preguntarles cómo estaban usando Foundation en su trabajo de la vida real..

    Después de regresar a sus escritorios, agregaron las necesidades y los deseos de sus usuarios y se embarcaron en la planificación del nuevo lanzamiento principal del marco: Foundation 6.

    Todavía está en desarrollo, pero los planes son muy prometedores. Las siguientes características se centran en 3 áreas principales: Rendimiento, personalización y accesibilidad.. Echemos un vistazo a 10 de estas características ahora.

    1. Flujo de trabajo optimizado

    Sobre la base de las experiencias de sus usuarios, el equipo de la Fundación desarrolló un nuevo eslogan, a saber: “Prototipo a la producción”, para Foundation 6. Esto significa un nuevo flujo de trabajo optimizado que permitirá a los diseñadores y desarrolladores Ir directamente del prototipo a la producción..

    El objetivo de la nueva Foundation 6 es proporcionar un marco flexible y fácilmente personalizable que permita Escribe código limpio y semántico desde el principio.. La versión actual, Foundation 5 también permite la creación rápida de prototipos, pero podemos esperar una mayor optimización del flujo de trabajo en el próximo lanzamiento.

    2. Proceso de instalación simplificado para la versión Sass

    Una de las cosas más asombrosas sobre el marco de Foundation es que está construido con el lenguaje de hojas de estilo Sass, por lo que es posible personalice rápidamente las reglas de estilo predeterminadas a nuestras necesidades reales.

    Sin embargo, el proceso de configuración de Sass ha sido un poco intimidante para muchos usuarios, por lo que la nueva versión principal Obtener un proceso de configuración simplificado para la versión Sass.. Esto significa que la configuración de Sass requieren mucho menos dependencias que antes. Por supuesto, si prefiere la versión de vainilla CSS, todavía puede optar por eso.

    3. Una nueva pila de instalación para los maximalistas

    Además de la versión regular de Sass, Foundation 6 vendrá con una sopa Versión de Sass que proporcionará a los desarrolladores poderosas opciones de personalización..

    ZURB, el creador de Foundation abrirá su propia pila de desarrollo para el público, incluido el suyo propio. generador de sitio estático, servidor de recarga en vivo y Cargas de técnicas de optimización interna. incluida la integración de UnCSS para eliminar estilos no utilizados y UglifyJS para la compresión de JavaScript.

    Básicamente, podremos trabajar en el mismo entorno de desarrollo que ZURB utiliza internamente..

    4. Disminución del tiempo de carga de la página

    El equipo de la Fundación tuvo que enfrentar algunas críticas constructivas que afirmaban que en la mayoría de los proyectos de la Fundación, aproximadamente el 90% del código CSS no se utiliza. Esto no solo fue cierto para Foundation, sino también para otros marcos de trabajo de CSS importantes como Bootstrap y TopCoat. Como parte de su respuesta, Zurb decidió reducir significativamente el tamaño del archivo del CSS generado al implementar una reducción de código de aproximadamente 40-50%..

    IMAGEN: Freepik.com

    Es interesante notar que intentan diferenciarse de Bootstrap diciendo "La fundación no es un marco que tendrá clases de estilo margen y relleno o redondeo y radio"(Para referencia, vea las nuevas Clases de Utilidad de Bootstrap 4 en nuestra publicación anterior).

    5. Estilos de base actuando como wireframes

    La otra parte del esfuerzo de mejora del rendimiento es cree un estilo base que actúe como un alámbrico en lugar de un diseño final. Esto conduce principalmente a un tema más claro, pero también tiene otra gran ventaja. A medida que más reglas de estilo se muevan a componentes individuales, los desarrolladores tendrán la oportunidad de más fácilmente el estilo de su diseño.

    IMAGEN: Freepik.com

    Esperemos que esto signifique que los sitios basados ​​en la Fundación tienen menos de un aspecto similar, estandarizado, Y los diseñadores tendrán más espacio para exp.Edificio con solut hermosa y única.iones que refutarán las preocupaciones recientes sobre una red de apariencia aburrida.

    6. Importación selectiva facilitada

    Foundation 5 permite a los desarrolladores elegir solo los componentes que desean usar. Fundación 6 llevará este esfuerzo al siguiente nivel por mover la función de importación selectiva en el archivo Sass _settings.scss.

    IMAGEN: Zurb.com

    De esta manera _settings.scss será un archivo de configuración verdaderamente universal, ya que no solo podremos personalizar funciones como el ancho de fila o las fuentes predeterminadas con su ayuda, sino también fácilmente optar por los componentes que no necesitamos. Si lo hacemos, podemos lograr una mejora adicional en el rendimiento..

    7. Sass más magro y más limpio

    En el proceso de rediseño, el equipo de la Fundación repensó todos los aspectos del marco, por lo que también cambió la forma en que han usado el lenguaje de hojas de estilo Sass. Descubrieron que en algunos casos han usado en exceso Sass, lo que condujo a la Exageración innecesaria de la salida CSS.. Con el objetivo de una base de código más ágil y limpia en su mente, también han racionalizado su estructura Sass.

    IMAGEN: Zurb.com

    En Fundación 6 podemos espere menos anidaciones y especificidad, consultas de medios optimizadas (fusionaron código repetitivo), y mixins de componentes a escala reducida. Esto último significa que habrá menos componentes mixtos, y los restantes tendrán menos parámetros, lo que dará lugar a un código más simple y más lógico.

    Si te encantan los mixins, no te preocupes, todos los componentes los tendrán, es solo que serán rediseñados para ser más eficientes y útiles de lo que son actualmente..

    8. Mixins Grid mejorados

    Mientras se recortan las mezclas de componentes, Foundation 6 vendrá con mixins mejorados eso nos permitirá crear una cuadrícula más personalizada.

    IMAGEN: Foundation.zurb.com

    Zurb promete que seremos capaces de Construir fácilmente como sistema de rejilla complicado como queramos, incluyendo filas personalizadas más sofisticadas y cuadrículas anidadas, y la capacidad de convertir las clases predeterminadas a marcado semántico. Los mixins mejorados de grilla harán que la actual. Creación de grillas aún más intuitiva, flexible y rápida..

    9. Integración perfecta de complementos de JavaScript personalizados

    Foundation 5 actualmente tiene muchos componentes de JavaScript, como diálogos modales geniales, información sobre herramientas, barra de navegación adhesiva, lightboxes y muchos otros que necesita un sitio web moderno, pero la próxima versión importante nos permitirá escribe nuestros complementos de JavaScript personalizados Aprovechando el núcleo de la Fundación. Es un gran paso adelante en ambos. facilidad de uso y rendimiento.

    IMAGEN: Foundation.zurb.com

    En el futuro, seremos capaces de acceder a los métodos de inicialización incorporados, desencadenar y puntos de interrupción, y hacer uso de todas las otras características de JavaScript global de la Fundación.

    10. Accesibilidad completa

    Probablemente la característica más sorprendente de la nueva Foundation 6 es que será completamente accesible. Cada componente y fragmento de código vendrá con los atributos WAI-ARIA y los roles de hito apropiados. Además los desarrolladores serán incluso provisto de una guía de usuario acerca de Cómo utilizar los estándares web a11y.

    IMAGEN: Departamento de Trabajo de los Estados Unidos

    Por lo tanto, si queremos proporcionar a nuestro cliente un sitio web totalmente accesible, no tenemos que hacer nada más que crear nuestro diseño con Foundation 6. Tenga en cuenta que todavía debemos hacerlo. agregue las reglas ARIA apropiadas a nuestras páginas HTML por nuestra cuenta, Aunque la próxima guía de usuario de Zurb A11Y seguramente facilitará el proceso de aprendizaje..