Share
Bienvenido a la cuarta parte de nuestra serie de tutoriales de diseño de temas de Ghost. En el tutorial de introducción, aprendió que hay dos etapas para diseñar un tema. Durante las entregas posteriores, comenzamos y completamos lo que llamamos "la primera etapa" de crear las plantillas de su tema. Esta cuarta parte de nuestra serie nos lleva a la siguiente etapa del diseño del tema, a saber, el estilo..
En esta parte comenzaremos a diseñar nuestra tipografía y construiremos nuestros controles de diseño. En la próxima parte continuaremos nuestro estilo bloqueando nuestra combinación de colores y sentando las bases para la respuesta del tema.
Nota: Este tutorial asume un conocimiento básico de trabajo de CSS..
Este tutorial lo llevará a través de un enfoque de diseño responsivo con el que puede no estar familiarizado. El enfoque garantiza que los diseños respondan a algo más que resoluciones de dispositivos comunes específicamente dirigidas.
En cambio, los diseños:
Esto se hace por:
Accentsconagua
em o movimiento rápido del ojo Valores, que son flexibles, y no valores de píxeles, que son inflexibles, en todo el diseño..Antes de comenzar con el estilo, agregaremos contenido de prueba de etiquetas de encabezado a su sitio de Ghost para que pueda ver cómo aparecen sus etiquetas H1 a H6..
Debe agregar el tamaño de cada encabezado una línea debajo de la otra para ver cómo funcionan cuando se colocan juntos y luego agregar cada encabezado con una línea de texto regular para ver cómo se ven en el flujo del contenido normal.
Agrega la siguiente marca en la parte superior de tu última publicación de Ghost (es posible que tengas que agregar líneas vacías entre cada línea), luego actualízalo:
¡Estas en! Bonito. Hemos reunido una pequeña publicación para presentarte al editor de Ghost y comenzar. ¡Sigue adelante y edita esta publicación para comenzar y aprender cómo funciona todo! # Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 Hemos reunido una pequeña publicación para presentarle al editor de Ghost y obtener tú empezaste. #Heading 1 Hemos reunido una pequeña publicación para presentarte al editor de Ghost y comenzar. ## Encabezado 2 Hemos reunido una pequeña publicación para presentarte al editor de Ghost y comenzar. ### Encabezado 3 Hemos reunido una pequeña publicación para presentarte al editor de Ghost y comenzar. #### Encabezado 4 Hemos reunido una pequeña publicación para presentarte al editor de Ghost y comenzar. ##### Encabezado 5 Hemos reunido una pequeña publicación para presentarte al editor de Ghost y comenzar. ###### Encabezado 6
Para ayudarlo a utilizar el flujo de trabajo más eficiente posible con la creación de su tema Ghost, he preparado un pequeño paquete de desarrollo para usted que le dará acceso a algunas herramientas realmente útiles y automatizará varias tareas para usted. Está disponible dentro de la fuente principal de descarga..
En lugar de codificar en CSS sin formato usaremos MENOS. Si eres nuevo en MENOS, puedes leerlo todo en http://lesscss.org/
El paquete GhostTheming manejará la compilación de su código MENOS, además de minimizar su CSS y escribirlo en su carpeta de temas.
También descargará y pondrá a disposición la biblioteca "LESSHat" de mixins, un fantástico recurso gratuito que hace que la producción de CSS3 en todos los navegadores sea rápida y sencilla: http://lesshat.com/
Además, descargará "normalize.css", "Modernizr", además de algunos javascript iframe de respuesta para usted, y combinará, reducirá y escribirá todo en su tema.
Normalize.css estandariza los elementos de visualización básicos en todos los navegadores. Lea más sobre esto en http://necolas.github.io/normalize.css/
Modernizr permite que los navegadores antiguos le den sentido al marcado moderno. Lea más sobre esto en http://modernizr.com/
Solo necesitas tres cosas instaladas para usar el paquete GhostTheming:
Ya tiene instalado Node.js como lo ha estado usando para ejecutar Ghost, pero es posible que deba instalar Grunt y Bower si aún no los tiene en su sistema..
Grunt.js es un corredor de tareas javascript que usaremos para automatizar la compilación MENOS y la combinación y minificación de CSS. Si aún no tiene Grunt en su sistema, puede instalarlo fácilmente a través de NPM (administrador de paquetes de nodos, una parte de node.js).
Para instalar Grunt a través de NPM, abra una terminal (en cualquier ubicación) y ejecute el siguiente comando:
npm instalar -g grunt-cli
Asegúrese de incluir el indicador "-g" ya que hará que Grunt esté disponible globalmente en su sistema, es decir, en cualquier ubicación en la que esté trabajando.
Bower.io es un excelente administrador de paquetes que le brinda fácil acceso a todos los diferentes tipos de scripts orientados al diseño web y paquetes CSS. Puedes leer más sobre esto en http://bower.io/
Al igual que Grunt, Bower también se puede instalar muy fácilmente a través de NPM.
Nota: Si aún no tiene Git instalado, deberá hacerlo antes de instalar Bower..
Las instrucciones de instalación para Git se pueden encontrar aquí: http://git-scm.com/book/en/Getting-Started-Installing-Git
Importante: Vea las instrucciones cerca de la parte inferior de la página de Bower con respecto a la instalación de Git en Windows: http://bower.io/#a-note-for-windows-users
Para instalar Bower a través de NPM, abra una terminal (en cualquier ubicación) y ejecute el siguiente comando:
npm install -g bower
Nuevamente, asegúrese de incluir el indicador "-g" para que Bower esté disponible para usted en cualquier parte de su sistema.
Después de descargar "GhostThemingPackage", extráigalo en un lugar de fácil acceso, idealmente en el mismo directorio raíz donde se encuentra la carpeta de instalación de Ghost..
Por ejemplo, si su instalación de Ghost está en C: \ Fantasma luego extraiga el paquete a su DO: Conduce también, por lo que termina en C: \ GhostThemingPackage. (No lo pongas dentro de tu carpeta de instalación de Ghost).
Debería ver la siguiente estructura de carpetas y archivos dentro de:
Cambie el nombre de la carpeta de "GhostThemingPackage" a "UberThemeStyles".
Abre una terminal dentro de la carpeta "UberThemeStyles".
Ejecuta el comando npm instalar.
Esto recuperará automáticamente los paquetes Node.js requeridos que se usarán para compilar MENOS, y para combinar y minimizar CSS y JavaScript.
Verás muchos mensajes como este mientras NPM obtiene todo:
Espere hasta que todos estos mensajes se hayan detenido y vea aparecer nuevamente el símbolo del sistema..
Ejecuta el comando instalación de la glorieta.
Al igual que en el paso anterior, esto buscará los paquetes necesarios de Bower.io; LESShat, Modernizer y Normalize.css
Una vez más, verá una serie de mensajes en su terminal: espere a que terminen y aparece el símbolo del sistema.
Verifique que ahora vea esta estructura de carpetas en su carpeta "UberThemeStyles":
Tenga en cuenta la presencia de las nuevas carpetas "bower_components" y "node_modules".
Si falta alguna subcarpeta en cualquiera de las carpetas, elimine esa carpeta y ejecute nuevamente el comando de instalación, es decir,. npm instalar para la carpeta "node_modules" o instalación de la glorieta para la carpeta "bower_components".
En su editor de código preferido, abra "Gruntfile.js" desde el directorio raíz de su carpeta "UberThemeStyles".
Este es el archivo que facilitará todas las tareas de automatización durante el proceso de diseño de su tema. Para que funcione, solo tenemos que decirle dónde tiene instalado Ghost y cuál es el nombre de su tema..
En la línea 62 y 63 localiza lo siguiente:
'ghost_location': '... / Ghost /', 'ghost_theme_name': 'YourThemeName',
Si es necesario, cambiar '… /Fantasma/' para reflejar la ruta relativa a su instalación de Ghost.
No tendrá que cambiar la configuración si su carpeta "UberThemeStyles" está en la misma carpeta raíz que su carpeta de instalación de Ghost, y tu carpeta de instalación de Ghost en realidad se llama "Ghost".
Cambie "YourThemeName" a "UberTheme".
Guarda el archivo.
Nota: Su paquete de temática ya está instalado, y puede repetir el proceso anterior en el futuro para configurar los temas adicionales que cree..
Lo primero que haremos es agregar los estilos de Normalize.css a la hoja de estilos de tu tema. Esto asegurará que nuestro tema se muestre de manera estandarizada en todos los navegadores.
Luego, estableceremos un ancho preliminar para su contenido para que sea más fácil evaluar las opciones de tipografía, y agregaremos sus estilos de tipografía fundacional.
En su terminal, (aún en su carpeta "UberThemeStyles"), ejecute el comando gruñido cssmin.
Esto tomará el archivo "normalize.css" de su carpeta "bower_components / normalize-css", lo comprimirá y lo escribirá en el archivo style.css de su tema.
Si tiene éxito, debería ver esto en su terminal:
Refresque su extremo frontal Ghost. Puede verificar que se haya agregado "normalize.css" si ve
Nota: A medida que avanzamos, realizaremos algunos ajustes en el archivo normalize.css..
Debido a que crearemos muchos de nuestros propios estilos, queremos evitar estilos duplicados para elementos como cuerpo y h1 ya que es una sobrecarga innecesaria para el navegador, así que estaremos transplantando algunos estilos de "normalize.css" a nuestros propios archivos LESS personalizados.
Antes de elegir las fuentes que usaremos en nuestro tema, estableceremos un ancho preliminar para el contenido y agregaremos algunas configuraciones básicas de tipografía. Será mucho más fácil probar y decidir las fuentes cuando estén en un espacio más estrecho y establecer el tamaño de fuente que probablemente se usará en.
Para ello vamos a empezar a editar tus archivos LESS..
Antes de comenzar a editar MENOS, si es nuevo, tómese un momento para familiarizarse con su sistema de:
No necesita una comprensión en profundidad en este punto, debería ser suficiente solo para leer la sección de apertura en la página de inicio MENOS, es decir, cada una de las secciones con títulos coincidentes a la lista de viñetas anterior.
Para ver los cambios de tu código MENOS reflejados en la parte delantera de tu sitio, vamos a activar la compilación y escritura de CSS en tu tema..
En su terminal, (aún en su carpeta "UberThemeStyles", ejecute el comando reloj gruñido.
Esto iniciará la tarea de "observación", por lo que sus archivos LESS y su archivo Normalize.css serán observados en busca de cambios. Cada vez que se detecten cambios en los archivos, LESS se compilará automáticamente y todo su CSS se combinará, se reducirá y se escribirá en el archivo "style.css" de su tema..
Nota: Cuando desee detener la tarea de "observación", vuelva a su terminal y presione CTRL + C. Cuando se le pregunte tipo y y luego presione ENTRAR.
En su editor de código preferido, abra el archivo "layout.less" de la carpeta "UberThemeStyles> LESS".
Agregue el siguiente código y luego guarde:
.wrapper_uber ancho: 100%; ancho máximo: 40em; margen: 0 auto;
Este código hace algunas cosas:
anchura Propiedad a un valor explícito. En lugar, anchura está configurado al 100%, por lo que llenará toda la ventana en cualquier dispositivo con una resolución de menos de 40 g de ancho.anchura máxima propiedad para restringir el envoltorio a no mayor que 40ems de ancho en resoluciones más grandes.em valor, no un px valor.Nota: Vamos a ajustar este ancho más adelante para una lectura óptima una vez que hayamos elegido nuestras fuentes y, por lo tanto, sepamos qué tan amplias serán nuestras letras. El valor de 40ems es solo marcador de posición.
Refresque su extremo delantero. Ahora debería haberse reducido de esta manera:
Abra el archivo "normalize.css" de la carpeta "UberThemeStyles> bower_components> normalize-css" para editar.
Comenta o borra el cuerpo, h1 y todo una estilos, (línea 76 a 121), porque vamos a escribir el nuestro y no queremos la sobrecarga de declaraciones duplicadas.
Abra el archivo "typography.less" de la carpeta "UberThemeStyles> LESS" para editarlo.
Reemplace todo el código con el siguiente código y luego guarde:
// ** // Mixins // ** .HeaderFont () font-family: @header_font; línea de altura: 1.313em; // ** // Styles // ** body margin: 0; familia de fuentes: @default_font; line-height: @golden + 0em; // establezca la altura de la línea regular en la proporción de oro a fondo: transparente; a: enlace, a: visitó a: foco contorno: delgado punteado; a: activo, a: flotar esquema: 0; // Escala tipográfica clásica: si la escala de tamaño total predeterminada de 16px sería: // 9px, 10px, 11px, 16px, 16px, 18px, 24px, 36px, 48px, 60px, 72px h1 .HeaderFont; tamaño de letra: 3em; margen: 0.563em 0; h2 .HeaderFont; tamaño de letra: 2.25em; margen: 0.625em 0; h3 .HeaderFont; tamaño de letra: 1.5em; margen: 1.313em 0; h4 .HeaderFont; tamaño de letra: 1.313em; margen: 1.313em 0; h5 .HeaderFont; tamaño de letra: 1.125em; margen: 1.313em 0; h6 .HeaderFont; tamaño de letra: 1em; margen: 0.75em 0;
Hay bastante código que hemos agregado de una vez. Déjame explicarte lo que está pasando.
Mixins
Lo primero que verás en la parte superior es el mixin. .HeaderFont (). Debido a que usaremos la misma familia de fuentes, peso de fuente y altura de línea para todas nuestras etiquetas de encabezado, hemos colocado todas las reglas de esas propiedades en una sola mezcla. Si observa el estilo de cada etiqueta de encabezado, verá el .HeaderFont () Mixin llamado en la primera línea.
De esta manera podemos actualizar la mezcla según sea necesario y todos los estilos de etiquetas de encabezado también se actualizarán automáticamente.
Variables
También notará el uso de algunas variables en el código, es decir,. @header_font, @default_font y @dorado.
El valor de cada una de estas variables se establece en el archivo "variables.less" en su carpeta "UberThemeStyles> LESS". A este archivo se accede primero durante la compilación de su código LESS, lo que significa que las variables que contiene se pueden usar en cualquiera de sus otros archivos LESS.
Utilizamos las variables. @header_font y @default_font para configurar el nombre de las fuentes que se usarán en todo el tema, de modo que sea muy fácil cambiar de una opción a otra a medida que prueba las fuentes.
los @dorado La variable representa un valor de 1.618, la proporción de oro. Este número se ha utilizado desde la época de los antiguos griegos para crear diseños hermosos en todo, desde arte hasta arquitectura, y lo usaremos en gran medida en todo el diseño..
Sumando unidades a las variables.
Es una buena práctica en MENOS definir variables numéricas sin unidades adjuntas. Esto es para permitirte realizar aritmética con sus valores..
Por ejemplo, con mi @dorado variable establecida como 1.618 Puedo hacer cosas como multiplicar ese valor, reducirlo a la mitad y así sucesivamente. Sin embargo, si lo hubiera establecido en 1.618em, tendría problemas con algunos cálculos que podría querer realizar.
Por lo tanto, siempre es mejor establecer variables como solo números, luego adjuntar unidades dentro de los estilos o combinaciones reales.
Puedes añadir unidades de la siguiente manera:
@variable + 0em
@variable + 0rem
@variable + 0%
Entonces, en pocas palabras, solo agregue la unidad que desea usar como si estuviera realizando un cálculo de suma, con un valor de cero establecido en esa unidad.
Escala tipográfica
Los tamaños de fuente están todos configurados a una escala tipográfica clásica, convertida a em en lugar de px valor, basado en el tamaño de fuente predeterminado más común que es 16px.
Al hacer esto, obtendremos el atractivo estético y la legibilidad de la escala, pero si un proveedor o usuario cambia el tamaño de fuente predeterminado a un valor distinto a 16px, la escala completa se desplazará proporcionalmente junto con él..
Márgenes de la etiqueta de encabezado
Con un estandarizado em la altura de línea basada en todos los encabezados, es importante ajustar los márgenes de cada uno para que los encabezados se vean bien y se puedan leer cuando se colocan uno debajo del otro, así como cuando se colocan en el flujo del texto regular.
Los valores utilizados en los márgenes son aquellos que personalmente he encontrado que son los mejores para cada etiqueta de encabezado. Verás el efecto de estas configuraciones en el siguiente paso..
Refresque su extremo delantero. Ahora debería verse así:
Ahora vamos a seleccionar las fuentes que se utilizarán para el encabezado y el texto regular. Crearemos el resto del diseño del tema y el diseño en torno a estas selecciones de fuentes..
En este enfoque no estamos comenzando con una maqueta de Photoshop, pero aún así debe tener una idea esencial de qué tipo de estilo general desea. Estoy optando por una combinación de colores suaves y claros, con un estilo plano pero ligeramente texturizado, por lo que quiero que sean tipografías relativamente suaves y ligeras..
Diríjase a Google Fonts y elija una fuente para sus encabezados, más una fuente para su texto regular, asegurándose de verificar cómo se ven en algunos tamaños diferentes y, si están disponibles, pesos: http://www.google.com/ fuentes /
Terminé eligiendo Oxygen para el texto del encabezado y Open Sans para el texto regular.
Una vez que haya seleccionado sus fuentes, puede agregarlas a su tema.
Abra el archivo "default.hbs" de la carpeta raíz de su tema.
Bajo la ! Estilos comente y encima del enlace a su hoja de estilo, agregue la siguiente línea y guarde:
Nota: Para crear una URL para cualquier fuente de Google:
http://fonts.googleapis.com/css?family=Font+Name + señales| símbolo: al final del nombre de la fuente, seguido de valores separados por comas, por ejemplo,. : 300,400,700,300italic, 400italic, 700italic Abra el archivo "variables.less" de la carpeta "UberThemeStyles> LESS" para editarlo.
Localiza estas dos líneas:
@default_font: Arial, Helvetica, sans-serif; @header_font: Arial, Helvetica, sans-serif;
Edítalos para leer:
@default_font: 'Open Sans', Arial, Helvetica, sans-serif; @header_font: 'Oxygen', Arial, Helvetica, sans-serif;
En su archivo "typography.less", agregue un peso de fuente de 400 a tu .HeaderFont () mezclar
.HeaderFont () font-family: @header_font; línea de altura: 1.313em; peso de la fuente: 400;
También en su archivo "typography.less", agregue un peso de fuente de 300 a tu cuerpo estilo:
cuerpo margen: 0; familia de fuentes: @default_font; line-height: @golden + 0em; // establezca la altura de la línea regular en la proporción dorada font-weight: 300;
Nota: Estos fueron los pesos que sentí que se veían mejor para estas fuentes en particular, y para el estilo ligero que busco.
Refresque su extremo delantero. Ahora debería ver las opciones de fuente en su lugar:
Antes de pasar a la parte final de nuestra serie de tutoriales, tenemos uno o dos detalles de estilo para cuidar. En la próxima entrega veremos el color y definiremos algunos valores predeterminados de diseño básicos.
