Share
¡El Yeti está de vuelta! Foundation 6 se lanzó hoy, y todos estamos entusiasmados con la nueva ética de diseño, las características y las poderosas herramientas que nos brinda esta encarnación del popular marco de ZURB. Incluso hay un extra especial de "algo" con esta versión, así que sumérgete en este artículo para obtener el resumen completo.
Foundation 6 no es solo una iteración visual, una reestructuración de código o un simple cambio en el número de versión. El equipo de ZURB se sentó para que éste completamente repensar el marco y ver lo que tenía que suceder para hacerlo más impresionante. La Fundación 6 trata sobre todo el proceso; Del prototipo a la producción..
Pasar del prototipo a la producción es ahora una brisa!Algunos de los principales objetivos del equipo de desarrollo fueron:
"Para Foundation 6, hemos reducido a la mitad el tamaño del archivo CSS completo, optimizando agresivamente nuestro uso de Sass y simplificando la estructura y el estilo de los componentes".
- Geoff Kimball Diseñador de productos, ZURB
Entonces, ¿cómo afectaron estos objetivos a nuestro marco favorito para crear sitios web increíbles? ¡Vamos a averiguar! Primero repasaremos algunas de las características principales de Foundation 6 y luego nos sumergiremos en CSS / Sass y JavaScript con más detalle..
El proceso de configuración de la versión Sass de Foundation 6 se ha mejorado, para que pueda hacer que sus proyectos despeguen más rápido. Hay muchas menos dependencias y los errores se manejan de manera mucho más inteligente, por lo que tendrá menos problemas para resolver el error en cuestión..
Otra ventaja adicional es que ZURB ofrece una pila completa con su propio generador de sitio estático, servidor de recarga en vivo y muchas maneras de optimizar mejor su código con UNCSS y UglifyJS. Es la misma pila que los chicos de ZURB usan para sus propios proyectos (más sobre esto más adelante).
"Foundation for Sites 6 the Movie" a partir de 2018. Posiblemente.Ha habido mucha preocupación acerca de que el código utilizado por los marcos (como Bootstrap y Foundation) no se utilice en un proyecto. Incluso hasta el 90% del código CSS no se usa, lo que es realmente innecesario y un problema para el rendimiento. Con esto en mente, Foundation 6 tiene una enorme reducción de código del 50% para comenzar con!
El Yeti funcionó y dio sus frutos.!ZURB abordó este problema dos veces con Foundation 6, aplicando menos estilos desde el principio y brindándole las herramientas para eliminar los archivos también. Ahora puede agregar más fácilmente sus propios estilos para la versión de producción de su proyecto. Los estilos de la Fundación 6. hace La oferta puede actualizarse fácilmente con variables a través de Sass..
Además, muchas de las clases de presentación se han eliminado para que el CSS generado se mantenga limpio. Esta versión de Foundation no tiene clases de estilo como márgenes, rellenos y redondos y radiales. A través de lo familiar. _settings.scss El archivo ahora se ha hecho aún más fácil para importar selectivamente sus módulos. Al comentar de forma selectiva los componentes que no usa, eliminará fácilmente una gran cantidad de código CSS no utilizado.
Entonces, con un archivo más ligero desde el principio, menos clases de estilo y más control sobre qué incluir y qué no, ahora está listo para mover su prototipo a un código ligero y listo para la producción.
La documentación actualizada que viene con Foundation 6, junto con un formulario de búsqueda potenciada por AJAX, le facilita encontrar rápidamente algo:
El formulario de búsqueda le da sugerencias a medida que escribe.Simplemente escriba el componente o tema que está buscando y el formulario de búsqueda le mostrará los temas relevantes. Es un pequeño extra que hace que sumergirse en la documentación sea una experiencia agradable..
El Top Bar en sí ha visto una gran actualización también. En versiones anteriores era genial en lo que era para eso, pero era un poco inflexible. ¡Ya no! Fundación 6 introduce componentes para que la Barra superior lo haga más flexible y fácil para agregar y eliminar ciertos elementos para diferentes dispositivos, tales como:
En Foundation 6, ZURB ha creado una cuadrícula de mezcla más flexible que le permite controlar el recuento de columnas en una fila. Podrías hacer algo como esto:
.container // definiremos esta clase para usar 16 columnas @include grid-row (16) .sidebar // 5/16 = 31.25% @include grid-column (5); .main-content // 11/16 = 68.75% @include grid-column (11);
O algo como esto:
.sidebar // esto hará que .sidebar ocupe 2 columnas de una cuadrícula de 5 columnas @include grid-column (2 de 5); .main-content // esto hará que .main-content ocupe 3 columnas de una cuadrícula de 5 columnas @include: grid-column (3 de 5);
Haga su propio recuento de columnas para un elemento específico, o haga una fila de cinco columnas sin cambiar el recuento de columnas para todo el proyecto. Esta nueva función le dará un control más granular sobre la cuadrícula para que pueda hacer que su diseño se ajuste mejor a su contenido.
Foundation 6 ha recuperado el control deslizante Orbit, pero esta vez con un enfoque diferente: está diseñado para ser una herramienta de armado de alambre. Esta versión comprende solo un poco de HTML y un poco de JavaScript. El código para personalizarlo se realizará dentro del marcado de la página y es mucho más fácil de llevar a cabo..
Me alegra tenerte de vuelta viejo amigo!Cuando busque un control deslizante en su fase de producción, el equipo de ZURB recomienda utilizar un control deslizante como el control deslizante Owl, por ejemplo. Como se mencionó, el control deslizante Orbit está pensado como una herramienta de estructura alámbrica..
Al trabajar con sus propios clientes, ZURB ha creado una plantilla personalizada para entregar proyectos. Incluyendo Handlebars y construido en Libsass, esta es la pila mejorada que mencionamos anteriormente. Está aquí para que lo use y optimice su propio flujo de trabajo, y se conoce con el nombre de Panini:
Un anteproyecto, listo para usar en su próximo proyecto. Este sistema de construcción impulsado por Gulp hace mucho:
La plantilla también puede crear código listo para producción, agregando estos pasos adicionales:
Las plantillas y ayudantes de manillares hacen que la escritura de códigos dinámicos para páginas estáticas sea muy fácil!
Lo nuevo en Foundation 6 es una Grilla alimentada por Flexbox, que puede usar en lugar de la rejilla flotante tradicional. Funciona de manera similar a la cuadrícula flotante estándar, pero incluye una serie de funciones útiles que solo son posibles con Flexbox, como la alineación horizontal y vertical, el dimensionamiento automático y un orden de fuente más fácil. Conocemos Flexbox Grid de Foundation for Apps y es increíble ver que ahora también podemos usarlo en Foundation for Sites!
Motion UI es una biblioteca de animación que se creó y utilizó originalmente en Foundation for Apps. Ahora, felizmente, puede usarlo para crear transiciones CSS y animaciones personalizadas en Foundation for Sites también!
Agregue todos los diferentes tipos de transiciones y animaciones a los proyectos de su Fundación!Esta versión actualizada incluye opciones de transición más robustas, un sistema de cola de animación y patrones de CSS flexibles que pueden funcionar con cualquier biblioteca de animación de Javascript.
Ajustar las diferentes transiciones y animaciones es una cuestión de manipular los mixins de Sass que vienen con esta versión de Motion UI. La interfaz de usuario de movimiento también incluye una gran cantidad de clases de CSS prefabricadas para que sus prototipos se actualicen rápidamente.
La biblioteca se diseñó para su uso con los marcos de trabajo de Foundation, pero se puede adaptar para trabajar con cualquier biblioteca de animación de marcos, como Angular o React..
Como se mencionó, el gran objetivo de Foundation 6 era que fuera más fácil de usar y sobreescribir el marco con su propio código listo para producción. Echemos un vistazo a algunas de las características geniales que Foundation 6 nos ofrece con respecto a CSS y Sass..
Crea tus propias guías de estilo más fácilmente en la nueva Fundación.En Foundation 5, podría cambiar los puntos de interrupción, pero no era del todo obvio dónde encontrarlos y cómo hacerlo. Ya no. Foundation 6 le ofrece una visión general (un mapa de puntos de interrupción) en la que puede ajustar, agregar y eliminar puntos de interrupción del proyecto fácilmente..
Propina: intenta mantener los puntos de interrupción predeterminados tanto como sea posible; el tamaño del archivo aumenta con puntos de interrupción adicionales.
Ejemplo del mapa de puntos de interrupción con la nueva función de mapas SassCon Foundation 5 tuvo que realizar una interpolación de cadenas para usar consultas de medios en sus archivos Sass. Debido a que esto no estaba realmente claro todo el tiempo, y la gente a menudo tenía que visitar la documentación para copiar y pegar el código correcto, el equipo de ZURB pensó que esto podría hacerse más fácilmente. Así que ahora, en lugar de la interpolación de cadenas, puede utilizar diferentes @incluye para incluir diferentes puntos de ruptura. Utilizando medio por ejemplo, es para puntos de interrupción medianos y superiores., solo medio para, bueno, solo mediano, y medio abajo para medios, pequeños, etc. Incluso puede incluir su propio píxel, em de puntos de interrupción rem y usar retina, paisaje y retrato.
"Queríamos aprender cómo la gente realmente usaba Foundation, así que viajamos por todo el mundo y recibimos cientos de llamadas para ver cómo la comunidad usaba el Marco y discutimos lo que necesitaban de él. ¡Fue increíble!"
- Director de la Fundación Brandon Arnold, ZURB
El JavaScript ha tenido una gran revisión también. Una forma de reducir la cantidad de código en los complementos de JavaScript de Foundation 6 fue separarlos en utilidades más pequeñas que manejan eventos en complementos más grandes. ¡Y al hacer que estas utilidades sean de acceso público, ahora puede usarlas para crear sus propios complementos! Entonces, ¿qué complementos podemos encontrar en Foundation 6? Vamos a averiguar:
Plug and play con los nuevos complementos de ayuda de Foundations.Foundation 6 incluye una nueva API de alternador para que las personas puedan hacer que sus sitios sean más dinámicos y rápidos de forma rápida y sencilla. Toggler hace que alternar elementos y agregar clases sea muy fácil. Es genial para construir rápido y no requiere conocimientos de JavaScript..
Alternar clases con un atributo de datos. Por ejemplo:
Expandir!
Esta es una función pública para determinar colisiones con el borde de un contenedor. Esta detección de bordes mantendrá información sobre herramientas, menús desplegables y más en la ventana gráfica o el contenedor de su elección.
Un generador de números aleatorios. Puede usar esto para agregar atributos "aria" A11Y que requieren ID, por ejemplo.
Esta es una función para agregar un detector de eventos a ventana si se aplica, se dispara un evento que no genera burbujas a elementos individuales del complemento con el [data-yeti-box = 'idOfElement'] cerrar. Si se abre otro elemento del mismo tipo de complemento, es decir, si la información sobre herramientas B se abre y si la información sobre herramientas A está abierta, cierre la información sobre herramientas A antes de abrir B.
Aquí se nos da una función pública para agregar una onscroll oyente del evento ventana. El marcado es el siguiente: [data-scroll = 'idOfElement']
Una función para agregar un redimensionar oyente del evento ventana.
yo hice esto!Casi todo el JavaScript se ha creado con utilidades separadas que manejan funciones comunes como los ejemplos anteriores. Esto permite que los complementos sean más pequeños, y con ellos ahora puede crear fácilmente sus propios complementos.!
Como un poco más, ¡ZURB también ha lanzado una nueva aplicación Desktop Companion! Con él puede girar proyectos con un solo clic del ratón. Ponte en marcha más rápido que nunca con: Yeti Launch. Bonito!
Gira proyectos con un solo clic del ratón!Foundation for Sites 6 ha visto una revisión realmente grande, que refleja la forma en que ZURB construye sus propios sitios web accesibles. Compartir su conocimiento y experiencia hace que sea más fácil para otros desarrolladores y diseñadores hacer prototipos y comenzar a producir rápidamente..
El yeti más rápido hasta ahoraEn resumen, ¿qué conseguimos con la Fundación 6??
Más de 125 temas en Envato Market son compatibles con Foundation 5. ¿Serás el primero en vender algo creado en Foundation 6??!
Accentsconagua