Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Diseñando nuestro sitio web Portfolio de Behance usando LESS

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build Your Own Behance-Powered Portfolio.
How to Use the Behance API to Build a Custom Portfolio Web Page
Bringing Our Behance Portfolio Alive With CSS Animation

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Durante la parte anterior de esta serie, aprendimos sobre la API de Behance, usándola para capturar las piezas de la cartera de un usuario y mostrarlas en una página web. En esta parte, diseñaremos el estilo de la página web, presentando las piezas de la cartera de una manera adecuada y atractiva.

Herramientas que usaremos

Para empezar, prepararemos nuestro kit de herramientas:

Normalizar

Usaremos Normalize para hacer que los estilos de elementos básicos sean más consistentes en diferentes navegadores y minimizar la posibilidad de resultados inesperados.

Bibliotecas LESS Mixins

También utilizaremos LESS para diseñar nuestro sitio web. Sea cual sea el preprocesador que prefiera, es definitivamente recomendable utilizarlos en su flujo de trabajo. Soy un gran fan de, en lugar de tener que rastrear el color deseado en el selector de color desde una aplicación separada, simplemente utilizando las funciones de control LESS como lighten() y darken() para darnos una variedad de variantes de color.

Para ayudarnos aún más, usaremos LESSHat para ayudarnos a escribir menos código con su colección Mixins. También utilizaremos Remixins desarrollados por Christopher Ramírez. Remixins es una colección de Mixins para convertir px en unidades rem. La colección incluye los Mixins para especificar font-size, margin, padding, width y height, y la posición CSS (left, right, bottom, y top).

Además, también necesitaremos una herramienta para compilar LESS en CSS regular. En este tutorial, usaremos una aplicación llamada Koala, que está disponible en Windows, OSX y Ubuntu. Por supuesto, puede usar el compilador que prefiera, pero con suerte, podrá seguir este tutorial independientemente de la plataforma que esté utilizando.

Para más información sobre LESS, consulte estos tutoriales:

Google Fonts

Las fuentes de sistema predeterminadas como Arial simplemente no lo están haciendo por mí hoy. Así que en este tutorial usaré Google Fonts en su lugar. He elegido Cantata One para el encabezado y Open Sans para el texto del cuerpo predeterminado. Esta es una preferencia personal, puede excluir fuentes de Google o usar alternativas si lo desea.

Fuentes de iconos de fundación

También usaremos íconos de fuentes para decorar un poco en nuestro sitio web. Estos días tenemos un montón de opciones para los iconos de fuente. Sin embargo, durante mi búsqueda me sorprendió bastante que solo algunas de estas fuentes incluyeran el icono de Behance en su colección. En cualquier caso, para este tutorial usaremos Foundation Icon Fonts 3, ya que incluye el icono de Behance y también está disponible a través de un CDN.

Configuración de nuestros activos y herramientas

En nuestro directorio raíz del proyecto, creemos algunas carpetas nuevas llamadas less y css (que será la carpeta de salida del archivo LESS). Cree un nuevo archivo llamado style.less y tome Remixins así como LESShat. Ponga estas tres hojas de estilo LESS en la carpeta less. En esta etapa, la lista de archivos y carpetas en nuestro directorio de proyectos debería tener este aspecto:

Luego, agregue Normalize, las Fuentes de los íconos de Foundation y nuestra hoja de estilos de Google Font dentro de la etiqueta head, junto con style.css, que será el archivo de salida de style.less.

Además, abra la aplicación Koala (o la forma de compilación que prefiera) y agregue nuestro directorio de proyectos.

El directorio de proyectos en Koala.

Añadiendo las fuentes de iconos

Antes de escribir cualquier estilo, agreguemos algunos iconos a nuestro sitio web. Primero agregaremos la marca de ubicación del mapa junto al elemento de ubicación del usuario con la clase fi-marker. Agregue esta clase al lado de la clase profile-location así:

Esto agregará un pseudo-elemento :before al div, inyectando el ícono del marcador a través de nuestros Iconos de la Fundación. A continuación, agregaremos el logotipo de Behance en la sección de pie de página con la clase fi-social-behance.

Configurando Mixins y Variables

Abramos nuestro style.less, e importemos lesshat.less y remixins.less utilizando la marca (reference)

La marca (reference) se introdujo en LESS 1.5. Esto significa que LESS utilizará el archivo solo como referencia, no compilará ni generará el contenido en el archivo. Es una característica muy poderosa que minimiza los estilos duplicados e innecesarios.

Dentro de style.less, agregaremos las siguientes variables que almacenan la paleta de colores y la familia de fuentes de nuestro sitio web.

Colocar estas variables en un solo lugar actúa como una especie de guía de estilo, pero también nos ayuda a mantener nuestros estilos de una manera más conveniente. Por ejemplo, si hay algo en el sitio web que queremos cambiar, simplemente podemos cambiar el valor dentro de estas variables. Es una forma mucho más segura de modificar estilos, en lugar de realizar "Buscar y reemplazar".

Empezando a diseñar

Estilos de elementos básicos

A pesar de que hemos agregado Normalize, que ha estandarizado nuestros estilos de elementos, todavía tenemos algunos estilos que modificar para seguir nuestra necesidad particular. Para comenzar, modificaremos el box-sizing, estableciendo el tamaño de la caja de todos los elementos (incluidos los pseudo-elementos) en border-box. Esto le dará a nuestras dimensiones una base mucho más controlable para trabajar.

Podemos aplicar esto con los mixins .box-sizing de la biblioteca LESSHat, de la siguiente manera:

A continuación, estableceremos el tamaño de la fuente html en 62.5%, que es un método para hacer que las unidades relativas sean más manejables.

El 62.5% aquí se mide contra el estándar del navegador de 1em que es 16px; por lo tanto, el 62.5% de 16px es igual a 10. Al hacer esto, podremos fácilmente calcular la conversión de rem en px multiplicándola por 10. 1.2rem, por ejemplo, será igual a 12px y así sucesivamente. Además de esto, si echamos un vistazo a la fuente remixins.less, encontraremos que el tamaño de fuente base en la variable @base-font-size-px está establecido en 10.

Puede consultar estos artículos para más información sobre la unidad relativa de CSS:

Utilizamos un elemento figure para contener la portada de la imagen del portfolio. Pero nuestro elemento figure ha heredado los valores de margen de Normalizar, lo que causa un espacio en blanco no deseado entre las imágenes de la cartera. Entonces, aquí eliminaremos el margen del elemento figure.

El Clearfix Hack

El uso de un hack de clearfix es un método popular como recurso a algunos problemas de diseño causados por elementos flotantes que no logran eliminar sus elementos secundarios. Así que aquí agregaremos la sugerencia de Clearfix de Nicolas Gallagher que hemos convertido en LESS.

Si echa un vistazo a nuestra estructura HTML, hemos agregado la clase clearfix a algunos elementos.

Los estilos de cuerpo

Para body, estableceremos los estilos de fuente que se aplicarán en toda la página. Estos estilos incluyen el tamaño de fuente, el color de la fuente, el peso de la fuente, la familia de fuentes y el color de fondo. Aquí, usaremos el mixin .font-size() de la biblioteca de Remixins para generar el tamaño de fuente. Todos los Mixins incluidos en la biblioteca Remixins generan un respaldo de unidad px, útil para los navegadores que no admiten la unidad rem.

Una vez que haya guardado el archivo, Koala compilará automáticamente la salida. Y el código anterior debería verse así en CSS regular.

Los estilos de encabezado

A continuación, agregaremos los estilos para el encabezado del sitio web, de la siguiente manera.

Esta es una buena parte de la sintaxis, así que vamos a dividirla en partes y examinar lo que está haciendo. En primer lugar, hemos agregado el color de fondo en el encabezado con el color almacenado en nuestra variable @bg-header. Utilizamos el Mixins .padding() de Remixins para agregar relleno en la parte superior e inferior del encabezado, lo que proporciona más espacio en blanco vertical. También hemos agregado text-align:center para que nuestro contenido se vea más en orden.

Hemos establecido el tamaño de la imagen del avatar del usuario con .size() Mixins y hemos hecho circulares al establecer el radio del borde en 50%. Puedes ver estos estilos declarados en .profile-avatar img.

A continuación se muestran las reglas para el nombre del usuario. Aquí establecemos el tamaño de fuente con una mezcla .font-size(). Hemos implementado la variable @color-name para el color de la fuente y hemos pasado la familia de fuentes con la variable @font-family. Y por último, hemos añadido el font-weight: 400; para hacer que la fuente se vea más audaz que el resto.

A continuación, veremos las reglas para el área de campos de creatividad del usuario, a la que nos dirigimos con .profile-fields. En Behance, puede agregar tantas habilidades o especialidades de campo como desee. Eso significa que cada usuario puede tener descripciones de habilidades cortas o realmente largas. Por lo tanto, he decidido establecer el ancho con un max-width. Establecemos el color de fuente para un 50% más claro del fondo del encabezado con lighten(@bg-header, 50%).

Además, cada uno de los elementos de campo está separado por una coma que hemos proporcionado a través del pseudo-elemento :after . Sin embargo, lógicamente, el último elemento no debe tener una coma, así que seleccionamos el último elemento con :last-child y configuramos la propiedad content en vacío content:''.

A continuación, se encuentran las reglas de estilo para diseñar la ubicación del usuario. Aquí establecemos el color ligeramente más claro que el color de fondo, 30% para ser exactos. Y también hemos ampliado ligeramente la brecha entre el texto y el ícono de marcador de Foundation Icon Fonts agregando el margin-right del pseudo-elemento :before.

Después de agregar estos estilos, el encabezado ahora debería verse como esto:

Estilo de la sección del portfolio

El siguiente fragmento de código contiene todos los estilos de nuestro portfolio.

Muchos de los estilos anteriores son decorativos. Pero aquí hay algunas cosas clave que vale la pena destacar:

Primero, establecemos el ancho de .portfolio-area en 100%, pero conservamos el ancho máximo en 960px. Esto permitirá que el ancho se adapte correctamente en el tamaño de la ventana gráfica más pequeña. Además, como puede ver arriba, hemos establecido el ancho de .portfolio-itemo en 33,33333333333333%. Esto se debe a que mostraremos tres elementos en cada fila. El 33,33333333333333% se deriva de la división del 100% por 3.

El ancho de .portfolio-cover se establece en 100%, por lo tanto, llenará el ancho de su padre. La .portfolio-image se establece con max-width:100% para que la imagen no exceda el ancho principal independientemente del tamaño. Todas estas configuraciones de ancho nos ayudarán a hacer que nuestro sitio web sea fluido.

Ahora, la sección portfolio debería tener este aspecto.

Estilizar el pie de página

A continuación, agregaremos los estilos para el pie de página. El pie de página es sencillo y simple; solo consta de texto "Desarrollado por" y un icono de Behance de Foundation Icon Fonts. A continuación se muestran todas las reglas de estilo para el pie de página.

De forma similar a la sección de la cartera, establecemos el ancho del pie de página en 100% y lo alineamos con el centro de la ventana del navegador con margin: 0 auto;. También alineamos todo el contenido al centro para que se vea ordenado. Luego, escondemos el texto dentro del logotipo de .power-logo utilizando el método Kellum y mostramos solo el logotipo de Behance con su color de marca, azul #1769ff.

Nota: Behance tiene una sección completa para desarrolladores en sus Pautas de marca si desea echar un vistazo.

El Pie de página ahora debería verse bastante completo, como tal.

Hacer que el sitio web sea Adaptable

Tenemos un diseño fluido, pero ahora vamos a hacer que nuestra página web sea receptiva. Afortunadamente, nuestro sitio web es solo un sitio web de una sola página con un diseño muy simple. Por lo tanto, no requerirá ningún código largo para que sea receptivo. Para empezar, agregaremos la meta viewport (crucial) en la etiqueta head.

A continuación agregamos algunas consultas de medios, de la siguiente manera.

Estas consultas de medios mostrarán dos elementos en una fila entre 959px y 768px de ancho de la ventana gráfica, y un elemento cuando el ancho de la ventana gráfica sea de 767px e inferior.

El sitio web de nuestra cartera en diferentes tamaños de vista

La próxima vez...

Habiendo diseñado la estética de nuestra página, todo lo que queda por hacer es agregar algo de estilo. En la siguiente y última parte de esta serie, permitiremos a los visitantes hacer clic en cada miniatura y ver una versión más grande, además agregaremos algunas animaciones de CSS3 para mejorar la experiencia.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.