Oltre 55 strumenti CSS: preprocessori, plugin, editor e generatori di gradienti

Pubblicato: 2016-12-30

CSS sta per Cascading Stylesheet. CSS è un linguaggio di markup utilizzato con HTML per progettare pagine web. Le pagine HTML non hanno un bell'aspetto, ma con i CSS puoi renderle belle e attraenti. Se hai intenzione di imparare lo sviluppo di temi WordPress, prima di tutto dovresti imparare HTML e CSS.

Altri articoli della serie Strumenti di sviluppo temi

  • Pagina principale della serie di strumenti di sviluppo WordPress
  • Scarica 15 libri gratuiti per padroneggiare HTML, CSS, JavaScript, jQuery, Bootstrap e WordPress
  • Elenco definitivo di oltre 30 migliori Chrome, estensione per Firefox, tutorial e strumenti per sviluppatori Web
  • 38 corsi video gratuiti per imparare HTML, CSS, PHP, jQuery, JavaScript, Git e altro

In questo articolo, condivideremo i migliori strumenti CSS per sviluppatori WordPress principianti e avanzati. Se sei un principiante assoluto e non sai nulla di HTML o CSS, puoi scaricare 38 corsi gratuiti e 15 ebook gratuiti per imparare da zero HTML, CSS e altri linguaggi di programmazione.

12 Strumenti CSS: preprocessori CSS, app e componenti aggiuntivi

  1. Less CSS : Less è un preprocessore CSS, il che significa che estende il linguaggio CSS, aggiungendo funzionalità che consentono variabili, mixin, funzioni e molte altre tecniche che consentono di rendere CSS più manutenibili, a tema ed estensibili.

  2. SASS afferma di essere il linguaggio di estensione CSS di livello professionale più maturo, stabile e potente al mondo. SASS ha quasi un decennio e ci sono un numero infinito di framework costruiti con Sass tra cui Compass, Bourbon e Susy solo per citarne alcuni.

  3. Stylus è un preprocessore CSS, che estendono le funzionalità dei normali CSS. offre potenti funzionalità logiche, Possibilità di eseguire tramite Node.js / JavaScript, (senza Ruby), Possibilità di eseguire come parte della configurazione di Node.js, Sintassi pulita e minima ma flessibile.

  4. CodeKit ($ 32) è un'app molto potente e popolare per gli utenti MAC. CodeKit può compilare Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown e Javascript. Offri browser di aggiornamento automatico e con Bower integrato, puoi installare oltre 6.000 componenti con un solo clic tra cui Bootstrap, jQuery, Modernizr, Zurb Foundation e persino WordPress.

  5. PrePros ($ 29) : Prepros è uno strumento premium per compilare LESS, Sass, Compass, Stylus, Jade e molto altro con il prefisso CSS automatico. Viene fornito con un server integrato per i test su più browser. È disponibile per Windows, Mac OS X e Linux. Offre prefisso CSS automatico, aggiornamento automatico del browser, riduzione dei file, ottimizzazione delle immagini, server integrato e molti altri.

  6. Emmet : un plug-in gratuito per diversi editor di codice per scrivere codice in modo rapido e semplice. Emmet è scritto in puro JavaScript e funziona su diverse piattaforme: browser web, Node.js, Microsoft WSH e Mozilla Rhino.

  7. Fire.App : uno strumento simile a CodeKit, per Windows, è fire.app (funziona anche su Linux e Mac). Ti piace Sass/Compass ma odi l'interfaccia della riga di comando? Fire.app ha un supporto Sass/Compass di prima classe proprio come il nostro Compass.app. Niente più prefissi CSS del fornitore e immagini sprite artigianali!. Fire.app funziona su piattaforma Mac, Linux e Windows. Il processo di installazione è facile come fare clic e trascinare.

  8. Snippets è un programma gratuito per gestire il tuo codice. ti aiuta a organizzare e riutilizzare frammenti di codice in diversi progetti, condividere frammenti pubblicamente e con il tuo team. Questo è disponibile per Mac e Windows.

  9. Koala App è un'applicazione GUI per la compilazione di Less, Sass, Compass e CoffeeScript, per aiutare gli sviluppatori web a usarli in modo più efficiente. Koala può essere eseguito su Windows, Linux e Mac.

  10. Le modifiche CSS di LiveReload e le modifiche alle immagini si applicano in tempo reale. CoffeeScript, SASS, LESS e altri funzionano e basta. LiveReload controlla le modifiche nel file system. Non appena si salva un file, viene preelaborato secondo necessità e il browser viene aggiornato.

  11. Scout App è un'app multipiattaforma che offre la potenza di Sass & Compass nelle mani dei web designer. Scout aiuta a rendere il tuo flusso di lavoro CSS un gioco da ragazzi offrendo maggiore controllo, ottimizzazione e organizzazione.

  12. Crunch 2 Crunch ti consente di scrivere Less, Sass, CoffeeScript, Markdown*, quindi salva automaticamente CSS, JavaScript e HTML dopo aver apportato le modifiche. Vuoi scrivere semplicemente CSS? XML? Haskell? Codice MUSH? Crunch ti permette di farlo anche tu. Crunch 2 è un editor che ti consente di fare quello che vuoi. Perché Crunch ti ama.

10 plugin CSS personalizzati per WordPress

Se desideri personalizzare i CSS in WordPress, puoi utilizzare molti plug-in gratuiti o funzionalità di modifica CSS integrate disponibili in Personalizzatore da WordPress 4.7. Abbiamo curato un elenco di 10 plugin CSS gratuiti gratuiti, che ti aiutano a modificare e salvare facilmente CSS personalizzati.

Puoi anche leggere questo tutorial per imparare come modificare CSS nel tema WordPress utilizzando gli strumenti per sviluppatori di Chrome e come aggiungere una freccia nei menu di WordPress con CSS senza utilizzare jQuery o PHP.

15 generatori di gradienti CSS

  1. editor di sfumature colorzilla
  2. editor di gradienti CSSmatic
  3. generatore di gradiente di angrytools
  4. gradientgenerator.com/
  5. css3generator.com/
  6. generatore di gradiente sportivo
  7. uigradients.com: Pronto per l'uso di bellissime sfumature di colore
  8. css3factory gradienti lineari
  9. generatore di gradiente gradcolor
  10. gradiente RGB perbang
  11. generatore di gradiente paintbycode
  12. generatore di gradienti virtuosoft
  13. gradienti radiali di westciv
  14. gradienti lineari di westciv
  15. Generatore di gradiente CSS3

10 editor CSS online gratuiti

  1. Editor CSS in linea dal portale CSS
  2. Laboratori CSSdeck
  3. Editor HTML e CSS in tempo reale di ScratchPad
  4. Generatore di codice CSS3 online di EnjoyCSS
  5. cssdesk
  6. jsfiddle: prova online JavaScript, CSS, HTML o CoffeeScript
  7. Editor di CSSmate
  8. CSS Abbellisci e riduci a icona
  9. liveweave HTML5, CSS3 e JavaScript playground
  10. SelfCSS – Editor CSS WYSIWYG

10 Estensione di Chrome per modificare CSS

  1. Visualizzatore CSS
  2. Stylebot
  3. CSS utente
  4. Editor CSS in tempo reale
  5. Salvataggio automatico degli strumenti di sviluppo
  6. Salva CSS
  7. Tester di web design reattivo
  8. Ispettore reattivo
  9. Visualizzatore ridimensionatore
  10. Ridimensiona scheda: layout dello schermo diviso

Parole finali

Questo è tutto per questo elenco di strumenti CSS per web designer e sviluppatori. Puoi utilizzare questi strumenti CSS gratuiti per personalizzare facilmente gli stili e salvare le modifiche. Le estensioni di Chrome sono molto utili per salvare le modifiche CSS, senza uscire dagli strumenti di sviluppo di Chrome.

Con i preprocessori CSS, puoi scrivere CSS in modo efficiente. Spero che amerete questi strumenti. Questo articolo fa parte della nostra serie di strumenti per lo sviluppo di temi. Non dimenticare di iscriverti alla nostra newsletter sullo sviluppo di temi WordPress per scaricare gratuitamente Book e ricevere gli ultimi articoli e tutorial sullo sviluppo di temi WordPress.

Nota : questo articolo è stato originariamente pubblicato su createwptheme.com, lo abbiamo ripubblicato qui con il permesso.