9 Jännittävää avoimen lähdekoodin kehyksiä
Jokainen CSS-kehittäjä pitäisi tietää Sassista nähdä, mitä se tarjoaa. Tämä CSS: n superset on mullistanut tyylitiedostot aivan kuten jQuery mullisti JavaScriptin.
Ja monien rinnalla CSS UI -kehykset Meillä on myös SCSS / Sass frontend -kehykset. Suurin osa näistä on melko uusi, mutta vetää nopeasti.
Olemme kurittaneet 9 parasta vapaata SCSS-kehystä, joten jos olet Sass-käyttäjä, varmasti haluat tarkistaa nämä.
1. Sierra
Sierra framework Sierra-puitteet on mainostettu yhdeksi markkinoiden kevyimmistä ja pienimmistä SCSS-kehyksistä. Tällä hetkellä v2.0 se painaa yhteensä 37 kilotavua.
Tämä ei välttämättä ole kirjaimellisesti pienin mahdollinen vaihtoehto, mutta jopa minified Bootstrap-tyylitaulukko on yhteensä ~ 120KB, joten Sierra on melko kevyt. Se on myös hyvin järjestetty erillisillä tiedostoilla miksereille, painikkeille, taulukoille, typografialle ja muille tavallisille sivuelementeille.
Tämä tiedostojen erottaminen on standardi Sass-kehitykselle, ja se tekee työstäsi paljon helpommaksi kehyksen räätälöinnissä.
Löydät täydellisen live-esityksen, jossa on kaikki tärkeimmät elementit Sierran pääsivulle sekä asennusdokumentaatio GitHubissa . Arvostan tämän kaikkien kolmen Sass-kehyksen kolmesta parasta, joten kannattaa katsoa, jos olet utelias.
2. Skootteri
Dropboxin tiimi laati yhteen omat etupuudut Skootteri . Tämä on paljon yksinkertaisempi kuin useimmat, koska se on luotu frontend prototyping.
Dropboxilla on todella paljon avoimen lähdekoodin tavaraa GitHubissa, joka sisältää omat tyyliopas CSS / SCSS-koodin muotoiluun. Tämä pieni resurssi voi osoittautua uskomattoman hyödylliseksi, jos haluat sukeltaa Scootteriin ja sävyttää oletuslähteen.
Suurin osa Scooter-tyylistä todella lainaavat ideoita Dropboxilta kuten niiden painikkeita komponenttisivu . Tämä tarjoaa viileän tavan prototyyppaamaan omia web-sovelluksiasi Sassissa käyttäen kokeiltua ja testattua UI-tyyliä.
3. Kickback
Jotain hieman yksityiskohtaisempaa voit kokeilla Käynnistää kirjasto. Tämä toimii Sass-alustalla ja sillä on oma nimeämissuunnitelma uusien muuttujien lisäämiseen.
Mutta Kickoff sekoittaa hieman kaiken CSS-ruudukkoista monimutkaisempaan JS-komponenttiin, jotka kaikki toimitetaan ja ylläpidetään Gulp.js .
Jos et vielä käytä Gulpia, tämä kehys on hieman oppimiskäyrä. Mutta koko koodibussi on hyvin tulevaisuuteen keskittyvä ja keskittyy ES2016 ja flexboxiin .
Tämä on poikkeuksellisen laiha ja vain 8,6 kt: n CSS-tyylitaulukko ja mihinkkäinen 2 kt JavaScript. Kickoff on tarkoitettu kenttään, jossa se on pelkästään lähtökohtana, joten voit rakentaa jotain hankalia tai yksityiskohtaisia tarpeita mihin tahansa projektiin.
Ota kurkistaa heidän online-demo nähdäksesi kuinka tämä näyttää selaimessa.
4. Materialize
Kaikki tietävät Googlen materiaalisuunnittelu ja kuinka nopeasti se levisi verkossa. Tämä johti siihen, että monet kehittäjät luoneet omia tyylitiedostoja jäljittelemään Googlen ohjeita ja jotkut näistä tyylisivuista ovat verkossa ilmaiseksi.
toteutua on yksi esimerkki CSS / Sass -kehyksestä, joka on rakennettu erityisesti Googlen suuntaviivoihin. Kehys on teknisesti beta-versiossa 0.9 tämän kirjoittamisen jälkeen.
Mutta haluaisin sanoa, että se on tarpeeksi valmis tuotanto-sivustoille ja siellä on Sass-vaihtoehto intro-sivu . Joten voit joko ladata perus CSS / JS-tiedostoja tai hankkia CSS + Sassin edelleen kehittämiseen.
Tämä on niin suosittua, että se on käytettävissä CDN: issä joten sinun ei tarvitse ladata CSS: ää paikallisesti.
Jokainen, joka sopii Googlen materiaalityyleihin, olisi ehdottomasti aloitettava Materialize-kirjastolla. Löydät täydelliset dokumentit verkkosivuilla yhdessä näyttely verkkosivuilla, jotka toimivat Materialize.
5. Hocus-Pocus
Hocus-Pocus Hokkuspokkus puitteet eivät ole puitteet vaan pikemminkin aloituspakkaus uusien hankkeiden suunnittelulle.
Tämä käyttöliittymän paketti restilee kaikki oletus HTML-elementit verkkosivulla ja se tulee mukavaksi reagoiva verkko näiden osien yhdenmukaistamiseksi. Luonnollisesti koko asia perustuu Sassiin, mikä tekee dev-prosessista paljon yksinkertaisemman.
Hocus Pocus tuntuu enemmän kuin Bootstrapin vastakohta. Et käytä tätä suoraan live-sivustolla. Mutta käytit tätä lähtökohtana prototyyppien luomisessa ja ideoiden luomisessa nopeasti. Vaikka se voi toimia hyvin alustana, koska se toimii normalisoitua .
Pre-styled taulukoista painikkeisiin ja mukautettuihin lomakeelementteihin Hocus Pocus lisää minimalistisen kosketuksen kaikkiin oletusselaimen tyyppeihin.
6. Gridle
Gridle framework Gridle-kehys on yksi muokattavissa olevista SCSS-ristikkorakenteista, joita löydät. Se on powered by Sass ja siinä on kymmeniä mukautettuja mixins ja toimintoja, jotka on tehty nimenomaan tähän ristikkojärjestelmään.
Löydät live-esikatselun demo-sivu täällä isännöi ilmaiseksi GitHubissa. Mukana on myös täydellinen asennusopas pääostoon joka käsittelee kuinka ruutujen määrittäminen on helppoa monimutkaisemmaksi.
Huomaa, että Gridle vaatii joitain olemassa olevia ristikkojärjestelmien tietämystä ja se ei todellakaan ole maaginen luoti.
Mutta se säästää tuntikausia käsin tekemällä verkon tyhjästä, puhumattakaan siitä, että se on uudelleenkäytettävissä melko paljon projekteille.
7. iotaCSS
Yksi parhaista menetelmistä CSS: n jäsentämisessä on OOCSS tyyli. Tämä seuraa objektirakenne jossa suunnittelet enemmän luokkia ja suhteita kuin sisäkkäistä spesifisyyttä.
iotaCSS on yksi harvoista OOCSS-kehyksistä ja se on todella helppokäyttöinen. Voit selata a mini esikatselu lähdekoodista nähdäkseen nimeämiskäytännöt ja miten tämä käyttää BEM / OOCSS-syntaksia.
Yksi ainutlaatuinen ero iota on se, että se ei ole erityisesti UI-pakki. Sen sijaan se on kehys, joka auttaa sinua luomaan käyttöliittymäsarjan vain Sassin kautta. Tämä tarkoittaa, että se ei ole plug & play -ratkaisu, mutta se tarjoaa myös paljon muokkausta.
online documentation verkko-ohjeet on ilmiömäinen, joten tämä on loistava kehys rakentaa oma Sass-powered tyylitaso tyhjästä.
8. Bulma
Nykyaikainen CSS on siirtymässä kohti modulaarista ja joustavaa rakennetta flexboxilla. Tämä näyttää olevan uusi normaali ja Bulma johtaa maksua.
Tämän ilmaisen Sass-kehyksen ansiosta voit työskennellä yksinomaan flex-laatikolla ja luoda täysin reagoivien verkkojärjestelmien alusta. Tämä tarkoittaa helppoa pystysuuntaista + vaakasuoraa keskitystä, kiinteäkorkeita ruudukko ruutuja ja koko joukko oletustyylit.
Löydät live-esityksiä Pääsivu sekä asennusohjeet GitHubissa .
Oletuksena Bulma on vain CSS-tiedosto ja se on jopa isännöity CDN ilmaiseksi. Kehittäjiä kannustetaan kuitenkin lataamaan Sass-tiedostot ja toimimaan muuttujilla lisätä omia ominaisuuksia.
9. Susy
Susy on reagoiva Sass-työkalu työkalujen luomiseen tyhjästä. Se on ainutlaatuinen kirjasto, koska siinä ei ole oletusarvoista verkkoasetusta tai tyyliteltyä, joka on valmis käynnistämään.
Sen sijaan Susy tarjoaa sarjan työkaluja opetusohjelmilla että voit seurata luomalla omat ruudukon ulkoasut.
Näiden eri työkalujen avulla voit määrittää muuttujat mukautetuille raja-arvoille, mukautetuille ruudukko- / kouruasetuksille ja heittää lukuisia sekoittimia hyvästä mittauksesta. Voit muotoilla sisäkkäisiä elementtejä nopeasti ja kohdistaa vain tiettyjä sivuelementtejä vain muutamalla rivillä olevaa koodia.
Koska tällä ei ole oletustyyliä, se ei ole valmis ratkaisu. Mutta jos olet Sass-kehittäjä, joka pyrkii säästämään aikaa, hanki sitten läpi Susyn dokumentit ja katso, mitä mieltä olet.
