Construir sitios web Superfast con Foundation 5 [Una guía]
El uso de un marco frontend puede mejorar el flujo de trabajo de diseño web de muchas maneras. Puede Ayudarte a seguir los principios de diseño moderno. como el enfoque móvil primero, el marcado semántico y el diseño sensible. Usted puede aproveche muchos elementos CSS y JavaScript listos para usar y significativamente acelerar su proceso de desarrollo, liberar más tiempo para centrarse en el diseño de la experiencia visual y de usuario.
Zurb Foundation 5 es uno de los marcos de frontend más potentes del mercado. Es lógicamente construido, fácil de usar y completamente gratis. Te permite hacer uso de un cuadrícula flexible de CSS ese Facilita la creación de un diseño limpio y fácil de usar.. El marco de Foundation también está muy probado, por lo que se ocupa de la compatibilidad entre navegadores y dispositivos..
En este tutorial te mostraré Cómo puedes construir un sitio web súper rápido con Zurb Foundation 5. Puedes ver el resultado final en la página de demostración..
Crearé el diseño del sitio web, la tarea de agregar elementos de diseño sutiles lo está esperando. El sitio web que crearemos juntos en este tutorial logrará el sueño del moderno diseñador de UX: será sensible, móvil, fácil de usar y semántico..
Debido a la longitud de esta guía, aquí están los accesos directos para llegar a la sección que desea rápidamente:
- Descargando Foundation 5
- Entendiendo la grilla
- Cuándo usar las clases Large-N, Medium-N y Small-N
- Añadiendo la barra de menú superior
- Poblando la parte principal
- Añadiendo un panel para publicaciones populares
- Añadiendo 3 publicaciones más al panel popular
- Adornando el CSS
- Añadiendo más contenido
- Añadiendo paginación
- Poblando la barra lateral
- El formulario de boletín
- Flex Video
- El menú de la barra lateral
- Conclusión
1. Descargando Foundation 5
Puedes descargar Foundation 5 en 4 formas diferentes:
- el codigo completo
- Una versión más ligera con solo el código esencial.
- Una versión personalizada donde puede personalizar lo que necesita y lo que no.
- una versión de Sass si desea configurar sus variables y mixins en SCSS.
En este tutorial elegiré el código Completo con CSS de vainilla, pero, por supuesto, puede elegir cualquier otra versión si desea optimizar su sitio y usar solo lo que realmente necesita..
Una vez que haya descargado y desempaquetado el archivo zip, abra el archivo index.html en su navegador y verá algo como esto:
Sí, los desarrolladores incluyeron enlaces útiles en el archivo de índice. Puede dejarlo de esta manera y crear un nuevo archivo para su prototipo con el nombre home.html o algo similar, pero realmente no necesita guardarlo, ya que puede acceder fácilmente a la Documentación de la Fundación cuando lo desee..
Abre el archivo index.html en tu editor de código favorito y borra todo dentro de Sección, pero antes del cierre. Las reglas de estilo que añadimos a la app.css Archivo para embellecer nuestro prototipo son estos: Como la Fundación 5 usa unidades relativas, necesitamos usar “em”-s o “movimiento rápido del ojo”-s en lugar de píxeles para mantenerse al día con las reglas. (Puedes leer acerca de las unidades CSS: Pixels vs ems vs% aquí). Usé la extensión Firebug de Firefox para determinar dónde tengo que anular las reglas CSS de Foundation 5, puedes usar cualquier otra extensión de navegador de desarrollo web si quieres. Aquí, en este breve fragmento de código CSS, solo tuvimos que anular el CSS predeterminado de Foundation solo una vez, en la última regla (.row .row.popular-main). Así es como se ve el sitio de demostración ahora: Usando las mismas reglas que antes, agregaremos más contenido a la sección principal de la página. El contenido que añadiremos ahora será el. últimas publicaciones con miniaturas pequeñas. Foundation 5 tiene estilos de miniaturas pre-preparados realmente geniales que utilizaremos en este Paso. Fundación de miniaturas utilizan una clase de CSS preconstruida llamada “th” que debemos agregar a las imágenes que queremos mostrar como miniaturas en la forma en que puede verlas en el fragmento de código a continuación. Para cada publicación más reciente, agregamos una nueva fila debajo del panel Popular con nuestro clase CSS personalizada llamada “última publicación”. En el tamaño de la tableta y el escritorio, mostraremos una miniatura pequeña usando la clase de miniaturas de Foundation a la izquierda, y el título y una breve descripción a la derecha. En el móvil, el título y la descripción irán debajo de la miniatura.. Ahora he usado el “medio-3 columnas” y “medio-9 columnas” Clases para hacer que dividan la pantalla en 1: 3, 25% para la imagen y 75% para el texto desde tamaño medio.. Inserte el siguiente fragmento de código debajo del Panel Popular tres veces (para las tres últimas publicaciones). Aquí solo incluyo el código de una fila de Últimas Publicaciones, ya que todas usan el mismo formato HTML, solo el contenido difiere. Contenido de la última publicación ... Nuestro archivo CSS personalizado creado en el Paso 4.3, app.css También obtiene algunas nuevas reglas de estilo para mantener el aspecto de la demo ordenado.. Nota: Si desea agregar su propio CSS personalizado a Foundation, nunca olvide verificar, con una herramienta de desarrollo web, donde tiene que anular las reglas predeterminadas. En el siguiente fragmento de código CSS, debemos anularlos en la primera regla (.row .row.latest-post). En la segunda regla basta con usar nuestro propio selector personalizado (.latest-post h4). Nuestro prototipo ahora se ve así: En este paso agregaremos una paginación interesante debajo de las últimas publicaciones. Foundation 5 nos ayuda con sus prácticas clases de paginación listas para usar. Usamos el mismo código en este paso que puede encontrar en el “Avanzado” sección dentro de los documentos de paginación. Aquí están las últimas publicaciones con la sección de paginación recién agregada: Ahora que estamos listos con el contenido principal de nuestro sitio de demostración, es hora de completar la barra lateral correcta. La barra lateral derecha se deslizará por debajo del contenido principal en tamaños de tableta y móvil. Debe insertar todos los fragmentos de código en esta sección dentro del La barra lateral izquierda contendrá un formulario de registro de boletines (1), un video más reciente (2) y un menú de barra lateral de estilo acordeón debajo del apodo “Nuestro libro de cocina” (3). Al final de este paso, estaremos listos con nuestra demostración que se verá así: Para crear un formulario en Foundation 5, no tiene que hacer nada más, simplemente coloque la cuadrícula dentro de un Etiqueta HTML. Si observa el fragmento de código a continuación, verá que colocamos el formulario en una fila en la que configuramos diferentes selectores de CSS para las 3 cuadrículas: “pequeño-12”, “medio-9”, y “grande-12”. Elegimos esta solución porque un formulario de boletín 100% ancho se ve bien en el tamaño del móvil, pero es realmente incómodo en el tamaño de la tableta, ya que se vuelve muy amplio. Afortunadamente la Fundación 5 nos permite usar “Filas incompletas”: solo tenemos que añadir el “fin” clase a la definición de la clase CSS de la columna incompleta. Así que esto es lo que sucederá aquí: en el tamaño del dispositivo móvil, la barra lateral se mostrará debajo del contenido principal con un Formulario de suscripción al boletín que cubre toda la pantalla.. En el tamaño medio, la barra lateral permanecerá bajo el contenido principal, pero el Formulario de boletín informativo cubrirá solo el 75% de la pantalla, y el 25% restante quedará vacío.. En el tamaño del escritorio, la barra lateral estará justo al lado del contenido principal, y el Formulario de boletín informativo cubrirá todo el ancho de la barra lateral de nuevo. Ver los documentos de cuadrícula para leer más sobre filas incompletas. Ahora eche un vistazo dentro de la encabezado margen inferior: 2em; .popular-adicional h4 font-size: 1.125em; margen superior: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Añadiendo más contenido
Título de la última publicación
.fila .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; tamaño de letra: 1.125em;
4.5 Agregando Paginación
5. Poblando la barra lateral
5.1 El formulario de boletín
Suscríbase a nuestro boletín de noticias
Foundation Forms tiene muchas otras opciones de diseño, como la etiqueta de prefijo, la etiqueta de radio de prefijo, el botón Postfix y la etiqueta de Postfix. Aquí elegimos la opción Botón Postfix porque es más fácil de usar: los usuarios pueden hacer clic en él y enviar el formulario a la vez..
Dentro del formulario agregaremos una nueva fila anidada que divide la pantalla a 2: 1. La entrada de texto obtendrá 8 columnas y el botón de postfix obtendrá 4. Como queremos tener este diseño incluso en la pantalla móvil, configuraremos “pequeñas-8 columnas” y “pequeño-4 columnas” Aquí los selectores de CSS, la cuadrícula pequeña es el tamaño más pequeño donde queremos implementar este marcado.
Puedes ver otra cosa nueva en el código HTML de arriba, que es el “colapso de fila” clase. Este es el estilo incorporado de la Fundación 5. Por defecto, hay un canal entre dos columnas adyacentes, pero si agregamos el “colapso” Clase a nuestra fila, el canal desaparecerá.. Hacemos esto porque queremos que el botón esté justo al lado de la entrada de texto sin ningún espacio entre ellos.
Ahora es el momento de insertar este fragmento de código en el
5.2 Flex Video
Debajo de la sección del boletín de noticias, agregaremos una receta diaria en video a nuestra barra lateral. Fundación 5 nos ayuda. Haz que los videos incrustados respondan y obliga a escalarlos automáticamente con su característica Flex Video.
Flex Videos utilizan el incorporado “video flex” Clase CSS Creamos una nueva fila para la sección de la barra lateral Receta diaria de video y colocamos una columna ancha con la “pequeño-12 mediano-9 grande-12 columnas fin” Los selectores de CSS por la misma razón utilizamos una fila incompleta en la cuadrícula mediana en el paso anterior.
Aquí está el código que necesita pegar debajo de la Sección de Boletines. Puedes usar cualquier video de Youtube, Vimeo, etc..
Receta diaria de video
5.3 El menú de la barra lateral
Para el menú de la barra lateral, usaremos la función de Acordeón de Foundation 5. Los acordeones son elementos web que expanden y contraen el contenido en secciones lógicas..
En nuestro sitio de demostración, estas secciones lógicas son los 3 grupos de alimentos diferentes (platos principales, acompañamientos, postres), y cada grupo contiene grupos más pequeños, como “Aves de corral”, “Cerdo”, “Carne de vaca”, “Vegetariano”.
Colocamos toda la barra lateral de Acordeón en una columna ancha con la misma lógica que en los Pasos 5.1 y 5.2 anteriores. Colocamos el acordeón dentro de él como una lista desordenada con las clases CSS incorporadas apropiadas, tales como “acordeón” y “acordeon-navegacion”.
Como Foundation Accordions funciona con JavaScript, puede personalizar su comportamiento con la ayuda de variables de JavaScript pre-compuestas si lo desea. Para hacerlo, mira el “Configuración de JavaScript opcional” Sección en los documentos de acordeón. El siguiente fragmento de código aparece debajo de la sección de Flex Video dentro del archivo index.html.
Conclusión
Ahora que estamos listos con nuestro sitio de demostración, veamos qué más puede lograr con Foundation 5. Los elementos que usamos en esta demostración son solo un pequeño conjunto de las características del marco de Foundation. Hay muchas otras cosas que puede utilizar en su diseño, como barras de iconos personalizables, rutas de navegación, cajas de luz, controles deslizantes de rango, validación de formularios y muchos otros. Los documentos están bastante bien escritos y ayudan a los desarrolladores con muchos ejemplos de código..
Si está familiarizado con Sass, tiene aún más opciones, ya que cada sección en los Documentos explica cómo puede crear sus propios mixins y qué variables Sass puede usar para personalizar su sitio. Antes de comenzar a diseñar su página web, no se olvide de verificar la compatibilidad de Foundation Framework para asegurarse de que funciona en todos los navegadores que necesita para compilar.
- Ver demostración
- Descargar fuente
