Share
Kouto Swiss es una nueva y fantástica biblioteca de mezclas para el preprocesador Stylus de CSS, creada por los desarrolladores Pierre-Antoine Delnatte y Thierry Lagasse de KRKN. Pretende ser el conjunto de herramientas estándar al que los desarrolladores de Stylus se dirigen, y después de analizar detenidamente su amplia gama de funciones, puedo decir que sin duda sería digno de ese rol..
Si no está familiarizado con Stylus o los preprocesadores de CSS, puede obtener una introducción a través de mi artículo Por qué elijo Stylus (y usted también debería).
Y mientras lo haces, mira los dos primeros videos de mi nuevo curso Conviértete en un superhéroe CSS con Stylus. Ambos son gratuitos y lo guiarán a través de qué es Stylus y cómo puede configurarse para trabajar fácilmente.
Para instalar Kouto Swiss, recomiendo primero instalar Node.js, luego ejecutar el comando npm instalar kouto-swiss a través de un terminal o indicador de comando dentro de la carpeta de su proyecto. He encontrado que esta es la forma más fácil de garantizar que se cumplan las dependencias.
Luego, agregue esta línea en la parte superior de su archivo Stylus y estará listo para comenzar:
@importar 'node_modules / kouto-swiss'
"Kouto Swiss" significa "Swiss Army Knife", y en el espíritu del famoso y pequeño emblema de la utilidad concentrada, esta biblioteca de mezclas ha agrupado muchas cosas útiles en un pequeño paquete..
Kouto Swiss cuenta con demasiadas funciones para que las cubramos todas aquí, por lo que hoy vamos a comenzar con una selección de seis de sus funciones en acción..
Incluir a Normalize.css en sus proyectos es, sugeriría, una necesidad.
Cuando utiliza un preprocesador CSS que generalmente significa encontrar una versión mantenida activamente de Normalize.css que ha sido reescrita en el idioma de su elección, descargarla en su proyecto, importarla, vigilar las actualizaciones y volver a importarlas cuando sea necesario..
Por otro lado, cuando utiliza Kouto-Swiss, no tiene que preocuparse por ninguno de esos pasos. Solo agregue una sola línea a su archivo Stylus:
normalizar()
El código completo de Normalize.css se escribirá directamente en su hoja de estilos:
Con este enfoque, solo necesita mantener su Kouto-Swiss actualizado y Normalize.css se encargará de todo junto. No hay archivos extra, paquetes o importaciones para preocuparse; todo el proceso se maneja a través de esa línea de código.
Si en realidad no te gusta usar Normalize.css y quizás prefieras el restablecimiento de CSS de Eric Meyer, hay un "liner" que puedes usar para eso también: meyer-reset ()
A menos que se adhiera a las propiedades CSS más antiguas, tendrá que usar prefijos específicos y específicos de proveedores en varias ocasiones para generar código compatible con todos los navegadores. Sin embargo, mantener los prefijos de su proveedor y las alternativas puede ser complicado, ya que los requisitos sobre dónde deben usarse siempre están cambiando..
Kouto-Swiss maneja hábilmente este problema mediante la comunicación con el sitio web Can I Use para mantener actualizados todos los prefijos y alternativas de sus proveedores. Puede agregar su propia configuración en cuanto a los navegadores y las versiones que desea admitir, o simplemente ir con los valores predeterminados que vienen de las recomendaciones "¿Puedo usar?".
No hay pasos especiales para que su código se convierta automáticamente en un navegador compatible. Simplemente escriba su código Stylus como si todas sus propiedades ya fueran universalmente compatibles:
El CSS resultante tendrá los prefijos de proveedor correctos y el código de respaldo en su lugar:
Consulte la lista completa de propiedades CSS admitidas por la funcionalidad de prefijo y respaldo del proveedor..
La capacidad relativamente nueva de generar formas con CSS3 ha sido súper útil para agregar íconos e ilustraciones básicas a los sitios de manera que se cargue rápido, sea fácil de colorear y se pueda escalar solo mediante ediciones de código.
Los triángulos CSS3 son una de las formas que se pueden crear, pero tratar de escribir el código para generarlas con el tamaño, color y ángulo que desee puede ser complicado.
Kouto-Swiss incluye un increíblemente fácil de usar triángulo() mezcla que elimina todas las pruebas y errores de la generación de triángulos, ya que simplemente le dice en qué dirección quiere que apunte el triángulo, qué tan grande debe ser y cuáles deben ser sus colores de fondo y de fondo (opcional).
Por ejemplo, soltar algunos triángulo() mixins con algunas variables de color predefinidas así:
Entonces tu creación de triángulo CSS se convierte en un paseo por el parque:
Siempre es una buena práctica incluir una pila de fuentes en contra de cada declaración de familia de fuentes en su hoja de estilo, por lo que si falta su fuente preferida, por cualquier razón, tiene algunas alternativas en su lugar. Dicho esto, descubrir qué fuentes son lo suficientemente similares entre sí para formar una buena pila puede ser un poco laborioso y difícil.
Kouto-Swiss incluye un fuente-pila () mixin que obtiene su información de pila de fuentes de cssfontstack.com, por Denis Leblanc, y le permite generar fácilmente pilas de fuentes basadas en las familias de fuentes populares.
Por ejemplo, el siguiente código Stylus:
genera estas pilas de fuentes completas:
Echa un vistazo a la lista completa de fuentes cubiertas por esta mezcla.
Kouto Swiss tiene funciones para crear cinco tipos diferentes de combinaciones de colores:
Usted alimenta la función de generación de esquema de color a semilla Colorea y almacena la información devuelta contra una variable Stylus. Se devolverán entre dos y cuatro colores, que luego puede mostrar de la siguiente manera:
En el código anterior he usado un color azul de # 3083bf y lo pasó por cada una de las cinco funciones de generación de esquemas de color, que luego generaron estos esquemas de color:
Si se cambia el color inicial, se puede generar un nuevo conjunto de esquemas de color a partir del mismo conjunto de código. Por ejemplo, cambiando a # 30bfb3 te dio:
Puede leer exactamente qué hace cada una de las funciones de generación de esquema de color en la documentación..
La animación CSS, al igual que las formas CSS, es una de las nuevas herramientas más útiles en nuestro arsenal de diseño web. Los elementos que antes hubieran necesitado Flash o JavaScript ahora pueden cobrar vida con nada más que CSS puro.
Por el momento, sin embargo, el código de animación CSS de varios navegadores necesita un mucho de prefijos de proveedores. Utilizando Kouto Swiss @keyframe La funcionalidad combinada con el prefijo de proveedor que describimos anteriormente se vuelve bastante sencillo para codificar sus animaciones. Por ejemplo, estas 29 líneas de Stylus:
genera las 232 líneas de CSS requeridas, lo que creo que estarás de acuerdo en que sería una pesadilla escribir de forma manual:
La animación resultante se ve así:
Una vez más, echa un vistazo a los documentos para leer más acerca de @keyframe Animación en Kouto Swiss..
Kouto Swiss es una excelente adición al mundo del desarrollo de CSS y le recomiendo que lo pruebe para una prueba de manejo..
Tiene una larga lista de funciones adicionales que ni siquiera hemos tocado, así que dirígete a http://kouto-swiss.io para obtener el resumen completo..
Y recuerde, si necesita un poco de ayuda para comenzar su desarrollo de Stylus, mire los dos videos gratuitos de mi curso para aprender cómo comenzar: Conviértase en un superhéroe de CSS con Stylus.
Accentsconagua