Construya sitios web Superfast con Foundation 5 [A Guide]

El uso de un marco frontend puede mejorar su flujo de trabajo de diseño web de muchas maneras. Puede ayudarlo a seguir los principios del diseño moderno, como el primer enfoque móvil, el marcado semántico y el diseño receptivo. Puede aprovechar muchos elementos de CSS y JavaScript listos para usar y acelerar significativamente su proceso de desarrollo, lo que le permite tener más tiempo para enfocarse en el diseño visual y de experiencia del usuario.

Zurb Foundation 5 es uno de los frameworks frontend más potentes del mercado. Está lógicamente construido, es fácil de usar y completamente gratuito. Le permite utilizar una cuadrícula CSS flexible que facilita la creación de un diseño limpio y fácil de usar . El framework de Foundation también está fuertemente probado, por lo que se encarga de la compatibilidad entre navegadores y dispositivos cruzados.

En este tutorial, le mostraré cómo puede crear un sitio web súper rápido con Zurb Foundation 5. Puede echar un vistazo al 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 te está esperando. El sitio web que crearemos juntos en este tutorial cumplirá el sueño del diseñador de UX moderno: será sensible, móvil primero, 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
• Comprender la Grilla
  • Cuándo usar las clases Large-N, Medium-N y Small-N
• Agregar la barra de menú superior
• Poblando la parte principal
  • Agregar un panel para publicaciones populares
  • Agregar 3 publicaciones más al panel popular
  • Combinando el CSS
  • Agregar un poco más de contenido
  • Agregar paginación
• Poblando la barra lateral
  • El formulario del boletín
  • Flex Video
  • El menú de la barra lateral
• Conclusión

1. Descargando Foundation 5

Puede descargar Foundation 5 en 4 formas diferentes:

1. el código completo
2. una versión más ligera con solo el código esencial
3. una versión personalizada donde puede personalizar lo que necesita y lo que no
4. una versión de Sass si desea establecer sus variables y mixins en SCSS.

En este tutorial elegiré el código completo con CSS vanilla, pero por supuesto puede elegir cualquier otra versión si desea optimizar su sitio y solo usar lo que realmente necesita.

Después de haber descargado y descomprimido 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 no necesita conservarlo ya que puede acceder fácilmente a la Documentación de la Fundación siempre que lo desee.

Abra el archivo index.html en su editor de código favorito y elimine todo lo que se encuentre dentro del sección, pero antes del cierre

Las reglas de estilo que agregamos al archivo app.css para mejorar nuestro prototipo son las siguientes:

 encabezado {margin-bottom: 2em; } .popular-additional h4 {font-size: 1.125em; margen superior: 0, 4 em; } .row .row.popular-main {margin-bottom: 1.5em; } 

Como Foundation 5 usa unidades relativas, necesitamos usar "em" -s o "rem" -s en lugar de píxeles para mantenerse al día con las reglas. (Puede 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, puede usar cualquier otra extensión de navegador de desarrollo web si lo desea.

Aquí, en este breve fragmento de CSS, solo tuvimos que anular el CSS predeterminado de Foundation una sola vez, en la última regla (.row .row.popular-main). Así es como se ve el sitio de demostración ahora:

4.4 Agregar más contenido

Usando las mismas reglas que antes, agregaremos más contenido a la sección principal de la página. El contenido que agregaremos ahora serán las publicaciones más recientes con miniaturas pequeñas.

Foundation 5 tiene estilos de miniaturas pre-preparados realmente geniales que utilizaremos en este Paso. Las miniaturas de Foundation usan una clase CSS pre-construida llamada "th" que debemos agregar a las imágenes que queremos mostrar como miniaturas de la manera en que puedes verla 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 nuestra clase personalizada de CSS llamada "última publicación" .

En la tableta y el tamaño del escritorio, mostraremos una pequeña miniatura usando la clase de miniatura 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 utilicé las clases "media-3 columnas" y "media-9 columnas" para hacer que dividan la pantalla en 1: 3, 25% para la imagen y 75% para el texto de tamaño mediano.

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 Último mensaje, ya que todos ellos usan el mismo marcado HTML, solo el contenido es diferente.

  4.5 Agregar paginación 
En este paso agregaremos una paginación genial debajo de las últimas publicaciones. Foundation 5 nos ayuda con sus clases de paginación convenientes y listas para usar. Usamos el mismo código en este paso que puede encontrar en la sección "Avanzado" dentro de Pagination Docs.
Aquí están las últimas publicaciones con la sección de paginación recién agregada:
 5. Poblar la barra lateral 
Ahora que estamos listos con el contenido principal de nuestro sitio de demostración, es hora de completar la barra lateral derecha. La barra lateral derecha se deslizará por debajo del contenido principal en los tamaños de dispositivos móviles y tabletas.
Debe insertar todos los fragmentos de código en esta sección dentro del 
  
  



Artículos De Interés






			
	
				

					30 increíbles fotos infrarrojas
					

			
	
				

					La aplicación Google para Android ahora viene con un modo fuera de línea
					
						







			
	
				

					Enfrentamiento Cloud Storage: iCloud vs Google Drive vs OneDrive vs Dropbox
					

			
	
				

					Árboles de Navidad DIY: los 30 más creativos de la historia