9 spennende Open Source Sass-rammer
Hver CSS-utvikler skal vet om Sass å se hva den tilbyr. Denne supersettet av CSS har revolusjonert stilark som mye som jQuery revolusjonerte JavaScript.
Og sammen med mange CSS UI rammeverk Vi har også SCSS / Sass frontend-rammer. De fleste av disse er ganske nye, men får raskt traksjon.
Vi har kurert 9 av de beste gratis SCSS-rammene her, så hvis du er en Sass-bruker, vil du definitivt sjekke ut disse.
1. Sierra
De Sierra rammeverk er spioneringen som en av de letteste og minste SCSS-rammene på markedet. For tiden i v2.0 veier den totalt 37KB.
Dette kan ikke være bokstavelig talt det minste alternativet der ute, men til og med det minifiserte Bootstrap-stilarket totals ~ 120KB så Sierra er ganske lett. Det er også godt organisert med separate filer for mixins, knapper, tabeller, typografi og andre vanlige sideelementer.
Denne filseparasjonen er standard for Sass-utvikling, og det gjør jobben mye enklere når du tilpasser rammen.
Du finner en komplett live demo med alle hovedelementene på Sierra's hovedside sammen med oppsettdokumentasjon på GitHub . Jeg vil rangere dette i de tre øverste av alle Sass-rammer, så det er definitivt verdt å se om du er nysgjerrig.
2. Scooter
Teamet på Dropbox satt sammen sine egne frontendrammer kalt scooter . Denne er mye enklere enn de fleste siden den ble opprettet for frontend prototyping.
Dropbox har faktisk mange åpen kildekode-ting på GitHub som inkluderer sine egne stilguide for formatering av CSS / SCSS-kode. Denne lille ressursen kan vise seg å være utrolig nyttig hvis du vil dykke inn i Scooter og tinker med standardkilden.
De fleste av Scooter stilene låner faktisk ideer fra Dropbox som deres knapper på komponentside . Dette gir en fin måte å prototype dine egne webapps på i Sass, mens du bruker en testet og testet brukergrensesnitt.
3. Kickoff
For noe litt mer detaljert kan du prøve kickoff bibliotek. Dette kjører på en Sass base og har sin egen navneordning for å legge til nye variabler.
Men Kickoff blander litt av alt fra CSS-nett til mer komplekse JS-komponenter som alle leveres og vedlikeholdes gjennom Gulp.js .
Hvis du ikke allerede bruker Gulp, har dette rammeverket litt av en læringskurve. Men hele kodebase er veldig fremtidsorientert med fokus på ES2016 og flexbox .
Dette er usedvanlig magert med et CSS-stilark på bare 8,6 kB og en measly 2KB JavaScript. Kickoff er ment som en boilerplate hvor det bare er et utgangspunkt, slik at du kan bygge ut noe så tynt eller detaljert som nødvendig for et hvilket som helst prosjekt.
Ta en titt på deres online demo for å se hvordan dette ser ut i nettleseren.
4. Materialisere
Alle vet om Googles materiell design og hvor fort det spredte seg over nettet. Dette førte til at mange utviklere lagde egne stilark for å etterligne Googles retningslinjer, og noen av disse stilarkene er gratis gratis.
materialiserer er et eksempel på et CSS / Sass-rammeverk som er bygget spesielt på Googles retningslinjer. Rammen er fortsatt teknisk i beta versjon 0.9 fra denne skrivingen.
Men jeg vil hevde at det er komplett nok til produksjonsnettsteder, og det er et Sass-alternativ rett på intro-siden . Så du kan enten laste ned de grunnleggende CSS / JS-filene eller få CSS + Sass for videreutvikling.
Dette er så populært at det er tilgjengelig på CDN så du trenger ikke engang å laste ned CSS lokalt.
Alle som følger Googles materielle stiler, bør absolutt starte med materialiseringsbiblioteket. Du finner fullstendig dokumentasjon på nettstedet sammen med et showcase av nettsteder som kjører materialisere.
5. Hokus-Pocus
De Hokus pokus Rammer ser ikke seg selv som et rammeverk, men snarere en startpakke for å designe nye prosjekter.
Denne UI-pakken restyler alle standard HTML-elementene på en nettside, og den kommer med en fin responsivt rutenett å justere disse elementene. Naturligvis er det hele Sass som gjør dev prosessen enklere.
Hocus Pocus føles mer som antitese til Bootstrap. Du ville ikke bruke dette direkte på en levende nettside. Men du vil bruke dette som utgangspunkt for å prototype og bygge ideer raskt. Selv om det kan fungere godt som en base også siden den går på normal~~POS=TRUNC .
Fra pre-styled bord til knapper og tilpassede formelementer, legger Hocus Pocus en minimalistisk berøring til alle standard nettleser stiler.
6. Gridle
De Gridle rammeverk er et av de mest tilpassbare SCSS-gridrammene du finner. Det er drevet av Sass, og det kommer med dusinvis av tilpassede mixins og funksjoner laget spesielt for dette rutenettet.
Du finner et live forhåndsvisning på demo side her Hosted gratis på GitHub. Det er også en komplett oppsettguide på hovedreko som dekker hvordan du definerer grids fra veldig enkelt til mer komplekst.
Legg merke til at Gridle krever noen eksisterende kunnskaper om rutenettsystemer, og det er absolutt ikke en magisk kulde.
Men det vil spare deg for mange timer med håndbearbeiding av et rutenett fra begynnelsen, for ikke å nevne at det er gjenbrukbart for stort sett ethvert prosjekt du designer.
7. iotaCSS
En av de beste metodene for å strukturere CSS er OOCSS stil. Dette følger en objektstruktur hvor du designer for flere klasser og relasjoner i stedet for nestet spesifisitet.
iotaCSS er en av de få OOCSS-rammeverkene, og det er veldig enkelt å bruke. Du kan bla gjennom en mini forhåndsvisning av kildekoden for å se navngivningskonvensjoner og hvordan dette bruker BEM / OOCSS-syntaks.
En unik forskjell med iota er at det ikke er spesifikt et UI-sett. I stedet er det et rammeverk som hjelper deg med å lage et UI-sett utelukkende gjennom Sass. Dette betyr at det ikke er en plug & play-løsning, men det tilbyr også langt mer tilpasning.
De online dokumentasjon er fantastisk, så dette er et fantastisk rammeverk for å bygge opp ditt eget Sass-drevne stilark fra begynnelsen.
8. Bulma
Moderne CSS beveger seg mot en modulær og fleksibel struktur med flexbox. Dette synes å være den nye normale og Bulma leder ledelsen.
Denne gratis Sass-rammen lar deg arbeide utelukkende med flexbox for å skape helt lydhørssystemer fra bunnen av. Dette betyr lett vertikal + horisontal sentrering, rutenett med fast høyde og en hel rekke standardstiler.
Du kan finne live demoer på hovedside sammen med installeringsanvisninger på GitHub .
Som standard er Bulma bare en CSS-fil, og det er enda vert for CDNs gratis. Men utviklere oppfordres til å laste ned Sass-filene og arbeidet med variabler å legge til dine egne funksjoner.
9. Susy
Susy er en responsiv Sass verktøykasse for bygningsoppsett fra bunnen av. Det er et unikt bibliotek fordi det ikke kommer med et standardnettoppsett eller et stilark klar til å starte.
I stedet tilbyr Susy en rekke verktøy med opplæringsprogrammer som du kan følge for å lage dine egne gridoppsett.
Disse ulike verktøyene lar deg definere variabler for egendefinerte bruddpunkter, tilpassede grid / gutter innstillinger, og kaste i en rekke mixins for godt mål. Du kan raskt utforme nestede elementer og målrette mot svært spesifikke sideelementer med bare noen få linjer med kode.
Siden dette ikke kommer med et standard stilark, er det ikke en klar løsning. Men hvis du er en Sass-utvikler som ønsker å spare tid, så skum gjennom Susys dokumenter og se hva du synes.
