Fundación es uno de los dos grandes frameworks HTML / CSS / JS para desarrolladores front-end. Eso no sucedió por accidente. Hoy, estamos aquí para contarle todo sobre por qué debería usarlo.

Ahora primero, para aquellos que quizás escriben su propio HTML, pero nunca han trabajado con un framework antes, aquí hay una explicación:

Los marcos son básicamente grandes grupos de código preescrito para ayudarlo a comenzar sus proyectos más rápido. En el caso del código de front-end, como HTML y CSS, esto significa que encontrará elementos como las cuadrículas de diseño, los estilos básicos de los botones y los elementos de interfaz comúnmente utilizados. Los marcos más grandes también pueden incluir complementos jQuery.

No están destinados a ser utilizados como plantillas o temas completos del sitio web, sino como un conjunto de elementos básicos. Tomas lo que necesitas, lo modificas para adaptarlo al proyecto y, en general, sigues con tu trabajo (y tu vida, presumiblemente). Están diseñados para personalizarse y manipularse.

Esto puede ser inicialmente una tarea desalentadora, como marcos como Foundation y su principal rival, Oreja, se ha vuelto enorme Cada uno contiene miles de líneas de CSS. Antes de comprometerse a utilizar cualquier marco para cualquier proyecto, debe evaluar sus beneficios potenciales frente al costo del tiempo.

Dicho esto, una vez que te acostumbras a un framework, puede reducir considerablemente el tiempo que pasas escribiendo markup y CSS.

Algo de historia

La Fundación comenzó su vida como nada más que una guía de estilo general y un código común. Los chicos de ZURB decidieron acelerar su proceso de creación de prototipos tomando algunos HTML y estilos que tendían a reutilizar, y crearon un marco de trabajo. Eso es. Así es como se hacen la mayoría de las cosas buenas. Alguien lo necesitaba, entonces lo lograron.

Con el tiempo, decidieron que lo que habían hecho era demasiado bueno para guardarlo solo, por lo que lanzaron la versión 2.0.0 al mundo. Hicieron que todo fuera receptivo, lo pulieron y lo abrieron para todos nosotros. Ahora los diseñadores y desarrolladores de todo el mundo están usando el código de ZURB para hacer que sus productos sean más rápidos y, quizás, me atreveré a decir que es mejor.

Desde su lanzamiento el 18 de octubre de 2011, el Licencia MIT el marco se ha convertido en uno de los "dos grandes" y se ha visto su uso en miles de sitios web.

Su popularidad habla de su utilidad y versatilidad por igual. Si decides que la Fundación es adecuada para ti, no te defraudará.

Caracteristicas

La Fundación ha estado en desarrollo activo durante casi tres años. No es sorprendente, entonces, que la lista de características sea extensa.

En esencia, el marco está compuesto por archivos CSS (generados a partir de archivos SASS, también disponibles para descargar) y varios complementos jQuery. No se incluye HTML en la descarga principal (excepto en una página de demostración muy básica, puedes escribirla solo.

Dicho esto, hay documentación detallada sobre cada componente. Cada sección de la documentación incluye HTML de ejemplo para que pueda usar y personalizar según sea necesario. Si quieres sumergirte directamente, echa un vistazo a documentación.

Si desea personalizar el marco desde cero, hay dos cosas que puede hacer:

Opción 1

Puede optar por descargar solo los componentes que desee directamente en el página principal de descarga. Si todo lo que quiere es la cuadrícula, el CSS de navegación y un plugin jQuery o dos, eso es bastante fácil. Simplemente desmarca todas las cosas que no quieres incluir, ¡y listo!

Este "generador de marco" también incluye opciones para personalizar la grilla, sus colores principales y algunas otras opciones. Esta es la opción que elegiría, por ejemplo, crear prototipos o desarrollar una aplicación interna de la empresa. Los estilos de presentación predeterminados son en su mayoría lo suficientemente buenos para estas cosas, así que ¿por qué ir y cambiarlos cuando no es necesario?

opcion 2

Ahora esto es para las personas que usarán el marco para proyectos públicos. No querrá utilizar los estilos de presentación predeterminados, ya que, con toda probabilidad, no coincidirán con su marca. Para una personalización en profundidad, debe dirigirse a la fuente.

Y por la fuente, me refiero a los archivos Sass. Con ellos, puede entrar y personalizar cada variable a su gusto, haciendo que el marco sea verdaderamente suyo.

( Una nota sobre los archivos de Sass: una vez más, para quienes no estén familiarizados con el término, Hablar con descaro a es un preprocesador de CSS, que introduce cosas como variables, mixins y otras características de programación en CSS regulares.

Haga una búsqueda en Google de algo como "compilador Sass para [su sistema operativo aquí]", y encontrará lo que necesita. Personalmente, no puedo recomendar la plataforma cruzada Aplicación Koala suficiente.)

Una vez que sus archivos Sass se compilan en un archivo CSS normal, solo tiene que enlazarlo en su sección como lo haría con cualquier otro archivo CSS. La aplicación Koala, por ejemplo, compilará los archivos Sass automáticamente cada vez que los guarde, por lo que su navegador siempre verá los últimos cambios.

Estructura

La cuadrícula

No puedo decir con certeza que todos los marcos HTML vienen con un sistema de cuadrícula para el diseño, pero la mayoría sí. La grilla de la Fundación, sin ninguna personalización, es un clásico de doce columnas, encajable y receptivo.

El marcado y las clases son simples, incluidas las clases para personalizar el diseño por tamaño de pantalla. Si ya has trabajado con sistemas de grillas, como el 960 Grid System, no encontrarás que la grilla de Foundation sea difícil de dominar.

Nota: Está codificado para un enfoque móvil primero, por lo que querrá tener esto en cuenta a medida que diseña su sitio.

La cuadrícula de bloque

Piense en esto como una "mini cuadrícula". Está diseñado para mantener un número determinado de elementos de tamaño uniforme y espaciados sin importar el tamaño de la pantalla.

Ejemplo: tiene tres elementos de tamaño idéntico que desea mantener uno al lado del otro en todos los dispositivos. Para hacer eso, usarías este ejemplo de cuadrícula de bloques que robé desvergonzadamente desde la documentación:

Tenga en cuenta que si lo desea, puede especificar un número diferente de columnas para diferentes tamaños de pantalla. Los elementos conservarán su tamaño igual. Este componente es perfecto para cosas como galerías de fotos.

Receptivo

Las consultas de los medios se mantienen simples, pero están diseñadas para acomodar varios tamaños de pantalla, que van desde teléfonos inteligentes hasta pantallas de iMac ridículamente grandes.

Al ser diseñado desde cero para ser móvil, primero es un gran comienzo. La Fundación va un paso más allá al incluir componentes específicos que lo ayudarán a perfeccionar las partes receptivas de sus sitios.

En primer lugar, están las clases habituales para ocultar o mostrar diferentes elementos en diferentes tamaños de ventanas. Luego, obtienes cosas un poco más avanzadas, como Intercambio.

Interchange es una biblioteca JS que cargará dinámicamente diferentes contenidos dependiendo de las consultas de los medios. Puede usar esta biblioteca para decidir si desea cargar, por ejemplo, una imagen .JPG de un mapa o una incrustación de Google Maps. O una imagen normal en lugar de una imagen del tamaño de una pantalla de retina.

Usando esta biblioteca, puede guardar algunos datos y algo de RAM para sus usuarios. Solo asegúrese de implementar un repliegue para aquellos usuarios con JavaScript deshabilitado.

Navegación

Las opciones de navegación son abundantes, desde la barra de navegación de uso múltiple (completa con menús desplegables) hasta las barras de iconos, la navegación de navegación, la paginación, las barras laterales y más.

Sin embargo, hay dos componentes de navegación que hacen que Foundation se destaque de otros marcos.

Magallanes

El primero es el Magellan Sticky Nav. Coloque esta barra de navegación en cualquier lugar que desee en la página, y una vez que se desplace más allá de su ubicación de inicio, le seguirá hacia abajo. Si lo está usando para vincular a la sección dentro de la página actual, puede resaltar cada uno (en la barra) a medida que se desplaza hacia abajo.

Offcanvas

El segundo es Offcanvas, que es una barra de navegación vertical que está oculta por defecto. Pulse el botón de menú, y el menú se desliza en la página para su placer de navegación.

Tenga en cuenta que, al igual que todos los componentes de Foundation, estos pueden implementarse con una cantidad mínima de marcado. Los chicos de ZURB han dedicado mucho esfuerzo para hacer que estos elementos de interfaz de usuario bastante avanzados sean fáciles de implementar, y eso se nota.

Medios de comunicación

Los componentes relacionados con los medios de cualquier marco son a menudo donde los creadores de marcos tienden a presumir un poco, y Foundation no es la excepción.

Por ejemplo, incluido por defecto es el Despejando Lightbox. Es una galería de imágenes lightbox muy simple, realmente. Solo agregue algunas miniaturas, incluya las clases relevantes, y tendrá una galería de imágenes con capacidad táctil que maneja imágenes de altura variable sin problemas de ningún tipo.

Otro es Flex Video, que, en teoría, se puede usar para casi cualquier objeto incrustable. Simplemente ajuste un div con la clase de video flexible alrededor de su video de Youtube, iframe, embed u object element, y estará listo para comenzar. Esos objetos no se escalarán automáticamente con el tamaño del navegador.

Por último, hay estilos incluidos para las miniaturas de imágenes. Nada especial o especial para ver aquí ... son simplemente agradables de tener.

Pero ¿qué pasa con Orbit?

Las personas que han usado Foundation antes de la versión 5 podrían estar preguntándose sobre el plugin Orbit de ZURB. Es un carrusel, también llamado a veces presentación de diapositivas, un componente que responde, tiene características cargadas y funciona bastante bien.

Sin embargo, mientras todavía está en el marco, ya no es compatible con ZURB, ni está en desarrollo activo.

Los propios creadores de Foundation recomiendan buscar alternativas, como Owl Carousel, o Mancha.

Formularios

Por supuesto, los estilos básicos para las formas no han sido olvidados. De hecho, han sido refinados a lo largo de los años en obras de belleza supremamente subestimadas. Podrías pensar que estoy exagerando, pero no creo que lo esté. Años de experiencia se han convertido en estilos de formularios básicos que creo podrían aplicarse a casi cualquier proyecto, con un mínimo de ajustes.

Se necesita habilidad para hacer algo tan aburrido como las formas se vean genéricas y bonitas a la vez. No es de extrañar que muchos de los marcos que he probado hayan imitado el estilo de Foundation.

Dicho esto, no son todos los aburridos campos de texto y botones de opción. Sabes que tuvieron que hacer algunas cosas propias.

Tome el componente del control deslizante, por ejemplo: puede implementar controles deslizantes de rango con HTML5, pero son aburridos y usa la apariencia predeterminada del sistema operativo que esté utilizando. Foundation, por otro lado, incluye controles deslizantes que se pueden diseñar con CSS para su placer de personalización.

También se incluye una biblioteca de validación de formularios (más JavaScript aquí ...) que le permite asegurarse de que sus usuarios ingresen los datos correctos. Cuando ingresan algo incorrecto, por ejemplo, una dirección de correo electrónico no válida, se mostrará una notificación y se lo dirá.

Botones

No se puede tener un marco sin algunos estilos de botón predeterminados. Quiero decir que puedes, pero simplemente no estaría bien, de alguna manera. Los botones de Fundación predeterminados no difieren demasiado de cualquier otro marco. Es decir, se implementan con un marcado mínimo, y tienen diferentes tamaños y clases específicas de color.

Sin embargo, puedes agruparlos en grupos de botones para ordenar de una manera conjunta las acciones relacionadas. Estos grupos de botones (los horizontales, de todos modos) están diseñados para funcionar perfectamente con la red. También tienen clases adicionales para tamaño, color y esquinas redondeadas ... todas las cosas habituales.

Cambie el marcado un poco más, y Foundation también puede darle botones desplegables , y esos botones divididos . Ya sabes, en su mayoría botón, menú desplegable de la parte?

Esos dos últimos componentes hacen uso del plugin desplegable integrado de Foundation. Esto significa, entre otras cosas, que dependen de JavaScript. Aun así, son simples de implementar. Se trata de las clases.

Tipografía

Foundation utiliza una configuración tipográfica muy simple, sin serifa, para que comiences. Es simple, fácil de personalizar con algunas variables básicas de Sass, y es de tamaño relativamente grande. Así es, Foundation usa rem .

Dado que los creadores de Foundation creen en la usabilidad, todo es lo suficientemente grande como para ser leído fácilmente en pantallas pequeñas. Leer a una distancia moderada en las pantallas normales de computadoras portátiles / de escritorio tampoco me da ningún problema.

Las características tipográficas adicionales incluyen:

Listas en línea

¿Quieres una lista horizontal basada en texto? Ya sabes, del tipo que podría poner en un pie de página del sitio web? Estás cubierto. Según los creadores, debes:

Ellos tienen razón   apesta por el control espacial.

Etiquetas

Estos son esencialmente pequeños trozos de texto con fondos de colores. ¿Para qué los usarías? Etiquetas y otros metadatos, o como su nombre lo indica, puede usarlos para etiquetar cosas, es decir. campos de formulario.

Se incluyen etiquetas regulares, etiquetas de alerta, etiquetas de advertencia. Es solo otra de esas cosas pequeñas y útiles que amo sobre Foundation.

Ver también: Keystrokes

Llamadas y avisos

Algunas veces en un sitio web, y con mucha frecuencia en una aplicación, necesita formas de captar la atención de un usuario. Hace esto para presentarles la información necesaria, atraer la atención a un campo de formulario incompleto o acción, o para enseñarles cómo usar una aplicación.

Si eres malo, puedes hacerlo para reproducir anuncios ... con sonido.

Podrías hacerlo con una ventana modal. Foundation tiene grandes ventanas modales con amplias opciones de comportamiento, opciones de tamaño, enlaces de eventos ... incluso una opción para eliminar el fondo.

Luego, están las alertas. Estas cajas de alerta grandes y coloridas están posicionadas estáticamente y se extienden al ancho de su contenedor. Sin embargo, siempre podría establecer una posición fija para las alertas de todo el sitio. ¿Ya he mencionado el color, las esquinas redondeadas y otras clases de presentación? Voy a parar, porque lo hacen por muchas cosas.

Luego tenemos información sobre herramientas. Estos se pueden aplicar a casi cualquier elemento y configurarse para que solo se muestren en pantallas grandes o en todas las pantallas. (En los dispositivos móviles, debe tocar el elemento en cuestión para ver la información sobre herramientas.) También se pueden colocar en cualquier lado del elemento.

Excursión en coche lleva la información sobre herramientas al siguiente nivel. Es un complemento que aprovecha tooltips (y otras cosas) para dar a los usuarios un recorrido por su sitio web o aplicación. Ideal para usuarios principiantes, si la interfaz es necesariamente compleja.

Contenido

Los marcos básicos de HTML / CSS le darán la posibilidad de organizar su contenido en una página y darle un toque de estilo. Este es uno de los grandes marcos, sin embargo, lo que significa componentes adicionales, incluso para el contenido.

Primero, tenemos tablas de precios: los chicos de ZURB conocen bastante bien a su audiencia. Mucha gente quiere formas fáciles de mostrar información de precios para sus diversos productos y servicios. Foundation se lo da en un formato bastante estándar.

Luego, el barras de progreso . No voy a dar más detalles sobre esto. Son exactamente lo que esperarías.

Foundation también incluye el complemento de acordeón básico y el plugin de contenido con pestañas esperado. Creo que es interesante observar que puedes poner contenido con pestañas dentro de una sección de acordeón.

Por último, esto es algo que he visto en algunos otros marcos, y me parece increíblemente interesante: un componente de altura de columna igual. Lo llaman el Igualada , un nombre solo la mitad de rudo que su función. Requiere JavaScript, por supuesto, pero es una forma muy simple de hacer que todas las columnas de una sección determinada conserven la misma altura de manera receptiva.

Solo agregue un par de atributos de datos, y listo. Esto es lo que parece cuando se combina con el componente de la tabla de precios:

Cómo empezar

¡Así que ahora ha revisado la extensa lista de características y las quiere! ¿Derecha? Bueno, si estoy en lo cierto, entonces así es como empiezas.

Vamos a crear una plantilla simple, sencilla y básica en Foundation for practice. Puedes seguirlo en tu propio editor de texto, copiar y pegar el código, o simplemente descargar la plantilla que he puesto a tu disposición porque eres un tramposo.

Después de esta sección, voy a enumerar una serie de otros excelentes tutoriales y recursos de capacitación para ayudarlo en su camino hacia convertirse en un maestro de la Fundación.

Ve a descargar el paquete predeterminado en el página de descarga y empecemos.

Incluye los archivos base en tu proyecto

Ahora, cuando descargue el paquete, la estructura del archivo tendrá un aspecto similar a este:

project-folderindex.html (Demo file.)humans.txt (Like a readme file.)robots.txt (Just leave this alone.)/cssfoundation.cssfoundation.min.css *normalize.css */img (Note: Empty)/jsfoundation.min.js */foundationfoundation.abide.jsfoundation.accordion.jsfoundation.alert.js(Etc. Huge list here.You can keep these files to see/playwith the source, but you don't actuallyneed them to use the framework.)/vendorfastclick.jsjquery.cookie.jsjquery.js *modernizr.jsplaceholder.js

Notarás que coloqué un asterisco después de algunos de estos archivos. Estos son los únicos archivos que realmente necesita para que el marco haga su trabajo. El resto son archivos fuente, o bonitas utilidades adicionales. Esas herramientas sin duda pueden ayudarlo a hacer cosas increíbles, pero no son estrictamente necesarias.

Por ejemplo, placeholder.js implementa el atributo marcador de posición de los formularios HTML5 para navegadores que no lo admiten.

Los archivos que marqué son los únicos a los que es absolutamente necesario vincular en la sección de su página web / aplicación. Para los fines de este tutorial, voy a eliminar la mayoría de estos archivos y guardar solo aquellos que son esenciales. También comenzaré desde cero con un índice.html en blanco.

Para empezar, nuestra "página de inicio" se verá más o menos así:

< !DOCTYPE html>

Puede haber notado un archivo CSS adicional allí. Lo necesitaremos para estilos personalizados.

Crea un diseño simple

Entonces, como esta es una página de inicio, llevemos el concepto más allá. Lo convertiremos en una página de aterrizaje excepcionalmente genérica para un negocio u otro. ¡Sin diseño de dos columnas para este tutorial! Esos están tan de moda.

Tenga en cuenta que estoy omitiendo incluir algo como una barra de navegación o un llamado a la acción en este ejemplo. Estas son cosas totalmente que deberías hacer en proyectos reales.

El encabezado

De acuerdo con las leyes actuales de tendencias de diseño, debemos hacer un gran encabezado con el nombre de nuestra empresa, un lema y una imagen de fondo masiva (no incluida en este tutorial).

El HTML para esto es bastante simple:

Our Company Name
Insert a pithy slogan here

La clase de fila no solo define los límites exteriores de nuestra grilla, sino que la centra para nosotros. El elemento de encabezado está ahí tanto por razones semánticas como para proporcionar un lugar para agregar una imagen de fondo más adelante.

Queremos que nuestra columna de la cuadrícula de encabezado se extienda al cien por ciento sin importar el tamaño de la pantalla, por lo que solo necesitamos usar la clase de 12 pequeños . Las pantallas de tamaño mediano y grande heredarán estos estilos a menos que se especifiquen otros.

Tenemos nuestro encabezado y nuestro texto centrado. Esto, sin embargo, no nos da el encabezado alto que queremos. Para esto, necesitaremos algunos estilos personalizados:

/*  HEADER STYLES  */header#page-header {height: 500px;background: #cecece;}header#page-header > div.row {position: relative;top: 50%;transform: translateY(-50%);}

Como puede ver, le hemos dado a nuestro encabezado un color de fondo en lugar de una imagen real, y centrado verticalmente nuestro contenido de encabezado. Bastante limpio, ¿eh? Así es como se ve nuestra página hasta ahora:

La introducción y los servicios

Entonces te has anunciado audazmente con tu encabezado. Es hora de decirle a tu usuario quién eres y qué haces. Una pequeña descripción de cada servicio o producto ... así es como lo hacemos en esta era moderna.

Empecemos.

Who We Are
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam. Facer noster usu no, duo sumo maiorum eu. Sea id semper maluisset iracundia.
What We Do
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet. ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.

De acuerdo, como pueden ver, todo lo que hice fue agregar algunas filas y columnas con contenido. Apliqué las clases apropiadas para hacer que las columnas se escalen al dispositivo en el que se están viendo.

En la sección #introducción , no hice solo la columna central de ancho completo. En cambio, para asegurarme de que el párrafo de introducción era legible, lo hice más pequeño y le di las clases de desplazamiento apropiadas para cada tamaño de pantalla.

El espaciado vertical de las secciones de contenido es algo que tienes que hacer por ti mismo en cada marco, así que de nuevo, necesitaba un CSS personalizado:

section#page-content, section#page-content > #services {padding-top: 3em;}section#page-content {padding-bottom: 3em;}

Nada especial allí. Dado que casi todo, incluida la cuadrícula, está espaciada con ems, los usé para el relleno para mantener las cosas visualmente consistentes. Piense en el espaciado de elementos basado en em como una cuadrícula base integrada que puede aprovechar fácilmente.

Así es como se ve todo ahora:

El pie de página

Vamos a darnos un pie de página simple y muerto, con un par de enlaces de navegación y un aviso de copyright, porque ¿por qué no?

Aquí, he incluido una lista en línea (ver arriba) para esos enlaces de pie de página, y dos columnas que van en vertical en el tamaño del teléfono. Aquí está el CSS que utilicé:

footer#page-footer {padding-top: 3em;padding-bottom: 3em;border-top: 1px solid #cecece;}

¡Y voilá! Una página básica de aterrizaje para que la personalice al contenido de su corazón. Esto es lo que parece todo:

Toma el archivo zip si quieres y juega con el código que ya está allí. Comience desde cero y eche un vistazo a la fuente. O bien, puede echar un vistazo a los materiales de capacitación que otros han hecho ...

Tutoriales y entrenamiento

Materiales de entrenamiento de ZURB

Como era de esperar, los chicos de ZURB han ido más allá de la documentación al proporcionarnos algunos materiales de capacitación propios. Estos toman la forma de Curso basico , y el Curso Avanzado de Fundacion . Estos materiales de capacitación deben descargarse y visualizarse localmente.

ZURB también ofrece clases de entrenamiento pagado que se pueden tomar en línea. Puede encontrar más información sobre esto en su sitio web .

Screencasts por Webdesigner Depot

¡Está bien! Hemos realizado algunos videos de entrenamiento propios, con un enfoque especial en Foundation 5. Compruébelos en Youtube: Fundación 5 Introducción y Usando las características avanzadas de Foundation

Comenzando con la ZURB Foundation 5 Grid

Esta conjunto de screencasts por James Stone cubre todos los conceptos básicos. Los temas incluyen: configuración del proyecto, inicio con la grilla de escritorio, grillas de escritorio anidadas, adición de imágenes de marcador de posición, creación de la experiencia móvil y refinación de la experiencia de la tableta.

Tutoriales del framework ZURB Foundation 5

Los chicos de ieatcss.com escribió y escribió todo un e-book sobre Fundación 5. Puedes encontrar sus tutoriales para principiantes aquí. Si desea algo más avanzado, puede descargar su libro electrónico por 29 USD.

¿Por qué pagarías eso? Porque en lugar de solo decirte cómo usar el marco, explican cómo funciona todo . Y me refiero a todo, incluidos los complementos de JavaScript.

Dominando la Fundación Zurb. tutoriales de la A a la Z

Este es otro conjunto de tutoriales, seguido de un libro electrónico opcional. Estos son provistos por MonsterPost, el blog de TemplateMonster.

Estilos atrevidos de la Fundación explicados

Si has estado anhelando un tutorial en profundidad un poco más avanzado, aquí estás ! En este post, nuestros amigos de Tuts + describa, en gran detalle, cómo personalizar FOundation a partir de los archivos Sass.

Si nunca antes has trabajado con archivos Sass, comienza aquí.

Cómo crear tablas receptivas en Foundation

Por último, los chicos brillantes de Sitepoint nos muestran cómo crear tablas receptivas . Eso sí, esta es una solución que Foundation implementa por defecto. En este tutorial, puede aprender a tomar un componente específico de Foundation e integrarlo en otro proyecto.

(Si es nuevo en el diseño web, es posible que haya escuchado algo acerca de que las tablas son "malas". Bien, si las usa para diseñar su sitio web, eso es absolutamente cierto. Sin embargo, a veces los datos se representan mejor en un formato tabular, así que es bueno aprender cómo hacer que las tablas sean legibles en dispositivos móviles).

tenedores

Gumby - una tenedor de la Fundación

Una cosa hermosa acerca de los frameworks de código abierto como Foundation es que sus licencias les permiten a las personas tomarlos, cambiarlos e incluso llamarlos suyos. Los diseñadores y desarrolladores de Cirujanos digitales hizo exactamente eso.

Conservaron las partes estructurales de Foundation, y luego incluyeron algunos nuevos componentes interesantes de interfaz de usuario y plugins de jQuery. El resultado fue nombrado Gumby , y es un marco fantástico en sí mismo.

Cuando Foundation está diseñado para ser flexible y se adapta tanto a sitios web basados ​​en contenido como a aplicaciones web, Gumby es más especializado. Está enfocado en una cosa: sitios web basados ​​en contenido y la fácil creación de los mismos.

UI casi plana

Los cambios a la Fundación en este tenedor son tan sutiles que no estoy seguro si llamarlo un tenedor o un tema. Es, en esencia, Foundation 5.2.2 con solo unos pocos pequeños cambios estéticos.

Lo que me hace interesante es que estos cambios alteran la tendencia del "diseño plano" de maneras muy pequeñas. El razonamiento detrás de esto parece ser que ciertos elementos de la interfaz de usuario, como los botones, deben retener una referencia sutil a la tercera dimensión.

Es un diseño ligeramente esquemático, y creo que en realidad podría mejorar la usabilidad. Bueno, para algunos usuarios, de todos modos.

Recursos y herramientas diversos

Aquí hay algunas herramientas interesantes relacionadas con Foundation y cosas que no encajaron en ninguna otra categoría:

Building Blocks por ZURB

los Bloques de construcción son fragmentos de código creados con y / o para Foundation. Estos incluyen nuevos componentes de interfaz de usuario, diseños de contenido reutilizables y más.

Fragmentos de texto sublime

Texto sublime es un fantástico editor de texto utilizado por programadores en todo el mundo. Estos fragmentos (trozos de código destinados a una fácil inserción en cualquier archivo) básicamente están destinados a hacer que los diseños de construcción con Foundation vayan mucho más rápido. Son compatibles con Sublime Text 2 y 3.

Generador de rejilla experimental

¿La grilla de doce columnas por defecto no es de tu agrado o no es adecuada para tu proyecto? ¡Entonces haz uno nuevo! Solo dirígete a esto generador de rejilla , ingrese sus valores y tome su CSS.

Tenga en cuenta que el CSS parece estar basado en una versión anterior de Foundation, por lo que es posible que deba adaptarlo a los nombres de clase y las clases receptivas más nuevos. Aún así, hace todos los cálculos difíciles para ti.

Bookmarklets

Los Bookmarklets son pequeñas herramientas, generalmente creadas con JavaScript, que se pueden colocar en la barra de marcadores. Una vez que los desencadena, pueden compartir la página actual, mostrar información útil en una superposición y muchas otras cosas útiles.

los Grid Displayer Bookmarklet por Antoine Lefeuvre se puede usar para superponer una cuadrícula visual sobre cualquier página en la que estés trabajando en este momento. La cuadrícula es personalizable, pero puede establecerla en la Fundación de manera predeterminada.

los Verticallet Rhythm Grid Bookmarklet por Kevin Altman hace más o menos lo mismo que el Grid Displayer. La diferencia es que en lugar de líneas verticales, obtienes un montón de líneas horizontales para ayudarte a administrar el espacio vertical entre los elementos.

El [Responsive Design Bookmarklet] de Victor Coulon volverá a cargar la página actual en la que se encuentra dentro de una herramienta que le permite previsualizar rápidamente sus diseños en diferentes resoluciones.

Una mirada a lo que viene

Será mejor que creas que ZURB no se queda quieto. Junto con todas las otras cosas que hacen, están trabajando duro. Ellos tienen algunas cosas interesantes, como:

Fundación para aplicaciones

ZURB está creando una nueva versión de Foundation que no reemplazará a Foundation 5, sino que funcionará conjuntamente. Incluirá características específicas para el diseño, creación de prototipos y creación de aplicaciones web.

Las características incluirán una nueva grilla, integración con Angular.js, nuevas características diseñadas específicamente para creación de prototipos y más. Para leer más sobre lo que están haciendo, vea lo que tienen que decir por usted mismo: La próxima fundación .

IU de movimiento

Técnicamente, Motion UI formará parte de esta nueva versión centrada en aplicaciones de Foundation, pero imagino que estará disponible como un componente separado para usar en cualquier lugar. (Eso es una suposición educada, nada más ...) ¿Qué es? Es una biblioteca de animación.

Las aplicaciones modernas hacen un uso intensivo de la animación, no solo para impresionar a los usuarios, sino también para mejorar la usabilidad. Motion UI está diseñado para que sea más fácil para aquellos de nosotros que construimos interfaces complejas.

De acuerdo con los chicos ZURB mismos:

Y aunque creo que la eliminación deliberada y completa del skeuomorphism puede haber sido una ligera sobrerreacción en primer lugar (ver lo que dije antes sobre "UI casi plana"), me alegra que encontremos alternativas . Necesitamos nuevas formas de decirle a nuestros usuarios cómo sacar el máximo provecho de nuestros productos, y la animación es una gran manera de gestionar eso.

Conclusión

La Fundación es justo lo que su nombre implica. Es un punto de partida, y es muy bueno en eso. No es el único gran marco que existe, pero es una opción sólida para cualquiera que quiera construir productos hermosos más rápido.

¿Es adecuado para usted y sus proyectos? Eche un vistazo al interior y descubra.