Share
inuit.css este un cadru puternic, scalabil, bazat pe Sass, BEM, OOCSS. Acest articol este o scurtă introducere la inuit.css; cum se construiește, cine ar trebui să o folosească și de ce.
Hei acolo, eu sunt Harry, creatorul unui cadru CSS recent rescris CSS numit inuit.css. Acest articol ar trebui să servească ca o introducere rapidă la ceea ce inuit.css este, de ce este diferit și cum puteți începe să-l utilizați imediat ...
În primul rând, știu la ce te gândești; un alt cadru CSS ?! Răspunsul scurt este da ... Răspunsul lung este "Da, dar există un motiv pentru asta ..."
Cadrele CSS sunt în prezent zece ani, cu o mulțime de oameni care își dau lecțiile în cadrul CSS pe o bază destul de regulată. Problema cu majoritatea acestor cadre este că ei sunt foarte sociabili; CSS este un limbaj de styling, astfel încât orice cadru CSS se ocupă în mod inerent cu produsele cosmetice și cu aspectul și simțul. inuit.css, cu toate acestea, nu.
Un cadru CSS care face o mulțime de decizii de proiectare este minunat dacă sunteți un dezvoltator care are nevoie de cineva sau de altceva care să se ocupe de design, dar dacă ești un designer care are nevoie de o mână cu CSS? Folosirea unui cadru ar însemna că va trebui fie să stați cu deciziile și opiniile de proiectare ale altcuiva, fie să începeți să ștergeți o mulțime de coduri; sau amândouă! Designul altcuiva va fi probabil în întregime inadecvat pentru proiectul dvs., făcându-l aproape inutil. Acest lucru este departe de a fi ideal, ceea ce avem nevoie este un cadru CSS care face styling zero; un cadru care face o mulțime de ridicare grele.
inuit.css este o mică colecție puternică de obiecte și abstracții fără design, care construiesc scheletul oricărui site pe care apoi îl puteți așeza pe partea de sus. inuit.css funcționează într-o manieră OOCSS, ceea ce înseamnă că puteți sparge totul în structură și piele; inuit.css face structura și puteți aplica propriile produse cosmetice peste partea de sus!
inuit.css are, de asemenea, un fișier plin de variabile care vă va stabili scala tipografică a întregului proiect; ele sunt în totalitate la dvs. și vor fi folosite pentru a construi o întreagă serie de componente în jurul valorilor alese de dumneavoastră.
inuit.css sortează o mulțime de stil dureri de cap, dar vă lasă în totalitate controlul stilului propriu-zis ...
Bineînțeles, principalul concurent pentru oricine din piața CSS este Bootstrap-ul Twitter. Bootstrap este excelent dacă aveți nevoie de ceva pentru a trata partea de design a lucrurilor; este rapid de configurat și puteți renunța tot felul de componente pre-proiectate într-un proiect la voință. Perfect pentru designer-provocat dezvoltator, care are nevoie pentru a arunca rapid un front-end impreuna, dar nici un folos pentru un designer care are propria lor idee de cosmetice, dar are nevoie de o mână de ajutor cu unele dintre cele mai trucate biți de CSS.
Dacă aveți nevoie de design, sau de o soluție rapidă, fără compromisuri, utilizați Boostrap! Dacă aveți nevoie de libertate creativă, ci de un ajutor scalabil, fără design, extensibil și puternic, poate ați putea considera inuit.css ...
inuit.css este un cadru mic construit pentru site-uri de toate dimensiunile; de la simple pagerari, până la giganți, deținători de conținut, care trebuie să crească și să crească.
inuit.css este de fapt ideală pentru site-uri masive și echipe mari și este construit pe baza anumitor principii pentru a ajuta acest stil de dezvoltare.
În primul rând, inuit.css este un cadru OOCSS. Sunt un susținător uriaș al modului de gândire al OO; Eu scriu și vorbesc mult despre OOCSS. OOCSS este o modalitate fantastică de abordare a construcțiilor mai mari; reutilizarea bazei de coduri pe funcție, abstrarea modelelor de design comune / repetate, ștergerea codului, păstrarea codului eficient și portabil. Toate aceste idei sunt coapte în inuit.css în centrul său, cadrul este în principiu doar o bibliotecă de obiecte utile și abstracții cum ar fi abstractizarea nav, obiectul media, obiectul insulei și mult Mai Mult.
Este această idee de separare a structurii și a pielii care face inuit.css atât de bine adaptate la proiectele în care sunt implicați un designer sau designeri. inuit.css oferă design-free, modele de design structural, echipa de proiectare își pune tratamentul peste partea de sus a acestuia.
Ideile de DRYness, de eficiență și de abstractizare sunt ceea ce oferă inuit.css atât de bine site-urilor de mari dimensiuni. CSS rămâne subțire, abstracțiile se dovedesc a fi mai utile, iar construcțiile sunt mai eficiente; acestea sunt lucruri care ajută cu adevărat la proiecte mai mari.
inuit.css este construit într-un mod SMACSSesque. Nu este la fel de granular sau complet (deoarece inuit.css este lipsit de module, iar SMACSS nu în mod necesar se ocupă de abstractizări și OOCSS), dar împărtășește câteva principii comune ...
Ideea de a scrie CSS în ordinea specificității este ceva care inuit.css ia foarte serios; codul care redefinește sau dezactivează un proiect este, de obicei, o veste proastă, așa că arhitectura CSS într-un mod care evită acest lucru este extrem de importantă, în special în cazul clădirilor mai mari. inuit.css "înseamnă că fiecare set de reguli se adaugă vreodată pe cele anterioare, nu le anulează niciodată.
În primul rând, începem cu resetarea / restartarea de bază; inuit.css reseta margini și paddings, dar definește, de asemenea, unele setări implicite de browser încrucișat. Acesta este punctul zero, punctul de plecare, cel absolut absolut fundamental.
În continuare, inuit.css importă elemente neclasificate, acestea sunt lucruri precum titlurile (h1-h6) care sunt setate la ritmul vertical pe care l-ați definit în fișierul variabilelor ... Acestea vă permit să mergeți cu elemente HTML simple, de vanilie care sunt toate personalizate conform variabilelor alese.
După aceasta, adăugăm obiecte și abstracții ... Acestea sunt lucrurile care extind elementele dvs. HTML (folosind clase) și fac încărcări grele de ridicare. Aceste obiecte și abstracții sunt toate elemente agnostice și, prin urmare, pot fi aplicate aproape în orice. Acest lucru le păstrează incredibil de portabile, reutilizabile și, cel mai important, utile!
După ce ați început să extindeți inuit.css pentru a lucra la propriul proiect, următoarele lucruri pe care le-ați importa sunt componentele sau modulele dvs. Acestea sunt lucruri care sunt construite din obiecte și abstracții și extensiile lor relevante (de exemplu, transformarea obiectului media într-o imagine a profilului de utilizator și bio).
În cele din urmă, inuit.css trage în orice clase de ajutor și "atuuri de stil". Acestea sunt lucruri precum lățimea și clasele push / pull pentru sistemul dvs. de rețea, culoarea și chipul mărcii dvs. ca clase utile și chiar un mod de depanare pentru dezvoltare.
BEM este o metodologie extrem de puternică de front-end visată de dezvoltatorii de la Yandex. BEM este, pur și simplu, un mod de a numi clasele CSS pentru a le face mai stricte, mai clare și mai puternice. inuit.css utilizează o metodologie BEM cu o convenție de numire bazată pe munca lui Nicolas Gallagher.
BEM înseamnă bloc, element, modificator.
Un bloc este ca o componentă, un element este ceva care merge spre construirea unui bloc ca întreg, iar un modificator este o variantă a unui bloc, de exemplu:
.Comentariu / * Bloc * / .comment__body / * Element * / .comment - Guest / * Modificator * /
Aici avem a .cometariu bloc care poate conține un element numit .comment__body. Putem vedea, de asemenea, că există o variație de .cometariu denumit .comentariu - de oaspeți. Numai din clase putem să curățăm ceea ce facem fiecare lucru și relațiile dintre ele; .comment__body trebuie sa trăiesc în interior .cometariu, în timp ce .comentariu - de oaspeți are să fie o variație a .cometariu.
__, -- notația ne spune multe despre un obiect. Acest lucru este util în special în echipele mai mari, deoarece vă ajută să comunicați cum, unde și când trebuie folosite clasele.
Un bun analogie despre modul în care funcționează BEM:
.persoană . persoană - femeie . persoană_și . persoană_și - stânga . persoana - mâna dreaptă
Aici vedem că obiectul de bază pe care îl descriem este o persoană și că un tip diferit de persoană ar putea fi o femeie. De asemenea, putem vedea că oamenii au mâini; acestea sunt sub-părți ale oamenilor și, la rândul lor, există diferite variații ale acestora, cum ar fi stânga și dreapta.
Sass este folosit din mai multe motive, în principal pentru ca:
Mutarea inuit.css pe un procesor pre-procesor nu a fost o decizie ușoară, dar este una pe care mă bucur că am făcut-o. Combinarea OOCSS cu Sass sa dovedit a fi de neprețuit și utilizarea variabilelor pentru a vă configura proiectul personalizat înseamnă că nici două inuit.css builds nu par a fi aceleași.
Instalarea unui proiect pe inuit.css nu ar putea fi mai simplă. Presupunând că proiectul dvs. are o structură foarte fundamentală, cum ar fi:
+ css / + img / + index.html
Apoi, primul pas este să obțineți inuit.css în directorul CSS. Există două moduri în care puteți face acest lucru:
Accentsconagua
CD în directorul de proiect și clona cu Git: git clone https://github.com/csswizardry/inuit.css.git css && cd css / && rm -rf .git / && cd ... /. Acest lucru spune în principiu "clona proiectul inuit.css într-un director numit css, apoi intră css / și eliminați versiunea Git din fișierele inuit.css, apoi reveniți la directorul de proiect ".
Odată ce ați făcut acest lucru, proiectul dvs. ar trebui să arate cam așa:
+ index.html + css / + inuit.css / + _vars.scss + README.md + watch.sh + your-project.scss + img /
În primul rând, puteți șterge complet README.md. Apoi, redenumiți dvs.-project.scss pentru orice doriți, de exemplu style.scss.
Notă: Dacă utilizați CodeKit sau altă interfață pentru a vă compila Sass, treceți la sfârșitul tutorialului, unde vom examina rapid crearea unui proiect inuit.css în acest fel.
Acum trebuie să vă deschideți watch.sh, unde ar trebui să găsiți ceva de genul:
#! / bin / sh # Schimbați toate instanțele proiectului "dvs." la orice ați numit foaia de stil a proiectului, "cd" în directorul în care trăiește acest fișier și purtați simplu "sh watch.sh". # No minification #sass - vizionați-project.scss: dvs.-project.css - stil expandat sass - vizionați-proiect.scss: your-project.min.css --style comprimat ieșire 0
Aici trebuie să schimbi fiecare instanță dvs.-project.scss la numele pe care l-ai ales. Acest fișier mic ia durerea de a vedea fișierele Sass din linia de comandă.
Acum, pentru a începe să urmăriți fișierele de proiect, trebuie doar să deschideți o fereastră Terminal, CD la directorul CSS al proiectului și pur și simplu rulați sh watch.sh. Voila, proiectul tău este înființat acum pe inuit.css.
După cum sa menționat, inuit.css vine cu o grămadă de variabile care fac o mulțime de lucruri, dacă deschideți _vars.scss ar trebui să le vezi pe toți ...
$ Debug-mode este util pentru proiectele în curs de dezvoltare; acest lucru va invoca pluginul de depanare care vine cu inuit.css și va semnaliza vizual, în browser, orice cod inaccesibil sau deranjant.
$ Bază-font-size și $ Bază-line-înălțime sunt destul de auto-explicative, dar incredibil important. Având în vedere numai aceste două informații, inuit.css poate începe să configurați întregul dvs. ritm vertical (a se vedea marimea fontului() mixin in _mixins.scss pentru mai multe informatii).
Restul variabilelor sunt destul de mult doar dimensiuni ale caracterelor pentru titlurile dvs. Acestea, împreună cu dvs. $ Bază-font-size și $ Bază-line-înălțime variabile, sunt ceea ce completează ritmul tău vertical. Încercați să modificați aceste variabile și să vedeți ce se întâmplă!
Următorul pas este unul pe care îl consider foarte util; deschide inuit.scss și veți găsi un vast tabel de conținut și o listă lungă de particule importate. Este o bună practică să comentați imediat toate obiectele și abstracțiile și să le dezmembrați în timp ce le cereți. Aceasta înseamnă că trebuie să le numiți în mod intenționat atunci când sunt necesare și că nu îmbarcați o mulțime de CSS neutilizate.
Fiind vizionate fișierele dvs., variabilele setate și obiectele neutilizate au comentat, sunteți înființați pe inuit.css ...
Există șanse mari să nu lucrați direct cu linia de comandă, caz în care puteți utiliza una dintre numeroasele aplicații disponibile pentru compilarea Sass. CodeKit este un astfel de exemplu și (în ceea ce privește ceea ce avem nevoie de aici) se comportă ca orice alt compilator, pe orice platformă pe care o executați.
Deci, pentru a configura un proiect inuit.css, va trebui mai întâi să apucați fișierele sursă din depozitul GitHub:
Odată ce ați dezarhivat fișierele, organizați-le într-un aspect familiar de proiect, cum ar fi:
După cum puteți vedea, am aruncat conținutul directorului sursă inuit într-un css pliant. De asemenea, am scăpat de fișierele README.md și watch.sh.
Apoi, deschideți compilatorul (în acest caz CodeKit) și instruiți-l să privească dosarul proiectului. În majoritatea compilatoarelor OS X acest lucru este doar un caz de tragere a folderului de proiect în fereastra aplicației. După cum puteți vedea mai jos, CodeKit mă urmărește acum inuit.css-master și a evidențiat fișierele .scss care vor fi compilate direct. Orice fișier cu un subliniere precedent nu va genera propriul fișier .css, deși poate fi importat în alte fișiere.
Nu am redenumit nimic în acest caz, dar veți vedea asta dvs.-project.scss este setat să compileze în numele său .css. Tot ce trebuie să fac acum este să creez fișierul css până la index.html meu:
Proiectul meu foarte inuit Tunngahugit (bun venit, în Inuit)
De fiecare dată când salvez fișierele de proiect într-un editor de cod, CodeKit recompilează proiectul pentru mine și reîncarcă fereastra browserului în zbor.
Extinderea inuit.css este ceva ce putem acoperi în a doua parte a acestui tutorial, dar pentru moment tot ce trebuie să știți este că este la fel de simplu ca dvs.-project.scss iti spune:
/ ** * Ea este a ta, cap'n ... Începeți să vă importați lucrurile aici. * /
