Peste 55 de instrumente CSS: preprocesoare, pluginuri, editori și generatoare de gradient

Publicat: 2016-12-30

CSS înseamnă Cascading Stylesheet. CSS este un limbaj de marcare folosit cu HTML pentru a proiecta pagini web. Paginile HTML nu arată grozav, dar cu CSS, le puteți face să arate frumos și atractiv. Dacă intenționați să învățați Dezvoltarea temei WordPress, în primul rând, ar trebui să învățați HTML și CSS.

Mai multe articole din seria Instrumente de dezvoltare a temelor

  • Pagina principală a seriei de instrumente de dezvoltare WordPress
  • Descărcați 15 cărți gratuite pentru a stăpâni HTML, CSS, JavaScript, jQuery, Bootstrap și WordPress
  • Lista finală a celor mai bune 30 de Chrome, extensii Firefox, tutoriale și instrumente pentru dezvoltatori web
  • 38 de cursuri video gratuite pentru a învăța HTML, CSS, PHP, jQuery, JavaScript, Git și multe altele

În acest articol, vom împărtăși cele mai bune instrumente CSS pentru dezvoltatorii WordPress începători și avansați. Dacă sunteți absolut începător și nu știți nimic despre HTML sau CSS, puteți descărca 38 de cursuri gratuite și 15 cărți electronice gratuite pentru a învăța HTML, CSS și alte limbaje de programare de la zero.

12 Instrumente CSS: preprocesoare CSS, aplicații și suplimente

  1. Less CSS : Less este un pre-procesor CSS, ceea ce înseamnă că extinde limbajul CSS, adăugând caracteristici care permit variabile, mixuri, funcții și multe alte tehnici care vă permit să faceți CSS mai ușor de întreținut, temat și extensibil.

  2. SASS pretinde a fi cel mai matur, stabil și puternic limbaj de extensie CSS de grad profesional din lume. SASS are aproape un deceniu și există un număr nesfârșit de cadre construite cu Sass, inclusiv Compass, Bourbon și Susy doar pentru a numi câteva.

  3. Stylus este un preprocesoare CSS, care extind funcționalitatea CSS-ului obișnuit. oferă funcționalitate logică puternică, Abilitatea de a rula prin Node.js / JavaScript, (fără Ruby), Abilitatea de a rula ca parte a configurației Node.js, Sintaxă curată și minimă, dar flexibilă.

  4. CodeKit (32 USD) este o aplicație foarte puternică și populară pentru utilizatorii MAC. CodeKit poate compila Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown și Javascript. Oferiți browsere cu reîmprospătare automată și cu Bower încorporat, puteți instala peste 6.000 de componente cu un singur clic, inclusiv Bootstrap, jQuery, Modernizr, Zurb Foundation, chiar și WordPress.

  5. PrePros (29 USD) : Prepros este un instrument premium pentru a compila LESS, Sass, Compass, Stylus, Jade și multe altele cu prefixare automată CSS. Vine cu un server încorporat pentru testarea între browsere. Este disponibil pentru Windows, Mac OS X și Linux. Oferă prefixare automată CSS, reîmprospătare automată a browserului, minimizarea fișierelor, optimizarea imaginii, server încorporat și multe altele.

  6. Emmet : Un plugin gratuit pentru diferiți editori de cod pentru a scrie cod rapid și ușor. Emmet este scris în JavaScript pur și funcționează pe diferite platforme: browser web, Node.js, Microsoft WSH și Mozilla Rhino.

  7. Fire.App : un instrument asemănător CodeKit, pentru Windows, este fire.app (funcționează și pe Linux și Mac). Îți place Sass/Compass, dar urăști interfața cu linia de comandă? Fire.app are suport Sass/Compass de primă clasă, la fel ca și Compass.app. Gata cu prefixele CSS ale furnizorilor și imaginile sprite realizate manual! Fire.app funcționează pe platforma Mac, Linux și Windows. Procesul de instalare este la fel de ușor ca să faceți clic și să trageți.

  8. Snippets este un program gratuit pentru a vă gestiona codul. vă ajută să organizați și să reutilizați fragmente de cod în diferite proiecte, să distribuiți fragmente în mod public și cu echipa dvs. Acesta este disponibil pentru Mac și Windows.

  9. Koala App este o aplicație GUI pentru compilarea Less, Sass, Compass și CoffeeScript, pentru a ajuta dezvoltatorii web să le folosească mai eficient. Koala poate rula pe Windows, Linux și Mac.

  10. LiveReload editările CSS și modificările imaginii se aplică live. CoffeeScript, SASS, LESS și altele funcționează. LiveReload monitorizează modificările din sistemul de fișiere. De îndată ce salvați un fișier, acesta este preprocesat după cum este necesar, iar browserul este reîmprospătat.

  11. Scout App este o aplicație multiplatformă care oferă puterea Sass & Compass în mâinile designerilor web. Scout vă ajută să vă faceți fluxul de lucru CSS rapid, oferind mai mult control, optimizare și organizare.

  12. Crunch 2 Crunch vă permite să scrieți Less, Sass, CoffeeScript, Markdown* și apoi salvează automat CSS, JavaScript și HTML după ce ați făcut modificări. Vrei să scrii doar CSS simplu? XML? Haskell? MUSHCode? Crunch vă permite să faceți și asta. Crunch 2 este un editor care vă permite să faceți ceea ce doriți. Pentru că Crunch te iubește.

10 pluginuri CSS personalizate WordPress

Dacă doriți să personalizați CSS în WordPress, puteți utiliza multe plugin-uri gratuite sau funcții de editare CSS încorporate, disponibile în funcția de personalizare începând cu WordPress 4.7. Am pregătit o listă de 10 plugin-uri CSS gratuite, care vă ajută să modificați și să salvați cu ușurință CSS personalizat.

De asemenea, puteți citi acest tutorial pentru a afla Cum să editați CSS în tema WordPress folosind instrumentele pentru dezvoltatori Chrome și Cum să adăugați săgeți în meniurile WordPress cu CSS fără a utiliza jQuery sau PHP.

15 generatoare de gradient CSS

  1. editor de gradient colorzilla
  2. editor de gradient cssmatic
  3. generator de gradient angrytools
  4. gradientgenerator.com/
  5. css3generator.com/
  6. generator de gradient cssportal
  7. uigradients.com: gata de utilizare a unor gradiente de culoare frumoase
  8. gradienți liniari css3factory
  9. generator de gradient gradcolor
  10. gradient RGB perbang
  11. generator de gradient paintbycode
  12. generator de gradient virtuosoft
  13. gradienti radiali westciv
  14. gradienți liniari westciv
  15. Generator de gradient CSS3

10 editori CSS online gratuiti

  1. Editor CSS online de CSS Portal
  2. Laboratoarele CSSdeck
  3. Editor HTML și CSS în timp real ScratchPad
  4. Generator de cod CSS3 online de la EnjoyCSS
  5. cssdesk
  6. jsfiddle : testează online JavaScript, CSS, HTML sau CoffeeScript
  7. Editor CSSmate
  8. CSS Înfrumuseță și Minimizează
  9. liveweave HTML5, CSS3 și JavaScript teren de joacă
  10. SelfCSS – Editor CSS WYSIWYG

10 Extensie Chrome pentru a modifica CSS

  1. CSSViewer
  2. Stylebot
  3. CSS utilizator
  4. Editor CSS live
  5. Salvare automată a instrumentelor dezvoltatorului
  6. Salvați CSS
  7. Tester de design web receptiv
  8. Inspector receptiv
  9. Viewport Resizer
  10. Redimensionare filă – aspecte de ecran împărțit

Cuvinte finale

Asta este tot pentru această listă de instrumente CSS pentru designeri și dezvoltatori web. Puteți folosi aceste instrumente CSS gratuite pentru a personaliza cu ușurință stilurile și pentru a salva modificările. Extensiile Chrome sunt foarte utile pentru a vă salva editările CSS, fără a părăsi instrumentele pentru dezvoltatori Chrome.

Cu preprocesoarele CSS, puteți scrie CSS eficient. Sper că veți iubi aceste instrumente. Acest articol face parte din seria noastră de instrumente de dezvoltare a temelor. Nu uitați să vă alăturați Buletinului nostru informativ pentru dezvoltarea temelor WordPress pentru a descărca cartea gratuită și pentru a primi cele mai recente articole și tutoriale despre Dezvoltarea temei WordPress.

Notă : Acest articol a fost publicat inițial pe createwptheme.com, l-am republicat aici cu permisiunea.