CSS-EASY

CSS-EASY es un framework de CSS de tipo utility-first.

Funcionalidades • Instalación • ¿Como empezar? • Creditos • Autor • License

Funcionalidades

Esta versión inicial realiza las siguientes funcionalidades

• Detección de cambios en tiempo real: Siempre y cuando el directorio css-constructor y el fichero de configuración config.json estén correctamente definidos, la herramienta detecta automáticamente los cambios que guardas en tu proyecto. Ha sido optimizada para ser ágil y rápida.
• Generación de la estructura del proyecto: Al detectar cambios importantes, la herramienta genera o actualiza el fichero html_structure.json. Este archivo es una representación en JSON de la estructura de tu proyecto.
• Preparación para la optimización: El fichero html_structure.json es la base para futuros algoritmos de ofuscación y minimización de código, lo que permitirá mejorar el rendimiento de tu aplicación.

Instalación

npm install css-easy -d

¿Como empezar?

Tras instalar css-easy se tiene que configurar tu proyecto para poder ser usado de manera cómoda..Para ello le recomiendo usar el siguiente comando en el directorio raiz de tu proyecto

npx css-easy-cli

Ese comando le creará el directorio css-constructor y un fichero config.json en ese mismo directorio. Como el siguiente.:

{
  "directoryWATCH": "",
  "recursive": true,
  "cssDirectory": "",
  "cssFile": ""
}

Las rutas a modificar deberán ser relativas como si estuvieras en el directorio raiz y deberán de existir previamente o el plugin no funcionará

propiedad	¿que és?
directoryWATCH	chokidar escogerá ese directorio para estar observando constantemente los cambios en el mismo
recursive	Creo que lo eliminaré en versiones futuras. La idea era no mirar en directorios hijos... pero creo que es absurda la idea
cssDirectory	el directorio donde reside el fichero css final generado
cssFile	el fichero css donde quieres que se almacenen los estilos al generar los estilos

Ejemplo

{
  "directoryWATCH": "./src",
  "recursive": true,
  "cssDirectory": "./src/styles",
  "cssFile": "example.css"
}

Para la siguiente versión

• Generación automática de estilos: La herramienta ahora será capaz de generar y escribir estilos CSS directamente en el archivo que tú elijas, en función de los cambios detectados en tu proyecto.

• Algoritmos de ofuscación de código: Se implementarán algoritmos avanzados para ofuscar y minimizar el código, basándose en la estructura generada en el archivo html_structure.json. Esto mejorará significativamente el rendimiento de tu aplicación.

Créditos

Autor

Mayko Campos Sánchez

Licence