Share
A lo largo de esta serie, hemos pasado por muchas categorías diferentes de complementos de PostCSS, que ofrecen todo tipo de ventajas diferentes para su desarrollo de CSS. Pero algunos de los mejores complementos de PostCSS no encajan en las categorías que hemos cubierto en nuestras entradas de la serie anterior.
En este tutorial, aprenderá acerca de cinco de estas "golosinas misceláneas". Cubriremos:
Vamos a empezar!
Como siempre, lo primero que deberá hacer es configurar su proyecto para usar Gulp o Grunt, según sus preferencias. Si aún no tiene una preferencia por uno u otro, recomiendo usar Gulp, ya que necesitará menos código para lograr los mismos fines, por lo que le resultará un poco más sencillo trabajar con.
Puede leer acerca de cómo configurar proyectos Gulp o Grunt para PostCSS en los tutoriales anteriores
respectivamente.
Sin embargo, si no desea configurar manualmente su proyecto desde cero, puede descargar los archivos de origen adjuntos a este tutorial y extraer el proyecto de inicio provisto de Gulp o Grunt en una carpeta de proyecto vacía. Luego, con un terminal o indicador de comando apuntando a la carpeta, ejecute el comando npm instalar.
Ahora necesitaremos instalar cinco complementos en tu proyecto. Ya sea que esté utilizando Gulp o Grunt, ejecute el siguiente comando dentro de la carpeta de su proyecto para instalar los complementos que usaremos:
npm instalando postcss-colorblind postcss-pxtorem postcss-style-guide --save-dev
Además de estos cinco, también usaremos rtlcss, pero como funciona de manera un poco diferente a otros complementos de PostCSS, lo usaremos a través de sus correspondientes complementos Gulp o Grunt..
Si usa Gulp, instale gulp-rtlcss con el comando:
npm instala gulp-rtlcss gulp-rename --save-dev
Y si usa Grunt, instale grunt-rtlcss con el comando:
npm install grunt-rtlcss --save-dev
Ahora estamos listos para cargar los complementos en su proyecto..
Si está utilizando Gulp, agregue estas variables debajo de las variables que ya están en el archivo:
Accentsconagua
var perdido = requiere ('perdido'); var colorblind = require ('postcss-colorblind'); var pxtorem = require ('postcss-pxtorem'); var styleGuide = require ('postcss-style-guide'); var rtlcss = require ('gulp-rtlcss'); var rename = require ('gulp-rename');Ahora agregue cada uno de esos nuevos nombres de variables en su procesadores formación:
procesors var = [perdido, // colorblind, pxtorem, styleGuide];
Nota: Color Blind Se comenta, lo cual se explicará más adelante..
Haz una prueba rápida de que todo está funcionando ejecutando el comando trago css luego verifique que haya aparecido un nuevo archivo "style.css" en la carpeta "dest" de su proyecto.
Si estás usando Grunt, actualiza el procesadores objeto, que está anidado bajo la opciones objeto, a lo siguiente:
procesadores: [require ('lost') (), // require ('postcss-colorblind') (), require ('postcss-pxtorem') (), require ('postcss-style-guide') ()]Nota: require ('postcss-colorblind') (), Se comenta, lo cual se explicará más adelante..
Haz una prueba rápida de que todo está funcionando ejecutando el comando Grueso Postcss luego verifique que haya aparecido un nuevo archivo "style.css" en la carpeta "dest" de su proyecto.
Lost es un sistema de generación de grillas basado completamente en PostCSS por Cory Simmons, el creador de Jeet, otro sistema de grilla muy exitoso escrito en Stylus. Tiene una larga lista de características impresionantes, pero su implementación es muy sencilla..
Comience por crear un archivo llamado "index.html" en su carpeta "dest". Estaremos configurando un diseño de cuadrícula básico en este archivo. Agregue el siguiente código:
Área principal
Barra lateral
Luego agregue este código a su "src / style.css" para configurar un diseño de cuadrícula básico de dos columnas, con una columna de área principal y una columna de barra lateral:
@lost gutter 1.618rem; .row centro perdido: 75rem; .main columna perdida: 3/5; .sidebar columna perdida: 2/5;
Vamos a desglosar lo que hemos hecho aquí..
Primero, hemos usado un @perdió at-rule para establecer nuestro propio valor para una de las opciones de Lost: tamaño de canal. Por defecto, los canales (espacios entre columnas) son 30px. Siempre me gusta usar 1.618rem para espaciar los diseños, así que he establecido que sea el nuevo tamaño de canal con la línea @lost gutter 1.618rem;.
A continuación, hemos configurado una .fila Clase que envolveremos alrededor de nuestras columnas. Esto solo requiere el uso de la propiedad. centro perdido y especificando un ancho para la fila. El plugin se encargará de establecer un anchura máxima En la clase, centrándola y despejándola..
Después de eso, en el .principal y .barra lateral Clases, hemos creado nuestras columnas..
Perdido no te restringe a trabajar con un número predeterminado de columnas como doce o dieciséis; Puede tener cualquier número de columnas que desee. Los anchos de columna se determinan usando la propiedad columna perdida y establecer una fracción como el valor. En nuestro código el .principal clase utiliza un ajuste de 3/5 por lo que tomará 3 de 5 columnas, y la .barra lateral usos 2/5 por lo que tomará 2 de 5 columnas.
Compile su archivo y en su archivo "dest / style.css" ahora debería ver este código:
.fila * zoom: 1; ancho máximo: 75rem; margen izquierdo: auto; margen derecho: auto; .row: antes de contenido: "; display: table; .row: después de contenido:"; pantalla: tabla; Limpia los dos; .main ancho: calc (99.99% * 3/5 - (1.618rem - 1.618rem * 3/5)); .main: nth-child (n) float: left; margen derecho: 1.618rem; claro: ninguno; .main: last-child margin-right: 0; .main: nth-child (5n) margin-right: 0; .main: nth-child (5n + 1) clear: left; .sidebar ancho: calc (99.99% * 2/5 - (1.618rem - 1.618rem * 2/5)); .sidebar: nth-child (n) float: left; margen derecho: 1.618rem; claro: ninguno; .sidebar: last-child margin-right: 0; .sidebar: nth-child (5n) margin-right: 0; .sidebar: nth-child (5n + 1) clear: left;
Y cuando se ve en un navegador, su archivo "dest / index.html" ahora debe presentar un diseño de dos columnas como este:
Es un poco difícil ver exactamente qué está pasando con nuestra cuadrícula aquí, que es la razón por la que Perdido también proporciona utilidad perdida: editar; para resaltar su cuadrícula para una fácil visualización durante el desarrollo.
Agregue esto a cada una de las clases que hemos creado hasta ahora:
.fila centro perdido: 75rem; utilidad perdida: editar; .main columna perdida: 3/5; utilidad perdida: editar; .sidebar columna perdida: 2/5; utilidad perdida: editar;
Ahora, cuando recompiles y actualices tu página, deberías ver tu cuadrícula resaltada así:
Hagámoslo todo un poco más claro para verlo de nuevo con un estilo adicional (lo que también nos ayudará con las secciones posteriores de este tutorial). Actualice su archivo "src / style.css" a la siguiente, agregando un par de extras como el relleno dentro de las columnas y algunos colores de fondo y texto:
@lost gutter 1.618rem; * box-sizing: border-box; html, cuerpo altura: 100%; margen: 0; Familia tipográfica: "Open Sans"; html relleno: 0; body padding: 1.618rem; fondo: # 16a085; .row centro perdido: 75rem; .main, .sidebar padding: 1.618rem; min-height: 500px; .main columna perdida: 3/5; fondo: blanco; color: # 232323; .sidebar columna perdida: 2/5; fondo: # 2c3e50; color blanco;
Vuelva a compilar su CSS y vuelva a cargar su página y ahora debería tener un diseño clásico de dos columnas como este:
Lo que hemos cubierto aquí solo roza la superficie de lo que se puede hacer con Lost, así que asegúrese de leer sobre el resto de las características en: https://github.com/corysimmons/lost
La ceguera al color afecta a una porción más grande de los visitantes de su sitio de lo que podría pensar. Por ejemplo, el tipo más común de ceguera al color es la deuteranomalía, que afecta al 6% de todos los hombres y al 0,4% de las mujeres. Para poner eso en perspectiva, se estima que IE9 y IE10 combinados se utilizan en alrededor del 4% de todo el tráfico web. Uno podría sugerir que si podemos dedicar una cantidad significativa de tiempo a la compatibilidad con navegadores específicos, podemos dedicar la misma cantidad de tiempo a las personas de apoyo..
El complemento postcss-colorblind de Brian Holt ayuda de manera inconmensurable a evaluar qué tan accesible es un diseño para personas con diversas formas de ceguera al color, ya que le permite ver por sí mismo cómo se verían sus combinaciones de colores si tuviera la misma percepción visual. Le permite generar versiones de su hoja de estilo que simulan ocho tipos diferentes de ceguera al color. Veamos como puedes usarlo..
Primero, agregaremos algunos colores adicionales a nuestro diseño hasta ahora para ayudarnos a ver más claramente el efecto de las diferentes hojas de estilo que estamos a punto de generar. Agregaremos cinco mosaicos de "estilo metro", agregando el siguiente html debajo de la fila que ya tenemos en nuestro archivo "dest / index.htm":
Esto es un azulejoEsto es un azulejoEsto es un azulejoEsto es un azulejoEsto es un azulejo
Ahora agregue el siguiente código a su archivo "src / style.css" para diseñar estos mosaicos con cinco colores diferentes:
.fila margen inferior: 1.618rem; .tile columna perdida: 1/5; relleno: 3.75rem 1.618rem; text-align: center; tamaño de letra: 1.25rem; color blanco; .tile: nth-of-type (1) background: # f39c12; .tile: nth-of-type (2) background: # c0392b; .tile: nth-of-type (3) background: # 8e44ad; .tile: nth-of-type (4) background: # 2980b9; .tile: nth-of-type (5) background: # d35400;
Después de la compilación, debería ver que su archivo ahora se ve así en un navegador:
Usted puede haber notado que cuando configuramos nuestro procesadores matriz anterior la entrada para Color Blind fue comentado Esto se debe a que, tan pronto como el complemento esté activo, aplicará una simulación de colorblind a su hoja de estilo, por lo que no querrá activarlo hasta que esté listo para usarlo. Descoméntalo en el procesadores matriz ahora.
Para simular cualquiera de los ocho tipos de daltonismo, pase la opción método para este complemento en su Gulpfile o Gruntfile, junto con el nombre del tipo de dalton de color que desea verificar.
Por ejemplo, para simular la deuteranomalía, establezca esta opción:
/ * Gulpfile * / colorblind (method: 'deuteranomaly'), / * Gruntfile * / require ('postcss-colorblind') (method: 'deuteranomaly')Ahora, vuelva a compilar su hoja de estilo y actualice su página y verá su diseño como lo hace una persona con deuteranomalía:
Notarás que los colores se ven notablemente diferentes. Una persona con deuteranomalía ve el rojo y el verde de manera diferente, por lo que si bien se da cuenta de que el azul es casi el mismo, los rojos y los verdes son muy diferentes..
Para visualizar protanopia configura esta opción:
/ * Gulpfile * / colorblind (method: 'protanopia'), / * Gruntfile * / require ('postcss-colorblind') (method: 'protanopia')Recompila tu hoja de estilo y ahora verás esto:
Una persona con protanopia esencialmente no ve rojo, y ve verde de una manera diferente. Notará de nuevo que los azules fuertes no se afectan demasiado, pero el púrpura se ha vuelto azul puro, y los colores restantes se han convertido en variaciones de los mismos colores amarillentos parduzcosos. Se ha vuelto muy difícil distinguir los azulejos rojos y dos de color naranja entre sí..
Esta capacidad de generar todos los diferentes tipos de simulaciones de colores ciegos es increíblemente perspicaz y nos ayuda a garantizar que los esquemas de color que hemos elegido no se basen en la percepción de un tono particular y, por lo tanto, sean accesibles para todos..
Lea más acerca de postcss-colorblind en: https://github.com/btholt/postcss-colorblind
En casi todos los diseños, hay muy buenas razones para la movimiento rápido del ojo Unidad para desempeñar un papel destacado. Sin embargo es difícil pensar en movimiento rápido del ojo Unidades, y mucho más fáciles de pensar en ellas. px unidades al crear diseños. El complemento postcss-pxtorem ayuda con este speedbump, al convertir automáticamente px unidades para movimiento rápido del ojo unidades.
El complemento utiliza una lista blanca de propiedades a las que se aplica, por lo que de forma predeterminada px las unidades se convertirán a movimiento rápido del ojo cuando se utiliza en:
Puede agregar propiedades adicionales a esta lista blanca estableciendo un prop_white_list opción. Actualice su Gulpfile o Gruntfile para agregar el anchura propiedad como tal:
/ * Gulpfile * / pxtorem (prop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing']), / * Gruntfile * / require ('postcss- pxtorem ') (prop_white_list: [' width ',' font ',' font-size ',' line-height ',' letter-spacing ']),Ahora agregue el siguiente código a su archivo "src / style.css" para que podamos probar el proceso de conversión:
.convert_this width: 500px; tamaño de fuente: 18px;
Compile su archivo y en su archivo "dest / style.css" ahora debería ver el resultado movimiento rápido del ojo valores:
.convert_this width: 31.25rem; tamaño de letra: 1.125rem;
Lea más sobre postcss-pxtorem en: https://github.com/cuth/postcss-pxtorem
Si está atendiendo a una audiencia global, es posible que deba proporcionar soporte para los scripts que se leen de derecha a izquierda en lugar de izquierda a derecha, como el árabe y el hebreo, por ejemplo. Cuando se invierte la orientación del script, también debe hacerlo el diseño de su sitio para que todo el diseño tenga sentido para aquellos que miran primero el lado derecho de la pantalla..
El complemento rtlcss de Mohammad Younes facilita mucho el proceso de creación de un diseño de derecha a izquierda, ya que puede escanear automáticamente su hoja de estilo y convertir su orientación, cambiando la palabra "izquierda" por "derecha" y viceversa..
Este complemento en realidad funciona de manera un poco diferente a otros complementos de PostCSS, ya que no podemos agregarlo a nuestro procesadores formación. En cambio, durante la configuración de nuestro proyecto, instalamos los complementos Gulp y Grunt para rtlcss, y vamos a configurar tareas separadas para ejecutarlo..
Si usa Gulp, agregue este código a su Gulpfile:
gulp.task ('rtl', function () return gulp.src ('./ dest / style.css') .pipe (rtlcss ()) .pipe (rename (suffix: '-rtl')). pipe (gulp.dest ('./ dest')););Si usa Grunt, agregue esta línea después de su actual grunt.loadNpmTasks línea:
grunt.loadNpmTasks ('grunt-rtlcss');A continuación, agregue una coma , despues de ti postcss tarea, y pegar en este nuevo rtlcss tarea:
rtlcss: 'default': dest: 'dest / style-rtl.css', src: 'dest / style.css'
Ahora, si usas Gulp ejecuta el comando trago rtl, y si usas Grunt ejecuta el comando gruñidos rtlcss para generar una hoja de estilo de derecha a izquierda llamada "style-rtl.css" en su carpeta "dest".
Edite su archivo "dest / index.html" para cargar "style-rtl.css" en lugar de "style.css", actualice su sitio, y debería ver que su diseño ha sido volteado:
Notará que el texto aún está alineado a la izquierda, pero esto puede remediarse fácilmente simplemente agregando alineación de texto: izquierda; en su hoja de estilo predeterminada, que rtlcss se convertirá a text-align: right;.
Lea más sobre rtlcss y sus contrapartes de Gulp y Grunt en:
El plugin postcss-style-guide es una herramienta fantástica creada por Masaaki Morishita. Te permite generar una guía de estilo automáticamente basada en tu hoja de estilo. Todo lo que tiene que hacer es agregar algunos comentarios a su CSS, y esos comentarios se analizarán como Markdown y se utilizarán para completar su guía de estilo..
Lo primero que vamos a hacer es configurar un par de opciones para nuestra guía de estilo. Vamos a establecer el nombre de nuestro proyecto para que se muestre en el encabezado de la guía de estilo, y también usaremos un tema personalizado llamado 1column.
Para instalar el tema personalizado que usaremos en su proyecto, ejecute el comando:
npm install psg-theme-1column --save-dev
Ahora actualice su Gulpfile o Gruntfile para pasar un nombre y tema opciones de la siguiente manera:
/ * Gulpfile * / styleGuide (name: 'Auto Style Guide', tema: '1column') / * Gruntfile * / require ('postcss-style-guide') (name: 'Auto Style Guide', tema: '1columna')La forma en que funciona postcss-styleguide es que buscará sus comentarios en su hoja de estilo y convertirá cada uno de los que encuentre en una entrada de stylguide. Se asumirá que cualquier comentario se relaciona con el CSS que lo sigue, hasta llegar a otro comentario o al final del documento..
Por esta razón, cualquier CSS que desee mostrar en su guía de estilo debe moverse al final de su hoja de estilo. Vamos a hacer que nuestros azulejos de colores aparezcan en la guía de estilo, así como una h1 Elemento, por lo que necesitaremos que ambos estén al final de nuestro documento..
Comience moviendo todas las clases que afectan a nuestros mosaicos hasta la parte inferior de su hoja de estilos; Eso es .azulejo clase y los cinco .azulejo: nth-of-type () estilos Luego también agrega un pequeño código para controlar h1 elementos para que la parte inferior de su hoja de estilo se vea así (la .azulejo: nth-of-type () los estilos no se muestran para ahorrar espacio):
h1 font-size: 42px; .tile columna perdida: 1/5; relleno: 3.75rem 1.618rem; text-align: center; tamaño de letra: 1.25rem; color blanco;
Ahora podemos agregar algunos comentarios para describir estos estilos. Cualquier html agregado en estos comentarios se representará como html en la guía de estilo, y el CSS que sigue a un comentario aparecerá en un cuadro de visualización.
Agregue algunos comentarios a su hoja de estilo describiendo el h1 estilo y el .azulejo clase, e incluyendo algunos ejemplos html, por lo que terminas con lo siguiente:
/ * Este es el estilo h1Título 1
* / h1 font-size: 42px; / * Estos usan la clase .tile* / .tile columna perdida: 1/5; relleno: 3.75rem 1.618rem; text-align: center; tamaño de letra: 1.25rem; color blanco;Esto es un azulejoEsto es un azulejoEsto es un azulejoEsto es un azulejoEsto es un azulejo
Ahora compile su hoja de estilo, busque en la carpeta raíz de su proyecto y abra el archivo "styleguide.html" que encontrará en un navegador:
Hola presto, guía de estilo instantánea!
En este momento parece un poco raro porque ha recogido el color de fondo del cuerpo verde de nuestra hoja de estilos. Lo que queremos es que nuestro contenido esté en un fondo blanco, y podemos obtener la guía de estilo para recoger algún otro código de nuestra hoja de estilo para que esto suceda..
El área central de esta plantilla de estilo utiliza un sección elemento, entonces encima el comentario describiendo tu h1 Elemento, añade este código:
sección relleno: 1rem; fondo: blanco;
Recompila tu código, actualiza tu guía de estilo y verás que ahora está usando el estilo que acabamos de agregar a sección Elementos y se ve así:
Ahi mucho mejor.
Lea más acerca de postcss-style-guide en: https://github.com/morishitter/postcss-style-guide
Resumiendo todo lo que hemos cubierto anteriormente:
px unidades, pero se han convertido automáticamente a movimiento rápido del ojo unidades durante el procesamiento.En la instalación siguiente y final de este PostCSS Deep Dive, aprenderá cómo desbloquear una de las mayores ventajas que ofrece PostCSS; siendo esa la capacidad de usarlo para crear cualquier tipo de funcionalidad que desee.
Aprenderás cómo hacer tu propio complemento básico, y desde esa base, con suerte, podrás hacer muchos más complementos para cualquier necesidad que pueda surgir en el futuro..
Te veo en el tutorial final!
