Share
inuit.css är en kraftfull, skalbar, Sass-baserad, BEM, OOCSS-ram. Denna artikel är en kort introduktion till inuit.css; hur det är byggt, vem ska använda det och varför.
Hej där, jag är Harry, skaparen av en nyligen omskriven CSS-ram kallad inuit.css. Denna artikel ska förhoppningsvis fungera som en snabb introduktion till vad inuit.css är, varför det är annorlunda och hur du kan börja använda det genast ...
Först av, jag vet vad du tänker; ett annat CSS-ramverk ?! Jo, det korta svaret är ja ... Det långa svaret är "Ja, men det finns en anledning till den här ..."
CSS-ramar är för närvarande tio-en-öre med massor av människor som släpper ut sina CSS-ramar på en ganska regelbunden basis. Problemet med de flesta av dessa ramar är att de är mycket uppfattade. CSS är ett stilningsspråk så att CSS-ramverket i sig handlar om kosmetika och med look-and-feel. inuit.css gör dock inte.
Ett CSS-ramverk som gör många designbeslut är bra om du är en utvecklare som behöver någon eller något annat för att hantera designen för dig, men om du är en designer som behöver hand med CSS? Att använda en ram skulle innebära att du måste antingen lägga upp någon annans designbeslut och åsikter eller börja ta bort mycket och mycket kod. eller båda! Någon annans design kommer sannolikt att vara helt olämplig för ditt projekt, vilket gör det nästan helt meningslöst. Det här är långt ifrån idealiskt, det vi behöver är en CSS-ram som gör noll styling; ett ramverk som gör mycket tungt lyft.
inuit.css är en kraftfull liten samling av designfria föremål och abstraktioner som konstruerar skelettet på en webbplats som du då kan lägga din design överst på. inuit.css fungerar på ett OOCSS sätt, vilket innebär att du kan bryta allt ut i struktur och hud; inuit.css gör strukturen och du kan applicera din egen kosmetika överst!
inuit.css har också en fil full av variabler som ska ställa in hela projektets typografiska skala. de är helt upp till dig och kommer att användas för att bygga en hel del komponenter runt värden du väljer.
inuit.css sorterar ut mycket styling huvudvärk, men det ger dig total kontroll över stilen själv ...
Naturligtvis är huvudkonkurrenten för alla på CSS-rammarknaden Twitter's Bootstrap. Bootstrap är utmärkt om du behöver något för att hantera designens sida av saker; Det är snabbt att ställa in och du kan släppa alla typer av förkonstruerade komponenter i ett projekt som helst. Perfekt för den designutmanade utvecklaren som snabbt behöver kasta en front-end tillsammans, men ingen användning för en designer som har sin egen ide om kosmetika men behöver en hjälpande hand med några av de knepigare bitarna av CSS.
Om du behöver design, eller en snabbvinst, hylla lösningen, använd Boostrap! Om du behöver kreativ frihet, men en skalbar, designfri, utökad och kraftfull hjälpare kanske du kanske anser inuit.css ...
inuit.css är en liten ram byggd för webbplatser av alla storlekar; från enkla en-personsökare till gigantiska, innehållshanterade behemoter som behöver växa och växa.
inuit.css är egentligen idealisk för massiva webbplatser och stora grupper, och bygger på några få principer för att stödja denna typ av utveckling.
Först och främst är inuit.css en OOCSS-ram. Jag är en stor förespråkare för OO: s sätt att tänka; Jag skriver och talar om OOCSS mycket. OOCSS är ett fantastiskt sätt att närma sig större byggnader. återanvända kodbas på funktion, abstrahera vanliga / upprepade mönster, DRY-out-kod, hålla kod effektiv och bärbar. Alla dessa idéer är bakade i inuit.css i kärnan, ramverket är i grunden bara ett bibliotek med användbara objekt och abstraktioner som navabstraktion, medieobjektet, öobjektet och en massa Mer.
Är den här tanken på att skilja struktur och hud som gör inuit.css så väl lämpad för projekt där en designer eller designers är involverade. inuit.css ger designfria, strukturella designmönster, designteamet lägger sin behandling överst på den.
Tankarna med DRYness, effektivitet och abstraktion är det som lånar inuit.css så bra till storskaliga webbplatser. CSS är smal, abstraktionerna är mer användbara och byggnader är mer effektiva. Det här är saker som verkligen hjälper till med större projekt.
inuit.css är byggt på ett SMACSSesque sätt. Det är inte så granulärt eller komplett (som inuit.css saknar moduler, och SMACSS gör det inte nödvändigtvis hantera abstraktioner och OOCSS) men det delar vissa gemensamma principer ...
Tanken att skriva CSS i specificitetsordning är något som inuit.css tar mycket allvarligt; kod som omdefinierar eller ångrar sig över ett projekt är vanligtvis dåliga nyheter, så arkitektur CSS på ett sätt som undviker detta är avgörande, särskilt på större byggnader. inuit.css filstruktur betyder att varje regelsats bara lägger till tidigare, det försvinner dem aldrig.
För det första börjar vi med vår grundläggande återställning / omstart; inuit.css återställer marginaler och paddingar men definierar också några användbara standardvärden för webbläsare. Detta är grundnoll, din utgångspunkt, det absolut mest grundläggande.
Därefter importerar inuit.css oklassade element, det här är saker som rubriker (h1-h6) som är inställda på den vertikala rytmen du definierade i din variabelfil ... Dessa låter dig komma igång med enkla, vanilj HTML-element som är alla stylade enligt dina valda variabler.
Därefter lägger vi till objekt och abstraktioner ... Det här är de saker som förlänger dina HTML-element (med klasser) och gör massor av tung lyftning. Dessa objekt och abstraktioner är alla element agnostiska, och kan därför tillämpas på nästan vad som helst. Detta håller dem otroligt bärbara, återanvändbara och, viktigast av allt, användbara!
När du väl har börjat utöka inuit.css för att arbeta på ditt eget projekt, är nästa saker du vill importera dina komponenter eller moduler. Det här är saker som är byggda av objekt och abstraktioner och deras relevanta tillägg (t ex att byta medieobjektet till en användarprofil och bio).
Slutligen drar inuit.css i hjälpenklasser och "style trumps". Det här är saker som bredd och push / pull klasser för ditt nät system, ditt varumärke färg och ansikte som användbara klasser och till och med ett debug-läge för utveckling.
BEM är en oerhört kraftfull front-end metod som drömdes upp av utvecklarna på Yandex. BEM är enkelt, ett sätt att namnge CSS-klasser för att göra dem strängare, tydligare och mer kraftfulla. inuit.css använder en BEM-metodik med namngivningskonvention baserat på arbete av Nicolas Gallagher.
BEM står för blockera, element, modifieringsmedel.
Ett block är som en komponent, ett element är något som går mot att bygga ett block som helhet, och en modifierare är en variation av ett block, till exempel:
.kommentar / * Block * / .comment__body / * Element * / .comment - guest / * Modifier * /
Här har vi en .kommentar block som kan innehålla ett element som heter .comment__body. Vi kan också se att det finns en variation av .kommentar kallad .kommentar - gäst. Från klasserna ensamma kan vi rena vad varje sak gör och vad deras relationer är med varandra; .comment__body måste lev inuti .kommentar, medan .kommentar - gäst har att vara en variation av .kommentar.
De __, -- notation berättar mycket om ett objekt. Detta är särskilt användbart i större grupper eftersom det hjälper till att kommunicera hur, var och när klasserna ska användas.
En bra analogi av hur BEM fungerar kan vara:
.person .person - kvinna .person__hand .person__hand - vänster .person__hand - höger
Här kan vi se att det grundläggande objektet vi beskriver är en person, och att en annan typ av person kan vara en kvinna. Vi kan också se att människor har händer; Det här är underdelar av människor, och i sin tur finns det olika variationer av dessa, som till vänster och höger.
Sass används av ett antal skäl, främst så att:
Att flytta inuit.css till en förprocessor var inte ett enkelt beslut, men det är en jag är glad att jag gjorde. Kombinera OOCSS med Sass har visat sig vara ovärderligt, och med hjälp av variabler för att ställa in ditt egna projekt innebär det att ingen två inuit.css bygger någonsin ser likadant ut.
Att ställa in ett projekt på inuit.css kan inte vara enklare. Om du antar att ditt projekt har en mycket grundläggande struktur, så här:
+ css / + img / + index.html
Då är ditt första steg att få inuit.css till den CSS katalogen. Det finns två sätt att göra det här:
Accentsconagua
CD in i projektkatalogen och klon med Git: git klon https://github.com/csswizardry/inuit.css.git css && cd css / && rm -rf .git / && cd ... /. Detta säger i princip "klona inuit.css-projektet i en katalog som heter css, sedan gå in i css / och ta bort Git-versionen från inuit.css-filerna och gå tillbaka till projektkatalogen ".
När du har gjort det ska ditt projekt se lite ut så här:
+ index.html + css / + inuit.css / + _vars.scss + README.md + watch.sh + your-project.scss + img /
För det första kan du helt radera README.md. Därefter byta namn på your-project.scss till vad som helst du vill, till exempel style.scss.
Notera: Om du använder CodeKit eller något annat gränssnitt för att kompilera din Sass, hoppa till slutet av handledningen där vi tar en snabb titt på att inrätta ett inuit.css-projekt så.
Nu måste du öppna watch.sh, där du borde hitta något så här:
#! / bin / sh # Ändra alla instanser av 'your-project' till vad som helst du har namngett ditt # projekt stilark, 'cd' till katalogen där den här filen lever och # kör enkelt 'sh watch.sh'. # Ingen minifiering #sass --watch your-project.scss: your-project.css --style expanded sass --watch your-project.scss: your-project.min.css --stil komprimerad utgång 0
Här måste du ändra varje förekomst av your-project.scss till det namn du valde. Den här lilla filen tar ont om att titta på Sass-filer från kommandoraden.
För att börja titta på dina projektfiler behöver du bara öppna ett terminalfönster, CD till projektets CSS-katalog och kör helt enkelt sh watch.sh. Voila, ditt projekt är nu inrättat på inuit.css.
Som nämnts kommer inuit.css med en massa variabler som gör en hel massa saker, om du öppnar _vars.scss du borde se dem alla ...
$ Debug-mode är praktisk för projekt i utveckling; det här kommer att påkalla debug-plugin som levereras med inuit.css och kommer visuellt att flagga i webbläsaren, eventuellt otillgänglig eller besvärlig kod.
$ Base-font-size och $ Base-line-height är ganska självförklarande men oerhört Viktig. Med tanke på dessa två informationsuppgifter kan inuit.css börja sätta upp hela din vertikala rytm (se textstorlek() blanda in _mixins.scss för mer information).
Resten av variablerna är ganska mycket bara teckensnittstorlekar för dina rubriker. Dessa, tillsammans med din $ Base-font-size och $ Base-line-height variabler, vad kompletterar din vertikala rytm. Försök ändra dessa variabler och se vad som händer!
Nästa steg är en som jag tycker är väldigt användbar; öppna inuit.scss och du hittar ett enormt innehållsförteckning och en lång lista över importerade partiklar. Det är bra att kommentera alla föremål och abstraktioner genast och avkänna dem som du behöver dem. Det betyder att du måste avsiktligt kalla dem när de behövs och att du inte bunter mycket oanvänd CSS.
När dina filer är övervakade, anger du dina variabler och dina oanvända objekt, du är upptagen på inuit.css ...
Det finns en bra chans att du inte arbetar direkt med kommandoraden, i så fall kan du använda en av de många applikationer som finns tillgängliga för att sammanställa Sass. CodeKit är ett sådant exempel och (vad vi behöver för det här) uppträder mycket som någon annan kompilator, oavsett vilken plattform du kör.
Så för att skapa ett inuit.css-projekt måste du först ta tag i källfilerna från GitHub-arkivet:
När du har släppt ut filerna, ordna dem till en välbekant projektlayout, till exempel här:
Som du kan se har jag kastat innehållet i inuit källkatalogen till en css mapp. Jag har också blivit av med README.md och watch.sh-filerna.
Öppna sedan din kompilator (CodeKit i det här fallet) och instruera det att titta på din projektmapp. I de flesta OS X-kompilatorer är det bara ett fall att dra din projektmapp i programfönstret. Som du kan se nedan följer CodeKit nu mina inuit.css-master mapp och har markerat .scss-filerna som kommer att sammanställas direkt. Vilken fil som helst med föregående understrykning kommer inte att skapa sin egen .css-fil, även om den kan importeras till andra filer.
Jag har inte bytt namn på något i det här fallet, men det kommer du att se your-project.scss är inställd att kompilera i sin .css namnägare. Allt jag behöver göra är att haka den css-filen upp till mitt index.html:
Mitt eget inuitprojekt Tunngahugit (välkommen, i Inuit)
När jag sparar mina projektfiler i en kodredigerare, komprimerar CodeKit projektet för mig och laddar om webbläsarfönstret i flyg.
Att utvidga inuit.css är något vi kan täcka i den andra delen av denna handledning, men för nu är allt du behöver veta att det är så enkelt som your-project.scss berättar för dig:
/ ** * Hon är allt, Cap'n ... Börja importera dina saker här. * /
