Lo sviluppatore CSS dovrebbe sapere di Sass per vedere cosa offre. Questo superset di CSS ha rivoluzionato i fogli di stile come jQuery ha rivoluzionato JavaScript.

E accanto a molti Quadri dell'interfaccia utente CSS abbiamo anche i framework frontend SCSS / Sass. La maggior parte di questi sono piuttosto nuovi ma stanno rapidamente guadagnando terreno.

Abbiamo curato 9 dei migliori framework SCSS gratuiti, quindi se sei un utente di Sass dovrai assolutamente verificarli.

1. Sierra

Il Sierra framework è pubblicizzato come uno dei framework SCSS più leggeri e più piccoli sul mercato. Attualmente in v2.0 pesa complessivamente 37KB.

Questo potrebbe non essere letteralmente l'opzione più piccola là fuori, ma anche il foglio di stile Bootstrap minimizzato ammonta a ~ 120 KB, quindi Sierra è piuttosto leggero. È anche ben organizzato con file separati per mixin, pulsanti, tabelle, tipografia e altri elementi di pagina comuni.

Questa separazione dei file è standard per lo sviluppo di Sass e rende il lavoro molto più semplice quando si personalizza il framework.

Troverai una demo live completa con tutti gli elementi principali sulla pagina principale di Sierra insieme alla documentazione di installazione su GitHub . Lo classificherei tra i primi tre di tutti i framework Sass, quindi se sei curioso vale la pena dare un'occhiata.

01-sierra-SCSS-biblioteca

2. Scooter

Il team di Dropbox ha creato il proprio framework di frontend chiamato Scooter . Questo è molto più semplice della maggior parte da quando è stato creato per la creazione di prototipi frontend.

Dropbox in realtà ha un sacco di roba open source su GitHub che include il proprio guida di stile per la formattazione del codice CSS / SCSS. Questa piccola risorsa può rivelarsi incredibilmente utile se vuoi immergerti nello Scooter e armeggiare con la sorgente predefinita.

La maggior parte degli stili Scooter prende in prestito idee da Dropbox come i loro pulsanti sul pagina dei componenti . Questo offre un modo interessante per prototipare le tue webapps in Sass mentre usi uno stile dell'interfaccia utente collaudato.

02-motorino-quadro

3. Kickoff

Per qualcosa di un po 'più dettagliato potresti provare il Calcio d'inizio biblioteca. Funziona su una base Sass e ha il suo schema di denominazione per aggiungere nuove variabili.

Ma Kickoff mescola un po 'di tutto, dalle griglie CSS ai componenti JS più complessi, tutti consegnati e gestiti Gulp.js .

Se non usi già Gulp, questo framework ha un po 'di una curva di apprendimento. Ma l'intera base di codice è molto incentrata sul futuro e focalizzata su ES2016 e FlexBox .

Questo è eccezionalmente snello con un foglio di stile CSS di soli 8.6 KB e un misero 2 KB di JavaScript. Kickoff è inteso come un piano d'appoggio in cui è solo un punto di partenza, in modo da poter costruire qualcosa di snello o dettagliato come necessario per qualsiasi progetto.

Dai un'occhiata a loro demo online per vedere come appare nel browser.

03-kickoff-SCSS-biblioteca

4. Materializza

Tutti sanno di Google design dei materiali e quanto velocemente si è diffuso attraverso il web. Ciò ha portato molti sviluppatori a creare i propri fogli di stile per imitare le linee guida di Google e alcuni di questi fogli di stile sono online gratuitamente.

materializzarsi è un esempio di un framework CSS / Sass costruito specificamente sulle linee guida di Google. Il framework è ancora tecnicamente in versione beta 0.9 al momento della stesura di questo documento.

Ma direi che è abbastanza completo per i siti di produzione e c'è un'opzione Sass giusta la pagina di introduzione . Quindi puoi scaricare i file CSS / JS di base o ottenere CSS + Sass per ulteriori sviluppi.

Questo è così popolare che è disponibile su CDN quindi non hai nemmeno bisogno di scaricare il CSS in locale.

Chiunque si conformi agli stili materiali di Google deve assolutamente iniziare con la libreria Materialise. Troverete la documentazione completa sul sito insieme a una vetrina dei siti Web che eseguono Materialize.

04-Materialise-css-SCSS

5. Hocus-Pocus

Il Gherminella quadro non si considera un quadro, ma piuttosto un kit di partenza per la progettazione di nuovi progetti.

Questo kit per l'interfaccia utente ripristina tutti gli elementi HTML predefiniti in una pagina Web e viene fornito con un bello griglia reattiva per allineare quegli elementi. Naturalmente il tutto si basa su Sass che rende il processo di sviluppo molto più semplice.

Hocus Pocus sembra più l'antitesi di Bootstrap. Non lo useresti direttamente su un sito web dal vivo. Ma lo useresti come punto di partenza per prototipare e costruire idee velocemente. Anche se può funzionare bene come base anche da quando gira Normalizzare .

Dai tavoli pre-disegnati ai pulsanti e agli elementi personalizzati, Hocus Pocus aggiunge un tocco minimalista a tutti gli stili di browser predefiniti.

05-gioco di prestigio-SCSS-quadro

6. Gridle

Il Struttura a griglia è uno dei framework di griglia SCSS più personalizzabili che troverai. È alimentato da Sass e viene fornito con decine di mix e funzioni personalizzati realizzati appositamente per questo sistema di grid.

Troverete un'anteprima dal vivo sul pagina demo qui ospitato gratuitamente su GitHub. C'è anche una guida di installazione completa sul repository principale che copre come definire le griglie da molto semplici a più complesse.

Si noti che Gridle richiede alcune conoscenze esistenti sui sistemi di griglia e non è certamente una bacchetta magica.

Ma ti farà risparmiare ore di lavoro manuale creando una griglia da zero, senza contare che è riutilizzabile per quasi tutti i progetti che progetti.

06-gridle-grid-sistema

7. iotaCSS

Uno dei migliori metodi per strutturare i CSS è il OOCSS stile. Questo segue un struttura dell'oggetto dove progetti per più classi e relazioni piuttosto che specificità annidate.

iotaCSS è uno dei pochi framework OOCSS ed è davvero facile da usare. Puoi sfogliare a mini anteprima del codice sorgente per vedere le convenzioni di denominazione e come questo utilizza la sintassi BEM / OOCSS.

Una differenza unica su iota è che non è specificamente un kit di interfaccia utente. Invece è un framework per aiutarti a creare un kit di interfaccia utente esclusivamente attraverso Sass. Ciò significa che non è una soluzione plug & play, ma offre anche molto più personalizzazione.

Il documentazione online è fenomenale, quindi questa è una fantastica struttura per costruire da zero il tuo foglio di stile con alimentazione Sass.

07-iota-css-quadro-SCSS-oocss

8. Bulma

I moderni CSS si stanno muovendo verso una struttura modulare e flessibile con il flexbox. Questo sembra essere il nuovo normale e Bulma sta conducendo la carica.

Questo framework Sass gratuito ti consente di lavorare esclusivamente con flexbox per creare sistemi di grid completamente reattivi da zero. Ciò significa facile centratura verticale + orizzontale, riquadri a griglia ad altezza fissa e un sacco di stili predefiniti.

Puoi trovare demo live su pagina principale insieme alle istruzioni di installazione su GitHub .

Di default Bulma è solo un file CSS ed è anche ospitato su CDN gratuito. Ma gli sviluppatori sono incoraggiati a scaricare i file Sass e lavorare con variabili per aggiungere le tue caratteristiche.

08-Bulma-css-SCSS-biblioteca

9. Susy

susy è un reattivo toolkit di Sass per costruire layout da zero. È una libreria unica perché non viene fornita con un'impostazione di griglia predefinita o un foglio di stile pronto per essere lanciato.

Invece Susy offre una serie di strumenti con tutorial che puoi seguire per creare i tuoi schemi di griglia.

Questi vari strumenti consentono di definire le variabili per i punti di interruzione personalizzati, le impostazioni griglia / grondaia personalizzate e lanciare una varietà di mixin per una buona misura. Puoi definire rapidamente elementi nidificati e indirizzare elementi della pagina molto specifici con poche righe di codice.

Poiché questo non viene fornito con un foglio di stile predefinito, non è una soluzione pronta per l'uso. Ma se sei uno sviluppatore Sass cercando di risparmiare tempo, sfoglia I documenti di Susy e vedi cosa ne pensi.

09-susy-breakpoint-SCSS-foglio di stile