Über 55 CSS-Tools: PreProcessors, Plugins, Editors & Gradient Generators

Veröffentlicht: 2016-12-30

CSS steht für Cascading Stylesheet. CSS ist eine Auszeichnungssprache, die zusammen mit HTML zum Entwerfen von Webseiten verwendet wird. HTML-Seiten sehen nicht gut aus, aber mit CSS können Sie sie schön und attraktiv aussehen lassen. Wenn Sie vorhaben, die Entwicklung von WordPress-Themes zu lernen, sollten Sie zunächst HTML und CSS lernen.

Weitere Artikel aus der Reihe Theme Development Tools

  • Hauptseite der WordPress-Entwicklungstools-Serie
  • Laden Sie 15 kostenlose Bücher herunter, um HTML, CSS, JavaScript, jQuery, Bootstrap und WordPress zu beherrschen
  • Ultimative Liste der über 30 besten Chrome-, Firefox-Erweiterungen, Tutorials und Tools für Webentwickler
  • 38 kostenlose Videokurse zum Erlernen von HTML, CSS, PHP, jQuery, JavaScript, Git und mehr

In diesem Artikel werden wir die besten CSS-Tools für Anfänger und fortgeschrittene WordPress-Entwickler vorstellen. Wenn Sie absoluter Anfänger sind und nichts über HTML oder CSS wissen, können Sie 38 kostenlose Kurse und 15 kostenlose E-Books herunterladen, um HTML, CSS und andere Programmiersprachen von Grund auf zu lernen.

12 CSS-Tools: CSS-Präprozessoren, Apps und Add-Ons

  1. Less CSS : Less ist ein CSS-Präprozessor, was bedeutet, dass er die CSS-Sprache erweitert und Funktionen hinzufügt, die Variablen, Mixins, Funktionen und viele andere Techniken ermöglichen, die es Ihnen ermöglichen, CSS zu erstellen, das wartbarer, themenfähiger und erweiterbar ist.

  2. SASS behauptet, die ausgereifteste, stabilste und leistungsstärkste professionelle CSS-Erweiterungssprache der Welt zu sein. SASS ist fast ein Jahrzehnt alt und es gibt eine endlose Anzahl von Frameworks, die mit Sass erstellt wurden, darunter Compass, Bourbon und Susy, um nur einige zu nennen.

  3. Stylus ist ein CSS-Präprozessor, der die Funktionalität von regulärem CSS erweitert. bietet leistungsstarke logische Funktionalität, Fähigkeit zur Ausführung über Node.js/JavaScript (kein Ruby), Fähigkeit zur Ausführung als Teil des Node.js-Setups, saubere und minimale, aber flexible Syntax.

  4. CodeKit (32 US-Dollar) ist eine sehr leistungsstarke und beliebte App für MAC-Benutzer. CodeKit kann Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown und Javascript kompilieren. Bieten Sie Browser mit automatischer Aktualisierung und mit integriertem Bower können Sie über 6.000 Komponenten mit einem einzigen Klick installieren, darunter Bootstrap, jQuery, Modernizr, Zurb Foundation und sogar WordPress.

  5. PrePros ($29) : Prepros ist ein Premium-Tool zum Kompilieren von LESS, Sass, Compass, Stylus, Jade und vielem mehr mit automatischem CSS-Präfix. Es kommt mit einem eingebauten Server für Cross-Browser-Tests. Es ist für Windows, Mac OS X und Linux verfügbar. Es bietet automatisches CSS-Präfix, automatische Browseraktualisierung, Dateiminimierung, Bildoptimierung, integrierten Server und viele andere.

  6. Emmet : Ein kostenloses Plugin für verschiedene Code-Editoren, um schnell und einfach Code zu schreiben. Emmet ist in reinem JavaScript geschrieben und funktioniert auf verschiedenen Plattformen: Webbrowser, Node.js, Microsoft WSH und Mozilla Rhino.

  7. Fire.App : Ein CodeKit-ähnliches Tool für Windows ist fire.app (es läuft auch unter Linux und Mac). Lieben Sie Sass/Compass, aber hassen Sie die Befehlszeilenschnittstelle? Fire.app hat erstklassige Sass/Compass-Unterstützung, genau wie unsere Compass.app. Keine CSS-Präfixe von Anbietern und keine manuell erstellten Sprite-Bilder mehr!. Fire.app funktioniert auf Mac-, Linux- und Windows-Plattformen. Der Installationsprozess ist so einfach wie Klicken und Ziehen.

  8. Snippets ist ein kostenloses Programm zur Verwaltung Ihres Codes. hilft Ihnen, Code-Snippets in verschiedenen Projekten zu organisieren und wiederzuverwenden, Snippets öffentlich und mit Ihrem Team zu teilen. Diese ist für Mac und Windows verfügbar.

  9. Koala App ist eine GUI-Anwendung für die Kompilierung von Less, Sass, Compass und CoffeeScript, um Webentwicklern zu helfen, diese effizienter zu nutzen. Koala kann unter Windows, Linux und Mac ausgeführt werden.

  10. LiveReload CSS-Bearbeitungen und Bildänderungen gelten live. CoffeeScript, SASS, LESS und andere funktionieren einfach. LiveReload überwacht Änderungen im Dateisystem. Sobald Sie eine Datei speichern, wird sie nach Bedarf vorverarbeitet und der Browser aktualisiert.

  11. Scout App ist eine plattformübergreifende App, die die Leistung von Sass & Compass in die Hände von Webdesignern bringt. Scout macht Ihren CSS-Workflow zum Kinderspiel, indem es mehr Kontrolle, Optimierung und Organisation bietet.

  12. Crunch 2 Crunch lässt Sie Less, Sass, CoffeeScript, Markdown* schreiben und speichert dann automatisch CSS, JavaScript und HTML, nachdem Sie Änderungen vorgenommen haben. Willst du nur einfaches CSS schreiben? XML? Haskel? MUSHCode? Mit Crunch können Sie das auch tun. Crunch 2 ist ein Editor, mit dem Sie tun können, was Sie wollen. Weil Crunch dich liebt.

10 benutzerdefinierte CSS-Plugins für WordPress

Wenn Sie CSS in WordPress anpassen möchten, können Sie viele kostenlose Plugins oder integrierte CSS-Bearbeitungsfunktionen verwenden, die seit WordPress 4.7 unter Customizer verfügbar sind. Wir haben eine Liste mit 10 kostenlosen CSS-Plugins zusammengestellt, die Ihnen helfen, benutzerdefiniertes CSS einfach zu ändern und zu speichern.

Sie können dieses Tutorial auch lesen, um zu erfahren, wie Sie CSS in WordPress-Designs mit Chrome-Entwicklertools bearbeiten und wie Sie Pfeile in WordPress-Menüs mit CSS hinzufügen, ohne jQuery oder PHP zu verwenden.

15 CSS-Gradientengeneratoren

  1. Colorzilla-Verlaufseditor
  2. cssmatischer Verlaufseditor
  3. Gradientengenerator von wütendtools
  4. gradientengenerator.com/
  5. css3generator.com/
  6. cssportal-Gradientengenerator
  7. uigradients.com: Gebrauchsfertige schöne Farbverläufe
  8. css3factory lineare Farbverläufe
  9. Gradcolor-Verlaufsgenerator
  10. perbang RGB-Verlauf
  11. Paintbycode-Gradientengenerator
  12. virtuosoft Gradientengenerator
  13. radiale westciv-gradienten
  14. westciv lineare Farbverläufe
  15. CSS3-Verlaufsgenerator

10 kostenlose Online-CSS-Editoren

  1. Online-CSS-Editor von CSS Portal
  2. CSSdeck-Labs
  3. ScratchPad Echtzeit-HTML- und CSS-Editor
  4. Online-CSS3-Code-Generator von EnjoyCSS
  5. cssdesk
  6. jsfiddle : Testen Sie Ihr JavaScript, CSS, HTML oder CoffeeScript online
  7. CSSmate-Editor
  8. CSS verschönern und verkleinern
  9. liveweave HTML5-, CSS3- und JavaScript-Spielplatz
  10. SelfCSS – WYSIWYG-CSS-Editor

10 Chrome-Erweiterung zum Ändern von CSS

  1. CSSViewer
  2. Stylebot
  3. Benutzer-CSS
  4. Live-CSS-Editor
  5. Automatisches Speichern der Entwicklertools
  6. CSS speichern
  7. Responsive Webdesign-Tester
  8. Reaktionsschneller Inspektor
  9. Viewport-Resizer
  10. Registerkartengröße ändern – geteilte Bildschirmlayouts

Letzte Worte

Das ist alles für diese Liste von CSS-Tools für Webdesigner und Entwickler. Sie können diese kostenlosen CSS-Tools verwenden, um Stile einfach anzupassen und Ihre Änderungen zu speichern. Chrome-Erweiterungen sind sehr nützlich, um Ihre CSS-Bearbeitungen zu speichern, ohne die Chrome-Entwicklertools verlassen zu müssen.

Mit CSS-Präprozessoren können Sie CSS effizient schreiben. Ich hoffe, Sie werden diese Tools lieben. Dieser Artikel ist Teil unserer Themenentwicklungs-Tools-Reihe. Vergessen Sie nicht, unseren Newsletter zur Entwicklung von WordPress-Themes zu abonnieren, um ein kostenloses Buch herunterzuladen und die neuesten Artikel und Tutorials über die Entwicklung von WordPress-Themes zu erhalten.

Hinweis : Dieser Artikel wurde ursprünglich auf createwptheme.com veröffentlicht. Wir haben ihn hier mit Genehmigung erneut veröffentlicht.