Más de 55 herramientas CSS: preprocesadores, complementos, editores y generadores de gradiente

Publicado: 2016-12-30

CSS significa hoja de estilo en cascada. CSS es un lenguaje de marcado utilizado con HTML para diseñar páginas web. Las páginas HTML no se ven muy bien, pero con CSS, puede hacer que se vean hermosas y atractivas. Si planea aprender Desarrollo de temas de WordPress, en primer lugar, debe aprender HTML y CSS.

Más artículos de la serie Herramientas de desarrollo de temas

  • Página principal de la serie de herramientas de desarrollo de WordPress
  • Descargue 15 libros gratuitos para dominar HTML, CSS, JavaScript, jQuery, Bootstrap y WordPress
  • Lista definitiva de más de 30 mejores extensiones de Chrome, Firefox, tutoriales y herramientas para desarrolladores web
  • 38 cursos de video gratuitos para aprender HTML, CSS, PHP, jQuery, JavaScript, Git y más

En este artículo, vamos a compartir las mejores herramientas CSS para desarrolladores principiantes y avanzados de WordPress. Si eres un principiante absoluto y no sabes nada sobre HTML o CSS, puedes descargar 38 cursos gratuitos y 15 libros electrónicos gratuitos para aprender HTML, CSS y otros lenguajes de programación desde cero.

12 herramientas CSS: preprocesadores, aplicaciones y complementos CSS

  1. Less CSS : Less es un preprocesador de CSS, lo que significa que amplía el lenguaje CSS, agregando características que permiten variables, mixins, funciones y muchas otras técnicas que le permiten hacer que CSS sea más fácil de mantener, tematizable y extensible.

  2. SASS afirma ser el lenguaje de extensión CSS de grado profesional más maduro, estable y poderoso del mundo. SASS tiene casi una década y hay un sinfín de marcos creados con Sass, incluidos Compass, Bourbon y Susy, solo por nombrar algunos.

  3. Stylus es un preprocesador de CSS, que amplía la funcionalidad de CSS normal. ofrece una potente funcionalidad lógica, la capacidad de ejecutarse a través de Node.js/JavaScript (sin Ruby), la capacidad de ejecutarse como parte de la configuración de Node.js, una sintaxis limpia y mínima pero flexible.

  4. CodeKit ($32) es una aplicación muy poderosa y popular para usuarios de MAC. CodeKit puede compilar Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown y Javascript. Ofrezca navegadores de actualización automática y, con Bower incorporado, puede instalar más de 6000 componentes con un solo clic, incluidos Bootstrap, jQuery, Modernizr, Zurb Foundation e incluso WordPress.

  5. PrePros ($ 29) : Prepros es una herramienta premium para compilar LESS, Sass, Compass, Stylus, Jade y mucho más con prefijo CSS automático. Viene con un servidor integrado para pruebas de navegador cruzado. Está disponible para Windows, Mac OS X y Linux. Ofrece prefijo automático de CSS, actualización automática del navegador, minificación de archivos, optimización de imágenes, servidor incorporado y muchos otros.

  6. Emmet : un complemento gratuito para diferentes editores de código para escribir código de forma rápida y sencilla. Emmet está escrito en JavaScript puro y funciona en diferentes plataformas: navegador web, Node.js, Microsoft WSH y Mozilla Rhino.

  7. Fire.App : una herramienta similar a CodeKit, para Windows, es fire.app (también se ejecuta en Linux y Mac). ¿Te encanta Sass/Compass pero odias la interfaz de línea de comandos? Fire.app tiene soporte Sass/Compass de primera clase al igual que nuestra Compass.app. ¡No más prefijos CSS de proveedores ni imágenes de sprites hechas a mano!. Fire.app funciona en las plataformas Mac, Linux y Windows. El proceso de instalación es tan fácil como hacer clic y arrastrar.

  8. Snippets es un programa gratuito para administrar su código. lo ayuda a organizar y reutilizar fragmentos de código en diferentes proyectos, compartir fragmentos públicamente y con su equipo. Esto está disponible para Mac y Windows.

  9. La aplicación Koala es una aplicación GUI para la compilación Less, Sass, Compass y CoffeeScript, para ayudar a los desarrolladores web a usarlos de manera más eficiente. Koala puede ejecutarse en Windows, Linux y Mac.

  10. Las ediciones de LiveReload CSS y los cambios de imagen se aplican en vivo. CoffeeScript, SASS, LESS y otros simplemente funcionan. LiveReload monitorea los cambios en el sistema de archivos. Tan pronto como guarda un archivo, se preprocesa según sea necesario y el navegador se actualiza.

  11. Scout App es una aplicación multiplataforma que pone el poder de Sass & Compass en manos de los diseñadores web. Scout ayuda a que su flujo de trabajo de CSS sea instantáneo al brindar más control, optimización y organización.

  12. Crunch 2 Crunch le permite escribir Less, Sass, CoffeeScript, Markdown*, y luego guarda automáticamente CSS, JavaScript y HTML después de realizar cambios. ¿Quieres escribir simplemente CSS? XML? ¿Haskell? ¿Código MUSH? Crunch te permite hacer eso también. Crunch 2 es un editor que te permite hacer lo que quieras. Porque Crunch te ama.

10 complementos CSS personalizados de WordPress

Si desea personalizar CSS en WordPress, puede usar muchos complementos gratuitos o funciones integradas de edición de CSS disponibles en el personalizador desde WordPress 4.7. Hemos seleccionado una lista de 10 complementos CSS gratuitos, que lo ayudan a modificar y guardar fácilmente CSS personalizado.

También puede leer este tutorial para aprender cómo editar CSS en el tema de WordPress usando las herramientas de desarrollo de Chrome y cómo agregar una flecha en los menús de WordPress con CSS sin usar jQuery o PHP.

15 generadores de degradado CSS

  1. editor de degradado colorzilla
  2. editor de degradado cssmatic
  3. generador de gradientes angrytools
  4. gradientegenerator.com/
  5. css3generator.com/
  6. generador de gradiente cssportal
  7. uigradients.com: hermosos degradados de color listos para usar
  8. gradientes lineales css3factory
  9. generador de degradado de color degradado
  10. degradado perbang RGB
  11. generador de degradado paintbycode
  12. generador de gradiente virtuososoft
  13. gradientes radiales westciv
  14. gradientes lineales westciv
  15. Generador de degradado CSS3

10 editores de CSS en línea gratuitos

  1. Editor de CSS en línea por CSS Portal
  2. laboratorios CSSdeck
  3. ScratchPad Editor HTML y CSS en tiempo real
  4. Generador de código CSS3 en línea por EnjoyCSS
  5. cssdesk
  6. jsfiddle: pruebe su JavaScript, CSS, HTML o CoffeeScript en línea
  7. Editor de CSSmate
  8. CSS embellecer y minimizar
  9. Zona de juegos HTML5, CSS3 y JavaScript de liveweave
  10. SelfCSS - Editor CSS WYSIWYG

10 extensiones de Chrome para modificar CSS

  1. CSSViewer
  2. estilobot
  3. CSS del usuario
  4. Editor de CSS en vivo
  5. Autoguardado de herramientas de desarrollo
  6. Guardar CSS
  7. Probador de diseño web receptivo
  8. Inspector receptivo
  9. Redimensionar ventana gráfica
  10. Cambiar tamaño de pestaña: diseños de pantalla dividida

Ultimas palabras

Eso es todo por esta lista de herramientas CSS para diseñadores y desarrolladores web. Puede usar estas herramientas CSS gratuitas para personalizar estilos fácilmente y guardar sus cambios. Las extensiones de Chrome son muy útiles para guardar tus ediciones de CSS, sin salir de las herramientas de desarrollo de Chrome.

Con los preprocesadores de CSS, puede escribir CSS de manera eficiente. Espero que te encanten estas herramientas. Este artículo es parte de nuestra serie de herramientas de desarrollo de temas. No olvides unirte a nuestro boletín de desarrollo de temas de WordPress para descargar el libro gratis y recibir los últimos artículos y tutoriales sobre el desarrollo de temas de WordPress.

Nota : este artículo se publicó originalmente en createwptheme.com. Lo hemos vuelto a publicar aquí con permiso.