9 Spännande Open Source Sass-ramar
Varje CSS-utvecklare ska vet om Sass för att se vad det erbjuder. Denna superset av CSS har revolutionerat stylesheets mycket som jQuery revolutionerade JavaScript.
Och bredvid många CSS UI-ramar Vi har också SCSS / Sass frontend-ramar. De flesta av dessa är ganska nya men får snabbt grepp.
Vi har curated 9 av de bästa gratis SCSS-ramarna här, så om du är en Sass-användare så kommer du definitivt att kolla in dessa.
1. Sierra
De Sierra ramverk betecknas som en av de lättaste och minsta SCSS-ramarna på marknaden. För närvarande i v2.0 väger det totalt 37KB.
Det här kanske inte är bokstavligen det minsta alternativet där ute, men även det minifiera Bootstrap stilarket totals ~ 120KB så Sierra är ganska lätt. Det är också välorganiserat med separata filer för mixins, knappar, tabeller, typografi och andra vanliga sidelement.
Denna filseparation är standard för Sass-utveckling och det gör ditt jobb mycket enklare när du anpassar ramen.
Du hittar en komplett levande demo med alla huvudelement på Sierra huvudsidan tillsammans med installationsdokumentationen på GitHub . Jag skulle betygsätta detta i de tre bästa av alla Sass-ramar så det är definitivt värt en titt om du är nyfiken.
2. Scooter
Teamet på Dropbox sätter samman sin egen frontendram kallad Skoter . Den här är mycket enklare än de flesta eftersom den skapades för frontend prototypning.
Dropbox har faktiskt många öppna källmaterial på GitHub som innehåller sina egna stil guide för att formatera CSS / SCSS-kod. Den här lilla resursen kan visa sig otroligt användbar om du vill dyka in i Scooter och tinker med standardkällan.
De flesta av Scooter-stilar lånar faktiskt idéer från Dropbox som deras knappar på komponentsida . Detta erbjuder ett coolt sätt att prototyper dina egna webbapps i Sass medan du använder en testad och testad UI-stil.
3. Kickoff
För något lite mer detaljerat kan du prova Avspark bibliotek. Detta körs på en Sass-bas och har sin egen namngivningsschema för att lägga till nya variabler.
Men Kickoff blandar lite av allt från CSS-nät till mer komplexa JS-komponenter som alla levereras och underhålls genom Gulp.js .
Om du inte redan använder Gulp så har denna ram lite av en inlärningskurva. Men hela kodbasen är väldigt framtidscentrerad med fokus på ES2016 och Flexbox .
Det här är ovanligt lutet med ett CSS-stilark med endast 8,6 KB och en måttlig 2 KB JavaScript. Kickoff är tänkt som en panna där det bara är en utgångspunkt, så att du kan bygga ut något så litet eller detaljerat som nödvändigt för något projekt.
Ta en titt på deras online demo för att se hur det ser ut i webbläsaren.
4. Materialisera
Alla vet om Googles materialdesign och hur snabbt det sprider sig över webben. Detta ledde till att många utvecklare skapade egna stylesheets för att efterlikna Googles riktlinjer och några av dessa stylesheets är gratis online.
Förverkligas är ett exempel på en CSS / Sass-ram byggd speciellt på Googles riktlinjer. Ramverket är fortfarande tekniskt i beta-version 0.9 från det här skrivandet.
Men jag skulle argumentera för att det är tillräckligt för produktionswebbplatser och det finns ett Sass-alternativ direkt intro sidan . Så du kan antingen ladda ner de grundläggande CSS / JS-filerna eller få CSS + Sass för vidareutveckling.
Det här är så populärt att det är tillgängligt på CDN så du behöver inte ens ladda ner CSS lokalt.
Någon som överensstämmer med Googles materialstilar bör absolut börja med materialiseringsbiblioteket. Du hittar fullständig dokumentation på webbplatsen tillsammans med en showcase av webbplatser som kör materialisera.
5. Hocus-Pocus
De Hokus pokus ramarna betraktar sig inte som en ram, utan snarare en startpaket för utformning av nya projekt.
Denna UI-kit återställer alla standard HTML-element på en webbsida och det kommer med ett bra responsivt rutnät att anpassa dessa element. Naturligtvis beror det hela på Sass vilket gör dev-processen mycket enklare.
Hocus Pocus känns mer som motsatsen till Bootstrap. Du skulle inte använda det direkt på en levande hemsida. Men du skulle använda detta som utgångspunkt för att prototyper och bygga idéer snabbt. Även om det kan fungera bra som en bas också eftersom den går på Normalisera .
Från pre-styled bord till knappar och anpassade formelement, lägger Hocus Pocus en minimalistisk beröring till alla standardwebbläsarstilar.
6. Gridle
De Gridle-ramverket är en av de mest anpassningsbara SCSS-gridramarna du hittar. Den drivs av Sass och den levereras med dussintals anpassade mixins och funktioner som är gjorda speciellt för detta nät system.
Du hittar en live förhandsgranskning på demo sida här värd gratis på GitHub. Det finns också en komplett installationsguide på huvudrepo som täcker hur man definierar rutnät från mycket enkelt till mer komplext.
Observera att Gridle kräver viss befintlig kunskap om nätsystem och det är verkligen inte en magisk kula.
Men det kommer att spara dig timmar med att manuellt skapa ett rutnät från början, för att inte tala om att det är återanvändbart för stort sett alla projekt du designar.
7. iotaCSS
En av de bästa metoderna för att strukturera CSS är OOCSS stil. Detta följer en objektstruktur där du designar för fler klasser och relationer snarare än kapslad specificitet.
iotaCSS är en av de få OOCSS-ramarna och det är riktigt enkelt att använda. Du kan bläddra igenom en mini förhandsgranskning av källkoden för att se namngivningskonventioner och hur detta använder BEM / OOCSS-syntax.
En unik skillnad om iota är att det inte är specifikt ett UI-kit. I stället är det ett ramverk som hjälper dig att skapa ett UI-kit endast genom Sass. Det betyder att det inte är en plug & play-lösning, men det erbjuder också mycket mer anpassning.
De online dokumentation är fenomenal så det här är en fantastisk ram för att bygga upp ditt eget Sass-driven stilark från början.
8. Bulma
Modern CSS rör sig mot en modulär och flexibel struktur med flexbox. Detta verkar vara det nya normala och Bulma leder ledningen.
Med den här kostnadsfria Sass-ramen kan du bara arbeta med flexbox för att skapa fullt responsiva rutsystem från början. Detta betyder lätt vertikal + horisontell centrering, rutor med fast höjd och en hel massa standardstilar.
Du kan hitta live demos på huvudsida tillsammans med installationsanvisningarna på GitHub .
Bulma är som standard bara en CSS-fil och det är även värd på CDN gratis. Men utvecklare uppmanas att ladda ner Sass-filerna och arbetet med variabler att lägga till egna funktioner.
9. Susy
Susy är en responsiv Sass verktygslåda för byggnadslayouter från början. Det är ett unikt bibliotek eftersom det inte kommer med en standard nätverksinstallation eller ett stylesheet redo att starta.
Istället erbjuder Susy en rad verktyg med handledning som du kan följa för att skapa egna gridlayouter.
Dessa olika verktyg låter dig definiera variabler för anpassade brytpunkter, anpassade rutnät / gutter inställningar och kasta i en mängd olika mixins för bra mått. Du kan snabbt utforma kapslade element och rikta in mycket specifika sidelement med bara några rader av kod.
Eftersom det här inte kommer med ett standardformat är det inte en färdig lösning. Men om du är en Sass-utvecklare som vill spara tid skimma du igenom Susys dokument och se vad du tycker.
