Share
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 del portafolio de una manera adecuada y atractiva..
Para empezar, prepararemos nuestro kit de herramientas:
Usaremos Normalizar para hacer que los estilos de elementos básicos sean más consistentes en diferentes navegadores y minimizar la posibilidad de resultados inesperados.
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 usando las funciones de control MENOS tales como aligerar() y oscurecer() Para darnos una gama 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 dentro movimiento rápido del ojo unidades en. La colección incluye los Mixins para especificar tamaño de fuente, margen, relleno, anchura y altura, y posición CSS (izquierda, Correcto, fondo, y parte superior).
Además, también necesitaremos una herramienta para compilar MENOS en CSS regular. En este tutorial, usaremos una aplicación llamada Koala, que está disponible en Windows, OSX y Ubuntu. Por supuesto, puedes usar el compilador que prefieras, pero con suerte, podrás seguir este tutorial independientemente de la plataforma que estés utilizando..
Para más información sobre LESS, consulte estos tutoriales:
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 utilizar alternativas si lo desea..
También usaremos iconos 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..
En nuestro directorio raíz del proyecto, vamos a crear algunas carpetas nuevas llamadas Menos 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 MENOS en el Menos carpeta. En esta etapa, la lista de archivos y carpetas en nuestro directorio de proyectos debería tener este aspecto:
| - css | - index.html '- menos | - lesshat.less | - remixins.less' - style.less
Luego, agregue Normalize, las Fuentes del icono de la Fundación y nuestra hoja de estilos de fuentes de Google dentro de cabeza etiqueta, 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.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 el fi-marcador clase. Agrega esta clase al lado de ubicación de perfil clase así
...user.city, user.country...
Esto agregará un :antes de pseudo elemento para el div, inyectando el icono 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 el fi-social-behance clase.
...Behance
...
Abramos nuestro style.less, e importemos lesshat.less y remixins.less usando el (referencia) marca.
@import (referencia) 'lesshat.less'; @import (referencia) 'remixins.less';
los (referencia) La marca se introdujo en MENOS 1.5. Esto significa que LESS usará el archivo solo como referencia, no compilará y 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.
@ bg-body: #fafafa; @ bg-header: # 303746; @ base de color: # 353537; @ nombre del color: # e0e0e0; @ título de color: # 6b919f; @ font-body: 'Open Sans', Arial, sans-serif; @ font-name: 'Cantata One', Georgia, Times, serif;
Poner 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".
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 tamaño de la caja, estableciendo el tamaño de la caja de todos los elementos (incluyendo los pseudo-elementos) casillero. Esto le dará a nuestras dimensiones una base mucho más controlable para trabajar desde.
Podemos aplicar esto con el .tamaño de caja Mixins de la biblioteca LESSHat, como sigue:
*, *: antes, *: después de .box-sizing (border-box);
A continuación, vamos a establecer la html tamaño de letra para 62.5%, que es un enfoque para hacer unidades relativas más manejables.
html font-size: 62.5%;
El 62.5% aquí se mide contra el estándar del navegador de 1em, que es de 16px; por lo que el 62.5% de 16px es igual a 10. Al hacer esto, seremos capaces de resolver la conversión de movimiento rápido del ojo en px al multiplicarlo 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 el tamaño de fuente base en @ base-font-size-px la variable se establece en 10.
Puede consultar estos artículos para más información sobre la unidad relativa de CSS:
Usamos un figura Elemento para contener la portada de la imagen de portada. Pero nuestro figura El elemento ha heredado los valores de margen de Normalizar, lo que provoca un espacio en blanco no deseado entre las imágenes de la cartera. Entonces, aquí vamos a eliminar el margen de la figura elemento.
figura margen: 0; / * sobrescribir el estilo predeterminado de Normalize.css * /
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 por Nicolas Gallagher que hemos convertido en MENOS.
.clearfix * zoom: 1; &: antes, &: después content: ""; pantalla: tabla; &: después de borrar: ambos;
Si echa un vistazo a nuestra estructura HTML, hemos añadido clearfix clase a algunos elementos.
Para el cuerpo, Estableceremos los estilos de fuente que se aplican a lo largo de toda la página. Estos estilos incluyen el tamaño de fuente, el color de fuente, el peso de la fuente, la familia de fuentes y el color de fondo. Aquí vamos a utilizar el .tamaño de fuente() Mixin de la biblioteca de Remixins para generar el tamaño de fuente. Todos los Mixins incluidos en la biblioteca Remixins generan un px unidad de respaldo, útil para los navegadores que no admiten el movimiento rápido del ojo unidad.
cuerpo .font-size (16px); color de fondo: @ bg-body; color: @ color-base; familia de fuentes: @ font-base; peso de la fuente: 300;
Una vez guardado el archivo, Koala compilará automáticamente la salida. Y el código anterior debería verse así en CSS regular.
cuerpo font-size: 16px; tamaño de letra: 1.6rem; color de fondo: #fafafa; color: # 353537; font-family: 'Open Sans', Arial, sans-serif; peso de la fuente: 300;
A continuación, agregaremos los estilos para el encabezado del sitio web, de la siguiente manera:.
.encabezado de cartera .padding (50px, 0); color de fondo: @ bg-header; text-align: center; .profile-avatar img .size (80px); radio del borde: 50%; .profile-name .font-size (24px); .margin-bottom (10px); color: @ nombre del color; familia de fuentes: @ nombre de fuente; peso de la fuente: 400; .profile-fields .max-width (320px); tamaño de fuente (14px); color: aclarar (@ bg-header, 50%); margen izquierdo: auto; margen derecho: auto; .field-list padding: 0; .field-item display: inline-block; &: después de contenido: ','; &: last-child: after content: "; .profile-location .font-size (14px); color: lighten (@ bg-header, 30%); &: antes de .margin-right (10 px); tamaño de fuente (18 px);
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 añadido color de fondo en el encabezado con el color almacenado en nuestro @ bg-header variable. Usamos .relleno() Mezcla 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 añadido text-align: center por lo que nuestro contenido se ve más en orden.
.encabezado de cartera .padding (50px, 0); color de fondo: @ bg-header; text-align: center;…
Hemos establecido el tamaño de la imagen del avatar del usuario con .tamaño() Se mezclan y se hacen circulares al establecer el radio del borde en 50%. Puedes ver estos estilos están declarados en. .perfil avatar img.
.profile-avatar img .size (80px); radio del borde: 50%;
A continuación se muestran las reglas para el nombre del usuario. Aquí establecemos el tamaño de fuente con un .tamaño de fuente() mezclar Hemos desplegado el @ nombre del color variable para el color de la fuente, y pasó la familia de fuentes con el @Familia tipográfica variable. Y por último, hemos añadido. peso de la fuente: 400; para hacer que la fuente se vea más audaz que el resto.
.nombre de perfil .font-size (24px); .margin-bottom (10px); color: @ nombre del color; familia de fuentes: @ nombre de fuente; peso de la fuente: 400;
A continuación, veremos las reglas para el área de campos de creatividad del usuario, con el que nos dirigimos .campos de perfil. En Behance, puedes agregar tantas habilidades o especialidades de campo como desees. Eso significa que cada usuario puede tener descripciones de habilidades cortas o realmente largas. Por lo tanto, he decidido establecer el ancho con una anchura máxima. Establecemos el color de fuente para un 50% más claro del fondo del encabezado con aligerar (@ bg-header, 50%).
Además, cada uno de los elementos de campo está separado por una coma que hemos proporcionado a través de un :después pseudo-elemento. Sin embargo, lógicamente, el último elemento no debe tener una coma, por lo que hemos seleccionado el último elemento con :último niño y establecer el contenido propiedad para estar vacío contenido:".
.campos de perfil .max-width (320px); tamaño de fuente (14px); color: aclarar (@ bg-header, 50%); margen izquierdo: auto; margen derecho: auto; .field-list padding: 0; .field-item display: inline-block; &: después de contenido: ','; &: último hijo: después de contenido: ";
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 margen derecho al :antes de pseudo-elemento.
.ubicación de perfil .font-size (14px); color: aclarar (@ bg-header, 30%); &: antes de .margin-right (10px); tamaño de fuente (18px);
Después de agregar estos estilos, el encabezado ahora debería verse como esto:
El siguiente fragmento de código contiene todos los estilos de nuestra cartera..
.área de la cartera .margin (50px, auto); .max-width (960px); ancho: 100%; .portfolio-list padding-left: 0; .portfolio-item .margin-bottom (30px); .height (320px); .padding (0, 15px); flotador izquierdo; tipo de estilo de lista: ninguno; ancho: 33,33333333333333%; .portfolio-content text-align: center; .portfolio-cover ancho: 100%; .portfolio-image border: 8px solid #fff; ancho máximo: 100%; .portfolio-title .font-size (14px); color: oscurecer (@ color-título, 10%); transformación de texto: capitalizar; alineación vertical: medio; ancho: 100%; .portfolio-fields .font-size (12px); color: oscurecer (@ cuerpo-bg, 30%); .field-list padding: 0; .field-item display: inline-block; &: después de contenido: ','; &: último hijo: después de contenido: ";
Muchos de los estilos anteriores son decorativos. Pero aquí hay algunas cosas clave que vale la pena destacar:
Primero, configuramos el .área de cartera ancho a 100%, pero conserva el ancho máximo a 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 se puede ver arriba, hemos establecido el .artículo de cartera ancho hasta 33,33333333333333%. Esto se debe a que mostraremos tres elementos en cada fila. los 33,33333333333333% Se deriva de la división del 100% por 3..
los .portada de cartera el ancho se establece en 100%, por lo tanto, llenará el ancho de su padre. los .imagen de cartera se establece con ancho máximo: 100% por lo que la imagen no excederá el ancho padre independientemente del tamaño. Todos estos ajustes de ancho nos ayudarán a hacer que nuestro sitio web sea fluido..
Ahora, la sección de cartera debería tener este aspecto.
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..
.portfolio-footer .margin (30px, auto); .max-width (960px); text-align: center; ancho: 100%; .power-by .font-size (12px); color: oscurecer (@ cuerpo-bg, 30%); transformación de texto: mayúsculas; .power-logo .width (36px); .eight (36px); color: # 1769ff; pantalla: bloque en línea; margen: 0 auto; desbordamiento: oculto; posición: relativa; texto-decoración: ninguno; texto-sangría: 100%; espacio en blanco: nowrap; &: antes de .line-height (38px); tamaño de fuente (36px); pantalla: bloque en línea; altura: 100%; izquierda: 0; posición: absoluta; texto-sangría: 0; arriba: 0; ancho: 100%;
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 margen: 0 auto;. También alineamos todo el contenido al centro para que se vea ordenado. Entonces escondemos el texto dentro .logo de poder utilizando el Método Kellum y mostrar solo el logotipo de Behance con su color de marca, azul # 1769ff.
Nota: Behance tiene una sección completa para desarrolladores sobre sus Pautas de marca si desea echar un vistazo.
El Pie de página ahora debería verse bastante completo, como tal..
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 el meta viewport (crucial) en el cabeza etiqueta.
A continuación agregamos algunas consultas de medios, como sigue.
Pantalla solo @media y (ancho mínimo: 768 píxeles) y (ancho máximo: 959 píxeles) .portfolio-area .portfolio-item ancho: 50%; pantalla solo para @media y (max-width: 767px) .portfolio-area .portfolio-item height: auto; ancho: 100%;
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 y menor.
El sitio web de nuestra cartera en diferentes tamaños de vistaHabiendo 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 CSS3 para mejorar la experiencia..
Accentsconagua