Share
inuit.css è un framework potente, scalabile, basato su Sass, BEM, OOCSS. Questo articolo è una breve introduzione a inuit.css; come è costruito, chi dovrebbe usarlo e perché.
Ehi, sono Harry, il creatore di un framework CSS recentemente riscritto chiamato inuit.css. Si spera che questo articolo serva da introduzione rapida a ciò che inuit.css è, perché è diverso e come è possibile iniziare a usarlo subito ...
Prima di tutto, so cosa stai pensando; un altro framework CSS ?! Bene, la risposta breve è sì ... La risposta lunga è "Sì, ma c'è un motivo per questo ..."
I framework CSS sono attualmente dieci-un-penny con un sacco di persone che rilasciano la loro visione del framework CSS su base abbastanza regolare. Il problema con la maggior parte di questi quadri è che sono molto supponenti; Il CSS è un linguaggio stilistico quindi qualsiasi framework CSS riguarda intrinsecamente i cosmetici e il look-and-feel. inuit.css, tuttavia, non lo fa.
Un framework CSS che prende molte decisioni di design è fantastico se sei uno sviluppatore che ha bisogno di qualcuno o qualcos'altro per gestire il design per te, ma cosa succede se sei un designer che ha bisogno di una mano con i CSS? Utilizzare un framework significherebbe che dovresti accettare le decisioni e le opinioni progettuali di qualcun altro o iniziare a cancellare un sacco di codice; o entrambi! Il design di qualcun altro sarà probabilmente del tutto inadatto al tuo progetto, rendendolo quasi completamente inutile. Questo è tutt'altro che ideale, ciò di cui abbiamo bisogno è un framework CSS che non presenti stili; un quadro che fa un sacco di sollevamento pesante.
inuit.css è una piccola e potente raccolta di oggetti e astrazioni privi di design che costruiscono lo scheletro di qualsiasi sito, quindi puoi posizionare il tuo progetto sopra. inuit.css funziona in modo OOCSS, il che significa che puoi spezzare tutto nella struttura e nella pelle; inuit.css fa la struttura e puoi applicare i tuoi cosmetici sopra le righe!
inuit.css ha anche un file pieno di variabili che configurerà la scala tipografica dell'intero progetto; sono totalmente a tua disposizione e verranno utilizzati per costruire un'intera serie di componenti attorno a valori di tua scelta.
inuit.css ordina un sacco di stile mal di testa, ma ti lascia in controllo totale dello stile stesso ...
Naturalmente, il principale concorrente per chiunque nel mercato framework CSS è Bootstrap di Twitter. Bootstrap è eccellente Se hai bisogno di qualcosa per gestire il lato progettuale delle cose; è veloce da configurare e puoi abbandonare tutti i tipi di componenti pre-progettati in un progetto a volontà. Perfetto per lo sviluppatore sfidato dal design che ha bisogno di gettare rapidamente un front-end insieme, ma non serve a un designer che ha la propria idea di cosmetici ma ha bisogno di una mano con alcuni dei bit più difficili di CSS.
Se hai bisogno di un design o di una soluzione rapida e immediata, usa Boostrap! Se hai bisogno di libertà creativa, ma un aiutante scalabile, privo di design, estensibile e potente, forse potresti considerare inuit.css ...
inuit.css è una piccola struttura creata per siti Web di tutte le dimensioni; da semplici cercapersone, a giganteschi behemoth gestiti dai contenuti che hanno bisogno di crescere e crescere.
inuit.css è in realtà ideale per siti Web di grandi dimensioni e grandi team, ed è basato su alcuni principi per aiutare questo stile di sviluppo.
Innanzitutto, inuit.css è un framework OOCSS. Sono un grande sostenitore del modo di pensare OO; Scrivo e parlo molto di OOCSS. OOCSS è un modo fantastico per avvicinarsi a build più grandi; riutilizzare il codice di base sulla funzione, estrapolare schemi di progettazione comuni / ripetuti, eliminare il codice, mantenere il codice efficiente e portatile. Tutte queste idee sono integrate in inuit.css, il framework è fondamentalmente solo una libreria di oggetti utili e astrazioni come l'astrazione nav, l'oggetto media, l'oggetto isola e un lotto Di Più.
È questa idea di separare struttura e skin che rende inuit.css così adatto ai progetti in cui sono coinvolti designer o designer. inuit.css fornisce schemi di progettazione strutturale privi di design, il team di progettazione ne ha curato il trattamento.
Le idee di DRYness, efficienza e astrazione sono ciò che presta inuit.css così bene ai siti Web su larga scala. I CSS rimangono snelli, le astrazioni si dimostrano più utili e le build sono più efficienti; queste sono cose che aiutano davvero progetti più grandi.
inuit.css è costruito in modo SMACSSesque. Non è così dettagliato o completo (come inuit.css è privo di moduli e SMACSS no necessariamente trattare con astrazioni e OOCSS) ma condivide alcuni principi comuni ...
L'idea di scrivere CSS in ordine di specificità è qualcosa che inuit.css prende molto sul serio; il codice che ridefinisce o annulla se stesso su un progetto è solitamente una cattiva notizia, quindi progettare CSS in modo da evitare questo è fondamentale, in particolare su build più grandi. la struttura del file inuit.css significa che ogni ruleet aggiunge sempre solo alle precedenti, non le annulla mai.
In primo luogo, iniziamo con il nostro reset / riavvio di base; inuit.css reimposta margini e paddings ma definisce anche alcune impostazioni predefinite utili per i browser incrociati. Questo è il punto zero, il punto di partenza, l'assoluto più basilare.
Successivamente, inuit.css importa elementi non ordinati, sono cose come titoli (h1-h6) che sono impostati sul ritmo verticale definito nel file delle variabili ... Questi ti permettono di andare avanti con semplici elementi HTML vaniglia che sono tutti disegnati secondo le tue variabili scelte.
Dopo di ciò, aggiungiamo oggetti e astrazioni ... Queste sono le cose che estendono i tuoi elementi HTML (usando le classi) e fanno un sacco di sollevamento pesi. Questi oggetti e astrazioni sono tutti elementi indipendenti e pertanto possono essere applicati a quasi tutto. Ciò li rende incredibilmente portatili, riutilizzabili e, soprattutto, utili!
Una volta che hai iniziato ad estendere inuit.css per lavorare sul tuo progetto, le cose che avresti importato sono i tuoi componenti o moduli. Queste sono cose che sono costruite da oggetti e astrazioni e le loro estensioni pertinenti (ad esempio, trasformando l'oggetto multimediale in un'immagine del profilo utente e bio).
Infine, inuit.css richiama qualsiasi classe di helper e "stile briscola". Queste sono cose come la larghezza e le classi push / pull per il tuo sistema di griglia, il tuo colore e il tuo viso come classi utili e anche una modalità di debug per lo sviluppo.
BEM è una metodologia di front-end immensamente potente immaginata dagli sviluppatori di Yandex. BEM è, in parole povere, un modo di nominare le classi CSS per renderle più rigide, più chiare e più potenti. inuit.css utilizza una metodologia BEM con una convenzione di denominazione basata sul lavoro di Nicolas Gallagher.
BEM sta per bloccare, elemento, modificatore.
Un blocco è come un componente, un elemento è qualcosa che va verso la costruzione di un blocco nel suo insieme e un modificatore è una variazione di un blocco, ad esempio:
.commento / * Blocco * / .comment__body / * Elemento * / .comment - ospite / * Modificatore * /
Qui abbiamo un .commento blocco che può contenere un elemento chiamato .comment__body. Possiamo anche vedere che c'è una variazione di .commento chiamato .commento - ospite. Dalle sole classi possiamo pulire ciò che ogni cosa fa e quali sono le loro relazioni reciproche; .comment__body dovere vivi dentro .commento, mentre .commento - ospite ha essere una variazione di .commento.
Il __, -- la notazione ci dice molto su un oggetto. Ciò è particolarmente utile in team più grandi in quanto aiuta a comunicare come, dove e quando le classi dovrebbero essere utilizzate.
Una buona analogia di come BEM funziona potrebbe essere:
.persona .person - woman .person__hand .person__hand - left .person__hand - right
Qui possiamo vedere che l'oggetto di base che stiamo descrivendo è una persona, e che un diverso tipo di persona potrebbe essere una donna. Possiamo anche vedere che le persone hanno mani; queste sono sotto-parti di persone e, a loro volta, ci sono diverse varianti di queste, come sinistra e destra.
Sass viene utilizzato per una serie di motivi, principalmente per:
Spostare inuit.css su un pre-processore non è stata una decisione facile, ma è una cosa che sono contento di aver fatto. La combinazione di OOCSS con Sass si è dimostrata inestimabile, e l'uso di variabili per configurare il tuo progetto personalizzato non significa che due build inuit.css abbiano mai lo stesso aspetto.
L'impostazione di un progetto su inuit.css non potrebbe essere più semplice. Supponendo che il tuo progetto abbia una struttura molto semplice, come questo:
+ css / + img / + index.html
Quindi il primo passo è quello di ottenere inuit.css nella directory CSS. Ci sono due modi per farlo:
Accentsconagua
CD nella directory del progetto e clonare con Git: git clone https://github.com/csswizardry/inuit.css.git css && cd css / && rm -rf .git / && cd ... /. Questo in pratica dice 'clona il progetto inuit.css in una directory chiamata css, poi vai dentro css / e rimuovere la versione di Git dai file inuit.css, quindi tornare alla directory del progetto '.
Una volta fatto, il tuo progetto dovrebbe apparire un po 'come questo:
+ index.html + css / + inuit.css / + _vars.scss + README.md + watch.sh + your-project.scss + img /
In primo luogo, è possibile eliminare completamente README.md. Quindi, rinomina your-project.scss per qualsiasi cosa tu desideri, per esempio style.scss.
Nota: Se usi CodeKit o qualche altra interfaccia per compilare il tuo Sass, vai alla fine del tutorial in cui daremo una rapida occhiata all'impostazione di un progetto inuit.css in questo modo.
Ora devi aprire watch.sh, dove dovresti trovare qualcosa del genere:
#! / bin / sh # Cambia tutte le istanze di 'tuo-progetto' in qualunque cosa tu abbia chiamato il foglio di stile del tuo progetto #, 'cd' nella directory in cui questo file vive e # esegue semplicemente 'sh watch.sh'. # No minification #sass --watch your-project.scss: your-project.css --style expand sass --watch your-project.scss: your-project.min.css - style exit compresso 0
Qui, è necessario modificare ogni istanza di your-project.scss al nome che hai scelto. Questo piccolo file evita di guardare i file Sass dalla riga di comando.
Ora per iniziare a guardare i tuoi file di progetto hai solo bisogno di aprire una finestra di Terminale, CD alla directory CSS del progetto e semplicemente esegui sh watch.sh. Voilà, il tuo progetto è ora impostato su inuit.css.
Come accennato, inuit.css ha un sacco di variabili che fanno un sacco di cose, se si apre _vars.scss dovresti vederli tutti ...
$ Debug-mode è utile per progetti in sviluppo; questo invocherà il plugin di debug fornito con inuit.css e visualizzerà visivamente, nel browser, qualsiasi codice potenzialmente inaccessibile o problematico.
$ Base-font-size e $ Base-line-height sono abbastanza auto esplicativi ma incredibilmente importante. Date queste due informazioni da soli, inuit.css può iniziare a impostare l'intero ritmo verticale (vedi il dimensione del font() mescolare _mixins.scss per maggiori informazioni).
Il resto delle variabili sono praticamente solo dimensioni dei caratteri per le tue intestazioni. Questi, in coppia con il tuo $ Base-font-size e $ Base-line-height variabili, sono ciò che completa il tuo ritmo verticale. Prova a modificare queste variabili e guarda cosa succede!
Il prossimo passo è uno che trovo molto utile; aprire inuit.scss e troverai un enorme sommario e una lunga lista di parziali importati. È buona norma commentare tutti gli oggetti e le astrazioni immediatamente e decommentarli come richiesto. Ciò significa che devi chiamarli intenzionalmente quando sono necessari e che non stai raggruppando molti CSS inutilizzati.
Con i tuoi file guardati, le tue variabili impostate e gli oggetti inutilizzati commentati, sei tutto configurato su inuit.css ...
C'è una buona probabilità che tu non lavori direttamente con la riga di comando, nel qual caso puoi usare una delle tante applicazioni disponibili per compilare Sass. CodeKit è uno di questi esempi e (in termini di ciò che ci serve per qui) si comporta come qualsiasi altro compilatore, su qualunque piattaforma tu stia correndo.
Quindi, per impostare un progetto inuit.css, devi prima prendere i file sorgente dal repository GitHub:
Una volta decompressi i file, organizzali in un layout di progetto familiare, ad esempio, ad esempio:
Come puoi vedere, ho gettato il contenuto della cartella sorgente inuit in a css cartella. Ho anche eliminato i file README.md e watch.sh.
Quindi, apri il compilatore (CodeKit in questo caso) e ordina di guardare la cartella del tuo progetto. Nella maggior parte dei compilatori di OS X questo è solo il caso di trascinare la cartella del progetto nella finestra dell'applicazione. Come puoi vedere qui sotto, CodeKit ora sta guardando il mio inuit.css-master cartella e ha evidenziato i file .scss che verranno compilati direttamente. Qualsiasi file con un underscore precedente non genererà il proprio file .css, sebbene possa essere importato in altri file.
Non ho ribattezzato nulla in questo caso, ma lo vedrai your-project.scss è impostato per la compilazione nel suo omonimo .css. Tutto quello che devo fare ora è agganciare il file css al mio index.html:
Il mio progetto inuit Tunngahugit (benvenuto, in Inuit)
Ogni volta che salvi i miei file di progetto in un editor di codice, CodeKit ricompila il progetto per me e ricarica la finestra del browser al volo.
Estendere inuit.css è qualcosa che possiamo coprire nella seconda parte di questo tutorial, ma per ora tutto ciò che devi sapere è che è semplice come your-project.scss ti dice:
/ ** * È tutta tua, cap'n ... Inizia a importare le tue cose qui. * /
