Share
inuit.css er en kraftig, skalerbar, Sass-basert, BEM, OOCSS rammeverk. Denne artikkelen er en kort introduksjon til inuit.css; hvordan det er bygget, hvem skal bruke det, og hvorfor.
Hei der, jeg er Harry, skaperen av et nylig omskrevet CSS-rammeverk kalt inuit.css. Denne artikkelen skal forhåpentligvis tjene som en rask introduksjon til hva inuit.css er, hvorfor det er annerledes og hvordan du kan begynne å bruke det med en gang ...
Først av, jeg vet hva du tenker på; et annet CSS-rammeverk ?! Vel, det korte svaret er ja ... Det lange svaret er 'Ja, men det er en grunn til denne ...'
CSS-rammebetingelser er for øyeblikket ti-a-penny med mange mennesker som slipper å ta på CSS-rammeverket på en jevnlig basis. Problemet med de fleste av disse rammene er at de er veldig oppfattet; CSS er et stylingspråk, slik at noen CSS-rammeverk i seg selv omhandler kosmetikk og med look-and-feel. inuit.css gjør det imidlertid ikke.
Et CSS-rammeverk som gjør mange designbeslutninger, er bra hvis du er en utvikler som trenger noen eller noe annet for å håndtere designen for deg, men hva om du er en designer som trenger en hånd med CSS? Bruke et rammeverk ville bety at du måtte enten sette opp med andres designbeslutninger og meninger eller begynne å slette mye og mye kode; eller begge! Noen annens design vil trolig være helt uegnet for prosjektet, noe som gjør det nesten helt meningsløst. Dette er langt fra ideelt, det vi trenger er et CSS-rammeverk som gjør null styling; et rammeverk som gjør mye tung løfting.
inuit.css er en kraftig liten samling av designfrie objekter og abstraksjoner som konstruerer skjelettet til et hvilket som helst nettsted som du kan da legge designet ditt over toppen av. inuit.css fungerer på en OOCSS måte, noe som betyr at du kan bryte alt ut i struktur og hud; inuit.css gjør strukturen og du kan bruke din egen kosmetikk over toppen!
inuit.css har også en fil full av variabler som vil sette opp hele prosjektets typografiske skala; de er helt opp til deg og vil bli brukt for å bygge en hel rekke komponenter rundt verdier av ditt valg.
inuit.css sorterer ut mye styling hodepine, men det gir deg total kontroll over stylingen selv ...
Selvfølgelig er hovedkonkurrenten for alle i CSS-rammemarkedet Twitter's Bootstrap. Bootstrap er utmerket hvis du trenger noe for å håndtere designsiden av ting; Det er raskt å sette opp og du kan slippe alle slags forhåndsdefinerte komponenter til et prosjekt som vil. Perfekt for design-utfordret utvikler som trenger å kaste en front-end sammen, men ikke bruk for en designer som har sin egen ide om kosmetikk, men trenger en hjelpende hånd med noen av de vanskeligste biter av CSS.
Hvis du trenger design, eller en vinn-vinn-løsning, bruk Boostrap! Hvis du trenger kreativ frihet, men en skalerbar, designfri, utvidbar og kraftig hjelper, kan du kanskje vurdere inuit.css ...
inuit.css er et lite rammeverk laget for nettsteder av alle størrelser; fra enkle en-personsøkere, til gigantiske, innholdshåndtekkede behemoter som trenger å vokse og vokse.
inuit.css er faktisk ideelt for massive nettsteder og store lag, og det er bygget på noen få prinsipper for å hjelpe denne utviklingsstilen.
Først og fremst er inuit.css et OOCSS-rammeverk. Jeg er en stor forutsetning for OO-tankegangen; Jeg skriver og snakker om OOCSS mye. OOCSS er en fantastisk måte å nærme seg større bygninger på; gjenbruk av kodebase på funksjon, abstrahering av vanlige / gjentatte designmønstre, DRYing-kode, holde kode effektiv og bærbar. Alle disse ideene er bakt inn i inuit.css i kjernen, rammen er i utgangspunktet bare et bibliotek med nyttige objekter og abstraksjoner som navabstraksjonen, medieobjektet, øyobjektet og en mye mer.
Er det denne ideen om å skille struktur og hud som gjør inuit.css så godt egnet til prosjekter der en designer eller designere er involvert. inuit.css gir designfrie, strukturelle designmønstre, designteamet legger sin behandling over toppen av den.
Ideene om DRYness, effektivitet og abstraksjon er det som låne inuit.css så godt til store nettsteder. CSS forblir slank, abstraksjoner viser seg mer nyttige og bygger er mer effektive; Dette er ting som virkelig hjelper deg med større prosjekter.
inuit.css er bygget på en SMACSSesque måte. Det er ikke så granulært eller komplett (som inuit.css er uten moduler, og SMACSS gjør det ikke nødvendigvis avtale med abstraksjoner og OOCSS), men det deler noen felles prinsipper ...
Ideen om å skrive CSS i spesifisjonsordre er noe som inuit.css tar veldig alvorlig; Kode som omdefinerer eller eliminerer seg over et prosjekt er vanligvis dårlige nyheter, så arkitektur CSS på en måte som unngår dette er viktig, særlig på større bygg. inuit.css 'filstruktur innebærer at hver regelsett bare legger til tidligere, det utelukker dem aldri.
For det første begynner vi med vår grunnleggende tilbakestilling / omstart; inuit.css tilbakestiller marginer og paddings, men definerer også noen nyttige standardinnstillinger for kryssbrowser. Dette er grunn null, utgangspunktet ditt, det absolutt mest grunnleggende.
Deretter importerer inuit.css uklassede elementer, disse er ting som overskrifter (h1-h6) som er satt til den vertikale rytmen du definerte i variabelfilen ... Disse lar deg komme i gang med enkle, vanilje HTML-elementer som alle er utformet etter dine valgte variabler.
Deretter legger vi til objekter og abstraksjoner ... Dette er de tingene som utvider HTML-elementene dine (ved hjelp av klasser) og gjør masse tung løft. Disse objekter og abstraksjoner er alle element agnostiske, og kan derfor brukes til nesten alt. Dette holder dem utrolig bærbare, gjenbrukbare og, viktigst, nyttige!
Når du har begynt å utvide inuit.css til å jobbe på ditt eget prosjekt, er de neste tingene du vil importere komponenter eller moduler. Dette er ting som er bygget ut av objekter og abstraksjoner og deres relevante utvidelser (for eksempel å omdanne medieobjektet til et brukerprofil og bio).
Endelig trekker inuit.css i noen hjelperklasser og 'style trumps'. Dette er ting som bredde og push / pull klasser for rutenettet ditt, merkevarefarge og ansikt som nyttige klasser og til og med en feilsøkingsmodus for utvikling.
BEM er en utrolig kraftig front-end-metode som drømmes opp av utviklerne på Yandex. BEM er ganske enkelt en måte å navngi CSS-klasser for å gjøre dem strengere, tydeligere og mer kraftige. inuit.css bruker en BEM-metodikk med en navngivningskonvensjon basert på arbeid av Nicolas Gallagher.
BEM står for blokkere, element, modifier.
En blokk er som en komponent, et element er noe som går mot å bygge en blokk som helhet, og en modifikator er en variant av en blokk, for eksempel:
.kommentar / * Blokk * / .comment__body / * Element * / .comment - gjest / * Modifier * /
Her har vi en .kommentar blokk som kan inneholde et element som heter .comment__body. Vi kan også se at det er en variasjon av .kommentar kalt .kommentar - gjest. Fra klassene alene kan vi rydde hva hver ting gjør og hva deres forhold er til hverandre; .comment__body må bor inni .kommentar, mens .kommentar - gjest har å være en variasjon av .kommentar.
De __, -- notasjon forteller oss mye om et objekt. Dette er spesielt nyttig i større lag, da det hjelper å kommunisere hvordan, hvor og når klasser skal brukes.
En god analogi av hvordan BEM fungerer, kan være:
.person .person - kvinne .person__hand .person__hånd - venstre .person__hånd - høyre
Her kan vi se at det grunnleggende objektet vi beskriver er en person, og at en annen type person kan være en kvinne. Vi kan også se at folk har hender; disse er underdeler av mennesker, og i sin tur er det forskjellige variasjoner av disse, som venstre og høyre.
Sass brukes av flere grunner, hovedsakelig slik at:
Flytte inuit.css til en forprosessor var ikke en enkel beslutning, men det er en jeg er glad jeg laget. Kombinere OOCSS med Sass har vist seg å være uvurderlig, og ved å bruke variabler for å sette opp ditt tilpassede prosjekt betyr ingen to inuit.css bygger noen gang ser det samme ut.
Det kan ikke være enklere å sette opp et prosjekt på inuit.css. Forutsatt at prosjektet ditt har en veldig grunnleggende struktur, slik:
+ css / + img / + index.html
Så er ditt første skritt å få inuit.css inn i den CSS katalogen. Det er to måter du kan gjøre dette på:
Accentsconagua
cd inn i prosjektkatalogen og klon med Git: git klone https://github.com/csswizardry/inuit.css.git css && cd css / && rm -rf .git / && cd ... /. Dette sier i utgangspunktet 'klone inuit.css prosjektet i en katalog som heter css, så gå inn css / og fjern Git-versjonen fra inuit.css-filene, og gå tilbake til prosjektkatalogen '.
Når du har gjort det, bør prosjektet se litt ut som dette:
+ index.html + css / + inuit.css / + _vars.scss + README.md + watch.sh + your-project.scss + img /
For det første kan du helt slette README.md. Neste, gi nytt navn your-project.scss til det du ønsker, for eksempel style.scss.
Merk: Hvis du bruker CodeKit, eller et annet grensesnitt for å kompilere Sass, hopper du til slutten av opplæringen hvor vi tar en rask titt på å sette opp et inuit.css-prosjekt på den måten.
Nå må du åpne watch.sh, hvor du burde finne noe slikt:
#! / bin / sh # Endre alle forekomster av "ditt prosjekt" til hva du har kalt ditt # prosjektets stilark, 'cd' til katalogen der denne filen lever og # bare kjør 'sh watch.sh'. # Ingen minifisering #sass - watch your-project.scss: your-project.css --stil utvidet sass --watch your-project.scss: your-project.min.css --stil komprimert utgang 0
Her må du endre alle forekomster av your-project.scss til navnet du valgte. Denne lille filen tar smerten ut av å se Sass-filer fra kommandolinjen.
Nå for å begynne å se prosjektfilene dine trenger du bare å åpne et Terminal-vindu, cd til prosjektets CSS katalog og bare kjøre sh watch.sh. Voila, prosjektet ditt er nå satt opp på inuit.css.
Som nevnt kommer inuit.css med en rekke variabler som gjør en hel masse ting, hvis du åpner _vars.scss du bør se dem alle ...
$ Debug-modus er nyttig for prosjekter i utvikling; Dette vil påkalle feilsøkingsprogrammet som følger med inuit.css og vil visuelt flagge i nettleseren enhver potensielt utilgjengelig eller plagsom kode.
$ Base font-size og $ Basen-line-høyde er ganske selvforklarende, men utrolig viktig. Gitt disse to delene av informasjon alene, kan inuit.css begynne å sette opp hele vertikal rytme (se skriftstørrelse() bland inn _mixins.scss for mer info).
Resten av variablene er ganske mye bare skriftstørrelser for overskriftene dine. Disse, kombinert med din $ Base font-size og $ Basen-line-høyde variabler, er det som fullfører din vertikale rytme. Prøv å endre disse variablene og se hva som skjer!
Det neste trinnet er et jeg finner veldig nyttig; åpne opp inuit.scss og du vil finne et stort innholdsfortegnelse og en lang liste over importerte deler. Det er god praksis å kommentere alle gjenstandene og abstraksjonene med en gang, og overbevise dem som du trenger dem. Dette betyr at du må forsiktig kalle dem når de trengs, og at du ikke bunter mye ubrukt CSS.
Med filene dine overvåket, angav variablene dine og ubrukte objekter, du er alle satt opp på inuit.css ...
Det er en god sjanse for at du ikke arbeider direkte med kommandolinjen, i så fall kan du bruke en av de mange programmene som er tilgjengelige for å samle Sass. CodeKit er et slikt eksempel, og (når det gjelder hva vi trenger det her) oppfører seg mye som alle andre kompilatorer, uansett hvilken plattform du kjører.
Så da, for å sette opp et inuit.css-prosjekt, må du først ta tak i kildefilene fra GitHub-depotet:
Når du har pakket opp filene, organisere dem til et kjent prosjektoppsett, for eksempel dette:
Som du kan se, har jeg kastet innholdet i Inuit-kildemappen til en css mappe. Jeg har også blitt kvitt README.md og watch.sh-filene.
Deretter åpner du kompilatoren din (CodeKit i dette tilfellet) og instruerer den til å se prosjektmappen din. I de fleste OS X-kompilatorer er dette bare et tilfelle med å dra prosjektmappen inn i programvinduet. Som du ser nedenfor, ser CodeKit nå på min inuit.css-mester mappe og har markert .scss-filene som vil bli direkte kompilert. Enhver fil med en forrige underskrift vil ikke generere sin egen .css-fil, selv om den kan importeres til andre filer.
Jeg har ikke omdøpt noe i dette tilfellet, men du vil se det your-project.scss er satt til å kompilere i sin .css navnebror. Alt jeg nå trenger å gjøre er å koble den css filen opp til index.html:
Mitt eget inuitprosjekt Tunngahugit (velkommen i Inuit)
Når jeg lagrer prosjektfilene mine i en kodeditor, gjenoppretter CodeKit prosjektet for meg og laster opp nettleservinduet i fly.
Utvide inuit.css er noe vi kan dekke i den andre delen av denne opplæringen, men for nå er alt du trenger å vite at det er så enkelt som your-project.scss forteller deg:
/ ** * Hun er alt ditt, cap'n ... Begynn å importere dine ting her. * /
