Página principal » Diseño web » Edita tus diseños CSS en el navegador con CSS George

    Edita tus diseños CSS en el navegador con CSS George

    ¿Alguna vez has querido hacer ediciones directas en su navegador sin volver a sus archivos CSS? Una solución es Chrome Developer Tools pero algunos desarrolladores Prefiero un flujo de trabajo más simple.

    Ahí es donde CSS George entra. esta gratis herramienta de edición en el navegador trabajos encima de MENOS y es iniciado por un archivo JavaScript simple.

    La mayoría de los desarrolladores prefieren un editor basado en navegador ya que no todos usan el precompilador LESS. Pero CSS George se ejecuta en un entorno MENOR que se puede instalar rápidamente a través de npm.

    Si tiene npm instalado, puede ejecutar este código simple para agregar los archivos de origen a su proyecto actual:

     npm instalar --save-dev css-george 

    O tu puedes jale la George.js expediente de GitHub donde está alojado junto con todos los demás archivos de origen. Todo el proyecto es gratuito y de código abierto para que puedas descargar una copia completa de GitHub si no quieres usar npm.

    Con el .js archivo agregado al encabezado de su sitio, puede comenzar ejecutando funciones de George directamente desde el navegador. A abrir la ventana del editor, haga clic en la tecla de tilde a la que se puede acceder desde Shift + 'ubicado en la esquina superior izquierda de la mayoría de los teclados. UNA nueva ventana Debe aparecer que se ve algo como esto:

    Desde esta pantalla, puedes editar las variables LESS Se utiliza para todo, desde colores hasta tamaños de fuente o familias de fuentes..

    Aquí es donde el plugin LESS se convierte en una necesidad Porque tienes que decirle a CSS George. qué variables incluir. Una vez que están configurados, puedes simplemente abrir el editor de navegador CSS George e ir a la ciudad.

    Espero que sea obvio que esta herramienta. no debería ser incluido en el tiempo de ejecución. A menos que específicamente desees dejar que los visitantes Editar el color y estilo de la página., Lo que en general no es una buena idea. Pero para pruebas locales, CSS George es una herramienta rara que ofrece utilidad para todos los desarrolladores frontend..

    Usted puede velo en vivo en la página de demostración de CSS George, o descargar una copia completa vía npm o desde el repositorio de GitHub.