Plus de 55 outils CSS : préprocesseurs, plugins, éditeurs et générateurs de dégradés

Publié: 2016-12-30

CSS signifie feuille de style en cascade. CSS est un langage de balisage utilisé avec HTML pour concevoir des pages Web. Les pages HTML n'ont pas fière allure, mais avec CSS, vous pouvez les rendre belles et attrayantes. Si vous envisagez d'apprendre le développement de thèmes WordPress, vous devez tout d'abord apprendre le HTML et le CSS.

Plus d'articles de la série Outils de développement de thème

  • Page principale de la série d'outils de développement WordPress
  • Téléchargez 15 livres gratuits pour maîtriser HTML, CSS, JavaScript, jQuery, Bootstrap et WordPress
  • Liste ultime des 30+ meilleures extensions Chrome, Firefox, tutoriels et outils pour les développeurs Web
  • 38 cours vidéo gratuits pour apprendre HTML, CSS, PHP, jQuery, JavaScript, Git et plus

Dans cet article, nous allons partager les meilleurs outils CSS pour les développeurs WordPress débutants et avancés. Si vous êtes un débutant absolu et que vous ne connaissez rien au HTML ou au CSS, vous pouvez télécharger 38 cours gratuits et 15 ebooks gratuits pour apprendre le HTML, le CSS et d'autres langages de programmation à partir de zéro.

12 outils CSS : préprocesseurs CSS, applications et modules complémentaires

  1. Less CSS : Less est un pré-processeur CSS, ce qui signifie qu'il étend le langage CSS, en ajoutant des fonctionnalités qui permettent des variables, des mixins, des fonctions et de nombreuses autres techniques qui vous permettent de rendre le CSS plus maintenable, thématique et extensible.

  2. SASS prétend être le langage d'extension CSS de qualité professionnelle le plus mature, le plus stable et le plus puissant au monde. SASS a presque dix ans et il existe un nombre infini de frameworks construits avec Sass, notamment Compass, Bourbon et Susy, pour n'en nommer que quelques-uns.

  3. Stylus est un préprocesseur CSS, qui étend les fonctionnalités du CSS standard. offre des fonctionnalités logiques puissantes, Capacité à s'exécuter via Node.js / JavaScript, (pas de Ruby), Capacité à s'exécuter dans le cadre de la configuration de Node.js, Syntaxe propre et minimale mais flexible.

  4. CodeKit (32 $) est une application très puissante et populaire pour les utilisateurs de MAC. CodeKit peut compiler Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown & Javascript. Offrez des navigateurs à actualisation automatique et avec Bower intégré, vous pouvez installer plus de 6 000 composants en un seul clic, notamment Bootstrap, jQuery, Modernizr, Zurb Foundation et même WordPress.

  5. PrePros (29 $) : Prepros est un outil premium pour compiler LESS, Sass, Compass, Stylus, Jade et bien plus encore avec le préfixage CSS automatique. Il est livré avec un serveur intégré pour les tests multi-navigateurs. Il est disponible pour Windows, Mac OS X et Linux. Il offre le préfixage CSS automatique, l'actualisation automatique du navigateur, la minification des fichiers, l'optimisation des images, le serveur intégré et bien d'autres.

  6. Emmet : Un plugin gratuit pour différents éditeurs de code pour écrire du code rapidement et facilement. Emmet est écrit en JavaScript pur et fonctionne sur différentes plates-formes : navigateur Web, Node.js, Microsoft WSH et Mozilla Rhino.

  7. Fire.App : Un outil de type CodeKit, pour Windows, est fire.app (il fonctionne également sur Linux et Mac). Vous aimez Sass/Compass mais vous détestez l'interface de ligne de commande ? Fire.app a un support Sass/Compass de première classe, tout comme notre Compass.app. Plus de préfixes CSS de fournisseurs et d'images de sprites artisanales !. Fire.app fonctionne sur les plates-formes Mac, Linux et Windows. Le processus d'installation est aussi simple que de cliquer et de faire glisser.

  8. Snippets est un programme gratuit pour gérer votre code. vous aide à organiser et à réutiliser des extraits de code dans différents projets, à partager des extraits publiquement et avec votre équipe. Ceci est disponible pour Mac et Windows.

  9. Koala App est une application graphique pour la compilation Less, Sass, Compass et CoffeeScript, pour aider les développeurs Web à les utiliser plus efficacement. Koala peut fonctionner sous Windows, Linux et Mac.

  10. Les modifications CSS LiveReload et les modifications d'image s'appliquent en direct. CoffeeScript, SASS, LESS et d'autres fonctionnent tout simplement. LiveReload surveille les changements dans le système de fichiers. Dès que vous enregistrez un fichier, il est prétraité selon les besoins et le navigateur est actualisé.

  11. Scout App est une application multiplateforme qui met la puissance de Sass & Compass entre les mains des concepteurs de sites Web. Scout vous aide à faire de votre flux de travail CSS un jeu d'enfant en offrant plus de contrôle, d'optimisation et d'organisation.

  12. Crunch 2 Crunch vous permet d'écrire Less, Sass, CoffeeScript, Markdown*, puis enregistre automatiquement CSS, JavaScript et HTML après avoir apporté des modifications. Vous voulez écrire du CSS tout simplement ? XML ? Haskell ? Code MUSH ? Crunch vous permet de le faire aussi. Crunch 2 est un éditeur qui vous permet de faire ce que vous voulez. Parce que Crunch vous aime.

10 plugins WordPress CSS personnalisés

Si vous souhaitez personnaliser le CSS dans WordPress, vous pouvez utiliser de nombreux plugins gratuits ou des fonctionnalités d'édition CSS intégrées disponibles sous le personnalisateur depuis WordPress 4.7. Nous avons organisé une liste de 10 plugins CSS gratuits, qui vous aident à modifier et à enregistrer facilement des CSS personnalisés.

Vous pouvez également lire ce didacticiel pour savoir comment modifier le CSS dans le thème WordPress à l'aide des outils de développement Chrome et comment ajouter une flèche dans les menus WordPress avec CSS sans utiliser jQuery ou PHP.

15 générateurs de dégradés CSS

  1. éditeur de dégradé colorzilla
  2. éditeur de dégradé cssmatic
  3. Générateur de gradients d'Angrytools
  4. gradientgenerator.com/
  5. css3generator.com/
  6. générateur de dégradé cssportal
  7. uigradients.com : de superbes dégradés de couleurs prêts à l'emploi
  8. dégradés linéaires css3factory
  9. générateur de dégradé gradcolor
  10. dégradé RVB perbang
  11. générateur de dégradé paintbycode
  12. générateur de dégradé virtuosoft
  13. gradients radiaux westciv
  14. dégradés linéaires westciv
  15. Générateur de dégradés CSS3

10 éditeurs CSS en ligne gratuits

  1. Éditeur CSS en ligne par CSS Portal
  2. Laboratoires CSSdeck
  3. Éditeur HTML et CSS en temps réel ScratchPad
  4. Générateur de code CSS3 en ligne par EnjoyCSS
  5. cssdesk
  6. jsfiddle : Testez votre JavaScript, CSS, HTML ou CoffeeScript en ligne
  7. Éditeur CSSmate
  8. CSS embellir et minifier
  9. aire de jeux liveweave HTML5, CSS3 et JavaScript
  10. SelfCSS – Éditeur CSS WYSIWYG

10 Chrome Extension pour modifier le CSS

  1. CSSViewer
  2. Stylebot
  3. CSS de l'utilisateur
  4. Éditeur CSS en direct
  5. Enregistrement automatique des outils de développement
  6. Enregistrer CSS
  7. Testeur de conception Web réactive
  8. Inspecteur réactif
  9. Redimensionneur de fenêtre
  10. Redimensionnement des onglets - dispositions d'écran partagé

Derniers mots

C'est tout pour cette liste d'outils CSS pour les concepteurs et les développeurs Web. Vous pouvez utiliser ces outils CSS gratuits pour personnaliser facilement les styles et enregistrer vos modifications. Les extensions Chrome sont très utiles pour enregistrer vos modifications CSS, sans quitter les outils de développement Chrome.

Avec les préprocesseurs CSS, vous pouvez écrire du CSS efficacement. J'espère que vous allez adorer ces outils. Cet article fait partie de notre série d'outils de développement de thème. N'oubliez pas de vous inscrire à notre newsletter sur le développement de thèmes WordPress pour télécharger gratuitement le livre et recevoir les derniers articles et tutoriels sur le développement de thèmes WordPress.

Remarque : Cet article a été initialement publié sur createwptheme.com, nous l'avons republié ici avec permission.