Share
En este tutorial continuaremos construyendo nuestro sitio de podcast. Comenzaremos a diseñar nuestro índice de publicaciones, crearemos un pequeño pie de página y le daremos un poco de color a la mezcla. Todo eso usando Sass y la suite Bourbon..
Bien, ¿dónde estábamos? Por el momento nuestro sitio no se ve muy bien:
Actualmente, nuestras publicaciones no están alineadas con nada más que el lado izquierdo, por lo que necesitamos una cuadrícula para solucionar este problema. Nuestro querido Bourbon Neat al rescate! Primero agregaremos una clase puestos como un envoltorio para nuestros mensajes y que sea una contenedor exterior que centra el contenido en la página.
En "source / index.html.erb":
<% page_articles.each_with_index do |article, i| %><%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
<%= article.body %> <% end %>
Luego debemos crear un nuevo Sass parcial para nuestros estilos de índice y aplicar algo de magia, por lo que en "source / stylesheets / all.sass":
@import 'index_posts'
Y en "source / stylesheets / _index_posts.sass":
.postes + contenedor exterior
También creo que es una buena idea agregar un color de fondo para que nuestro contenedor externo sea fácilmente visible, por ahora.
Entonces comprométete con Git:
git add -all git commit -m 'Agrega Sass parcial para el contenido de los centros de índice'
Los artículos, etiquetas y material de calendario recientes están en "layout.erb" y no nos preocupan en este momento. Centrémonos en cambio en hacer que esta lista de índice de publicaciones aparezca. Vamos a dar el h2 Titular una clase título de la entrada y deje que el título y los párrafos del cuerpo de la copia abarquen ocho (de las doce) columnas en la página. Las publicaciones también deben desplazar dos columnas porque queremos evitar que nuestra copia se extienda por toda la página y, por lo tanto, exceda el ancho de la línea (medida) para leer de 45 a 75 caracteres..
Así que en "source / index.html.erb":
<% page_articles.each_with_index do |article, i| %><%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
<%= article.body %> <% end %>
Y en "source / stylesheets / _index_posts.sass":
.post-título, .posts p + shift (2) + span-columnas (8)
Ahora estamos hablando. Nuestro contenido está alineado y bien centrado en la página. Lo que nos falta es cualquier forma de jerarquía visual; nuestro h2 Los títulos no son mucho más grandes que el contenido de nuestras publicaciones. Para proporcionar una mejor experiencia de lectura, debemos asegurarnos de que los títulos y su texto correspondiente tengan un mejor contraste visual que ese.
Primero, necesitamos un mejor texto para trabajar, así que hagamos uso de un ayudante de Middleman para el texto ficticio. Vamos a añadir un erb extensión a nuestras entradas de blog y agregue lo siguiente a nuestras publicaciones de prueba.
Nota: necesitamos la extensión ".erb" solo porque queremos ejecutar un código Ruby entre esta construcción <%= %>.
En "fuente / publicaciones / 2012-01-01-example-article.html.markdown.erb":
Este es un artículo de ejemplo. Probablemente quieras borrarlo y escribir tus propios artículos.! <%= lorem.sentences 5 %>
Repasaremos los detalles en un momento, pero primero algunos estilos más en "source / stylesheets / _index_posts.sass":
.tamaño de fuente posterior al título: 1.7em .posts p tamaño de fuente: 1.05em margen inferior: 4em
Eso es un poco más fácil para los ojos, ¿no? Hemos ajustado los encabezados y párrafos en un grado razonable. Un pequeño margen adicional entre las publicaciones hace toda la diferencia. En términos de jerarquía, es un buen comienzo..
Comprometerse con Git:
git add --all git commit -m 'Ajusta el tamaño para el título y el texto del cuerpo Agrega texto ficticio Agrega la extensión .erb a las publicaciones ficticias'
Con el pie de página. Creo que primero deberíamos ocuparnos de los espantosos elementos flotantes en la parte inferior. Empaquetemos “Artículos recientes” y “Etiquetas” en un pie de página y eliminemos “Por año”. El marcado relevante es parte del diseño global en "source / layouts / layout.erb". Encuentra el código en el aparte etiqueta debajo rendimiento Y adaptarlo de la siguiente manera. En “source / layouts / layout.erb”:
El negocio predeterminado anterior de simplemente hacer un bucle a través de nuestras publicaciones y etiquetas que viene con Middleman está bien. Sin embargo, quiero que sea un poco más inteligente e introducir la reproducción aleatoria de publicaciones y etiquetas recientes. De esa manera, el usuario no solo ve los últimos diez artículos o una gran lista de etiquetas, sino que también una versión aleatoria de ambos que siempre tiene diez elementos. Tampoco consumen una gran cantidad de espacio y me permiten alinear ambos elementos constantemente en el pie de página. Renombré el h3 también para publicaciones, en "source / layouts / layout.erb":
### alineación
Creo que hemos mejorado bastante la experiencia del usuario a través de esa pequeña mejora. Ruby hizo nuestro trabajo muy fácil. Ahora este marcado solo necesita un pequeño empujón para una mejor alineación. Creamos un nuevo Sass parcial solo para el pie de página. En "source / stylesheets / all.sass":
@importar 'pie de página'
Y luego en el parcial "source / stylesheets / _footer.sass":
pie de página + contenedor exterior borde superior: 1px sólido $ base-borde-color relleno: parte superior: 4em fondo: 4em .recent-posts + shift (2) + span-columnas (6) .footer-tags + span-column ( 2) .recent-posts, .footer-tags h3 font-size: 1.7em li font-size: 1.05em
Para tener algunos datos de prueba tangibles, agregué un par de publicaciones de ejemplo más a través del generador de intermediarios y le di un texto ficticio de lorem. A través de la terminal:
Artículo de intermediario 'Tu título de fantasía'
Probablemente debería mencionar que también necesitaba agregar una extensión ".erb" a estas nuevas publicaciones para el generador de texto de lorem ficticio. El frontmatter contiene un par de etiquetas más para jugar también..
En "fuente / publicaciones / 2015-12-01-your-fancy-title.html.markdown.erb":
--- título: Ejemplo Fecha de publicación: 2015-12-01 etiquetas: ejemplo, bourbon, neat, middleman --- Este es un artículo de ejemplo. Probablemente quieras borrarlo y escribir tus propios artículos.! <%= lorem.sentences 5 %>
El objetivo era tener al menos diez publicaciones y etiquetas para ver si todo se alinea correctamente. Veamos que tenemos aquí:
Los colores de fondo han cumplido su deber por ahora. Matémoslos y comprobemos si estamos contentos con el resultado real:
Creo que podemos dejarlo así por ahora. Es hora de cometer nuestros cambios.!
git add ... /layouts/layout.erb gco -m 'Adapta el diseño y agrega pie de página' git add ... /stylesheets/_footer.sass… /stylesheets/all.sass git commit -m 'Agrega estilos para el pie de página e importa Sass parcial' git agregar ... /posts/*.markdown.erb git commit -m 'Agrega un montón de publicaciones ficticias con: etiquetas ficticias de texto de lorem ficticias'
Antes de continuar, debemos desplegarnos en GitHub Pages, revisar nuestro progreso y asegurarnos de que no nos encontremos con ninguna sorpresa..
despliegue de intermediarios
Abra su navegador, vaya a yourusername.github.io/your_project_name y ver si estás contento con tu sitio hasta ahora.
¿Qué debemos hacer a continuación? Tienes razón, el pie de página grita en letras grandes ¡EXTRACCIÓN! Vamos a tomar el , crear una nueva carpeta para los parciales y poner el marcado allí. A su vez, necesitamos hacer eso parcial desde "source / layouts / layout.erb":
<%= yield %><%= partial "partials/footer" %>
Luego en el parcial "source / partials / _footer.erb":
Si prestó mucha atención, habrá visto que eliminé la fecha de la lista de artículos en el pie de página. Hice esto por dos razones. En primer lugar, vamos a ahorrar un poco más de espacio para que no nos encontremos fácilmente con el escenario en el que la alineación con las etiquetas se rompe cuando el título de la publicación es un poco más largo. En segundo lugar, pensé que es un poco molesto y no agrega demasiado.
Esta lista de artículos aleatorizados en el pie de página es una forma útil de presentar nuevas cosas a la audiencia. La fecha no juega un papel importante en eso. Lo mismo ocurre con la cantidad de artículos para los enlaces de etiquetas. Ellos desperdician espacio sin agregar demasiado valor. Además, si no tiene demasiados artículos para una determinada etiqueta, no se verá vacío de inmediato. Prefiero tener más espacio para un diseño estable. También se siente un poco más limpio, pero eso es completamente subjetivo..
Cometer:
git add --all git commit -m 'Extrae el pie de página en parcial Elimina la fecha de los enlaces de la publicación en el pie de página Elimina la cantidad de artículos para las etiquetas en el pie de página No proporcionó suficiente valor como para sacrificar espacio'
Mientras estamos en ello. Cuidemos la fecha en nuestros títulos índice. Creo que su tamaño es demasiado prominente, lo que no mejora nuestra jerarquía visual y no me gusta tenerlo al final del título. Prefiero pegarlo en el otro lado y usarlo como un ancla visual que no salta con diferentes longitudes de títulos.
En "source / index.html.erb":
<% page_articles.each_with_index do |article, i| %><%= article.date.strftime('%b %e') %> <%= link_to article.title, article %>
<%= article.body %> <% end %>
Y en "source / stylesheets / _index_posts.sass":
.tamaño de fuente posterior a la fecha: 0.7em margen: izquierda: em (-80px) derecha: em (20px)
El título de la publicación se reordena y comienza con el intervalo que contiene la fecha. Dejé un pequeño espacio en blanco entre el intervalo con la fecha y el título en sí, porque si alineo la fecha con el texto del cuerpo del artículo para pantallas más pequeñas, entonces tengo un espacio de un carácter natural entre la fecha y el título, y no necesito utilizar Sass innecesariamente.
El código Sass es sencillo. Los márgenes negativos me ayudan a anclar visualmente la fecha a la izquierda del título y usé una función Bourbon para convertir sus valores de píxeles en ems. Simple, pero me gusta la jerarquía que hemos logrado. Los ojos tienen algo para saltar a través de las fechas y el resto tiene suficiente espacio en blanco para que podamos evitar el uso de bordes para dividir nuestras publicaciones. Yo feliz!
Comprometerse con Git:
git add ... /index.html.erb… /stylesheets/_index_posts.sass git commit -m 'Cambia el orden de la fecha y el título de la página del índice. Estilos fecha para crear el ancla visual'
Y desplegar:
despliegue de intermediarios
Vamos a darle un poco de vida a esta cosa, pero no demasiado. ¡Menos es más! Fui a COLOURlovers y jugué con un par de paletas de colores. Tenga cuidado con las soluciones que pueden mejorar su jerarquía visual, pero manténgase alejado de los colores que son tremendamente fuertes. Me doy cuenta de que esto es vago, ya que los colores pueden ser muy subjetivos y culturalmente cargados, pero así es como lo enfoco en este momento..
En nuestras variables "source / stylesheets / base / _variables.scss":
$ matcha-green: # 78B69D; $ texto-color: oscurecer ($ gris medio, 20%);
De vuelta a los negocios; después de jugar con algunas ideas, agregué dos nuevos colores globales a mi archivo de variables Sass de Bitters. $ matcha-green Ahora es el color que deseo usar para mi identidad y, en este archivo, puedo reutilizar esta variable donde quiera. Si cambio de opinión sobre lo que quiero verde, tendré que cambiarlo una vez. Además, no estaba muy contento con el color predeterminado para el texto. Usando una función Sass, oscurecí uno de los colores predefinidos de Bitters en un 20% y lo guardé $ texto-color. Los títulos de publicación en el desplazamiento, así como las fechas y la copia del cuerpo recibieron el nuevo color de texto. El valor predeterminado era demasiado oscuro en mi opinión.
En "source / stylesheets / base_typography.scss":
// transición: color $ base-duration $ base-timing;
Y luego en "source / stylesheets / _index_posts.sass":
.tamaño de fuente del título posterior: 1.7em a + transición (color .4s facilidad de entrada) color: $ matcha-verde &: color de desplazamiento: $ texto-color .post-fecha color: $ texto-color .posts p color: $ texto-color
También agregué una ligera transición a través de un mixin Bourbon para pasar el cursor sobre .título de la entrada. Esto cambia de $ matcha-green a $ texto-color terminado .4 segundos. Revisa mis artículos sobre Bourbon Mixins si quieres saber más.
En caso de que te estés preguntando por el facilidad de entrada parte, es una de las 32 formas de medir el tiempo de comportamiento transicional. ($ facilidad de entrada, como PSLa variable, como en la documentación, arrojará un error) Es una pequeña mejora pero se ve mucho mejor que los valores predeterminados del navegador. Para hacer que esto funcione, también tuve que descomentar el comportamiento de transición predeterminado de Bitters primero en "base_typography.scss".
En "source / stylesheets / _footer.sass":
pie de página borde del borde: 1px rgba sólido ($ color de texto, .3) .puntos recientes, color de etiquetas de pie de página: se oscurece ($ gris medio, 20%) a + transición (todo .1s easy-in-out ) color: $ text-color y: hover color: $ matcha-green border-bottom: 2px solid $ matcha-green
Por último, también adapté los colores para el pie de página. Esto nos da una apariencia coherente y, con suerte, un poco de subestimación sutil. El comportamiento de transición necesitaba acelerarse para los enlaces en el pie de página. Ya que están agrupados tan estrechamente juntos, sentí que sería mejor si fueran un poco más ágiles y subrayados también..
En términos de color, hice lo opuesto como con los títulos en la lista de índice. Dado que la lista de pie de página no necesita estar tan presente en la página, especialmente con tan poca distancia entre ellos, les di el color de texto gris predeterminado y solo uso el $ matcha-green cuando se cierne. En este ejemplo, solo usamos espacios en blanco y el tamaño del tipo para lograr la jerarquía.
Ah, y el borde sobre el pie de página necesitaba un poco de opacidad a través del Sass rgba función. Pensé que el 30 por ciento de opacidad es suficiente para hacer su trabajo sin sobresalir tanto.
No tan mal aspecto, para una cantidad tan pequeña de código. Exactamente cómo me gusta: cuanto menos código escribas, menos errores hay para morderte!
Comprometerse con Git:
git add --todos git commit -m 'Primer intento de ajuste de colores Agrega un nuevo color de marca como $ matcha-green Agrega nuevo $ text-color: Copia del cuerpo Título de los postes hover Encabezados de pie de página Cuida las transiciones de hover Comentarios fuera Transición predeterminada de Bitters
## Ajustes
Una pequeña cosa más que me irrita es la altura de la línea de la copia del cuerpo. Vamos a modificar eso también. En "source / stylesheets / _index_posts.sass":
.mensajes p línea de altura: 1.35em
Cometer:
git add ... /source/stylesheets/_index_posts.sass git commit -m 'Ajusta la altura de línea para la copia del cuerpo en el índice'
Y, de nuevo, desplegar:
despliegue de intermediarios
Buen trabajo hasta ahora! Ya es hora de otro descanso. En el siguiente tutorial vamos a agregar una barra de navegación y una "unidad de héroe" en la parte superior. ¡Te veo allí! Consíguete un refrigerio y relájate un poco!
Accentsconagua