Säätiö 6 - 10 Amazing New Features

Säätiön front-end-kehyksen kehittäjät eivät ole vain istuneet laakereillaan, kun taas Bootstrap-tiimi on työskennellyt vaikuttavan uuden merkittävän julkaisunsa parissa. Viime vuonna he kävivät awesome World Tourilla jakamaan tietonsa käyttäjiensa kanssa ja kysyivät heiltä, ​​miten he käyttivät säätiötä heidän tosielämässä.

Palattuaan työpöydänsä, he kokoontuivat käyttäjien tarpeet ja toiveet ja aloittivat suunnitelman uudesta suuresta vapauttamisesta: Foundation 6.

Se on vielä kehitteillä, mutta suunnitelmat ovat hyvin lupaavia. Tulevat ominaisuudet keskittyvät kolmeen pääalueeseen: suorituskyky, muokattavuus ja saavutettavuus. Katsotaanpa nyt 10 näistä ominaisuuksista.

1. Tehostettu työnkulku

Käyttäjän kokemusten perusteella säätiön tiimi kehitti uuden iskulauseen, nimittäin “Prototyyppi tuotantoon”, Foundation 6. Tämä tarkoittaa uutta, virtaviivaista työnkulkua, jonka avulla suunnittelijat ja kehittäjät voivat mennä suoraan prototyypistä tuotantoon.

Uuden säätiön 6 tavoitteena on tarjota joustava ja helposti muokattava kehys, joka mahdollistaa kirjoita puhdas ja semanttinen koodi alusta alkaen. Nykyinen versio, Foundation 5, sallii myös nopean prototyypin, mutta voimme odottaa lisää työnkulun optimointia tulevassa julkaisussa.

2. Yksinkertaistettu asennusprosessi Sass-versiolle

Yksi mahtavimmista asioista säätiön kehyksessä on, että se on rakennettu Sass-tyylitaulukon kielellä, joten se on mahdollista räätälöi oletusasetukset nopeasti todellisiin tarpeisiimme.

Sass-asennusprosessi on kuitenkin ollut hieman pelottava monille käyttäjille, joten uusi suuri julkaisutapahtuma saat Sass-version yksinkertaistetun asennusprosessin. Tämä tarkoittaa sitä, että Sassin asennus tulee vaativat paljon vähemmän riippuvuuksia kuin ennen. Tietenkin, jos haluat vanilja CSS-version, voit silti valita sen.

3. Uusi, souped up -asetuspino maximalisteille

Sass-version lisäksi säätiö 6 tulee upotettuna Sass-versio, joka tarjoaa kehittäjille tehokkaita muokkausasetuksia.

Säätiön luoja ZURB avaa oman kehityspinonsa yleisölle, myös omille staattisen sivuston generaattori, live-reload -palvelin ja paljon sisäisiä optimointitekniikoita mukaan lukien UnCSS: n integrointi käyttämättömien tyylejä poistettaessa ja UglifyJS JavaScript-pakkausta varten.

Joten pohjimmiltaan meillä on mahdollisuus työskennellä samassa kehitysympäristössä, jota ZURB käyttää sisäisesti.

4. Vähennetty sivun latausaika

Säätiön joukkue joutui kohtaamaan rakentavaa kritiikkiä, jotka väittivät, että useimmissa säätiöhankkeissa noin 90% CSS-koodista menee unusued. Tämä ei koske vain säätiötä, vaan myös muita tärkeitä CSS-kehyksiä, kuten Bootstrap ja TopCoat. Osana vastaustaan ​​Zurb päätti vähentää merkittävästi tuotetun CSS: n tiedoston kokoa toteuttamalla noin 40-50% koodin pienentämisen.

On mielenkiintoista huomata, että he yrittävät erottaa itsensä Bootstrapista ilmoittamalla "Säätiö ei ole kehys, jolla on tyylillisiä luokkamarginaaleja ja pehmusteita tai pyöreitä ja säde". (Katso lisätietoja Bootstrap 4: n uusista apuohjelmaluokista edellisessä postissa).

5. Perustyylit, jotka toimivat Wireframeina

Toinen osa suorituskyvyn parantamisen pyrkimystä on luo perustyyli, joka toimii lankakuvana lopullisen suunnittelun sijasta. Tämä johtaa ensisijaisesti kevyempään teemaan, mutta sillä on myös toinen suuri etu. Kun enemmän tyylisääntöjä siirretään yksittäisiin osiin, kehittäjillä on mahdollisuus tyyliä helpommin.

Toivottavasti tämä tarkoittaa sitä, että säätiön perustuvat sivustot niillä on vähemmän samanlaista, standardoitua ulkoasua, ja suunnittelijoilla on enemmän tilaaerite, jossa on kaunis ja ainutlaatuinen solutionit, jotka kumoavat äskettäiset huolet tylsää näköistä verkkoa kohtaan.

6. Helpotettu valikoiva tuonti

Foundation 5 antaa kehittäjille mahdollisuuden valita vain ne osat, joita he haluavat käyttää. Säätiö 6 tekee tämän pyrkimyksen seuraavalle tasolle selektiivisen tuontitoiminnon siirtäminen _settings.scss Sass-tiedostoon.

Näin _settings.scss on a todella universaali kokoonpanotiedosto, koska emme voi vain mukauttaa ominaisuuksia, kuten rivin leveyttä tai oletusfontteja, sen avulla, vaan myös helposti poistaessamme komponentteja, joita emme tarvitse. Jos näin tehdään, voimme saavuttaa lisää suorituskyvyn parantamista.

7. Leaner ja Cleaner Sass

Uudelleensuunnitteluprosessissa säätiön ryhmä tarkasteli uudelleen kaikkia puitteiden osa-alueita, joten he myös muutti tapaa, jolla he ovat käyttäneet Sass-tyylitaulukon kieltä. He havaitsivat, että joissakin tapauksissa he ovat käyttäneet Sassia, joka johti siihen CSS-tuotoksen tarpeeton ylikomplisointi. Tavoitteena on, että heidän mielessään on pienempi ja puhtaampi koodikanta, jotka ovat järkeistäneet myös Sass-rakennettaan.

Säätiössä 6 voimme odottaa pienentynyttä pesimistä ja spesifisyyttä, virtaviivaistetut mediakyselyt (ne yhdistivät toistuvan koodin), ja skaalattu takakomponenttien sekoitus. Jälkimmäinen tarkoittaa sitä, että komponenttiseoksia on vähemmän, ja jäljellä olevilla on vähemmän parametreja, mikä johtaa yksinkertaisempaan ja loogisempaan koodiin

Jos rakastat mixinit, älä huoli, jokaisella komponentilla on edelleen niitä, se on vain, että ne suunnitellaan uudelleen tehokkaammiksi ja hyödyllisemmiksi kuin ne ovat tällä hetkellä.

8. Parannettu ristikkoseos

Samalla kun leikataan komponenttiseoksia, säätiö 6 tulee parannettu ristikkoseokset se antaa meille mahdollisuuden luo muokattu ruutu.

Zurb lupaa, että voimme helposti rakentaa monimutkainen verkkojärjestelmä kuten haluamme, mukaan lukien kehittyneempiä rivejä ja sisäkkäiset verkot, ja kyky muuntaa oletusluokat semanttiseksi merkinnäksi. Parannetut ristikkoseokset tekevät virran verkkojen luominen entistä intuitiivisemmaksi, joustavammaksi ja nopeammaksi.

9. Mukautettujen JavaScript-laajennusten saumaton integrointi

Säätiö 5: llä on tällä hetkellä monia JavaScript-komponentteja, kuten viileä modaali-valintaikkuna, työkaluvihje, tahmea navigointipalkki, valolaatikot ja monet muut, joita nykyaikainen verkkosivusto tarvitsee, mutta tulevan suurimman julkaisun avulla voimme kirjoita mukautetut JavaScript-laajennukset säätiön ytimen hyödyntäminen. Se on suuri askel eteenpäin molemmissa käyttäjäystävällisyys ja suorituskyky.

Tulevaisuudessa voimme pääset sisäänrakennettuihin alustustapoihin, vaihtaa liipaisimia ja breakpoints, ja hyödyntää säätiön globaalin JavaScriptin kaikkia muita ominaisuuksia.

10. Täysi saatavuus

Uuden säätiön hämmästyttävin piirre 6 on, että se on täysin saatavilla. Jokainen komponentti- ja koodinpätkä sisältää asianmukaiset WAI-ARIA-määritteet ja maamerkki roolit. Lisäksi kehittäjät ovat jopa käyttöoppaassa noin miten a11y web-standardeja käytetään.

Joten jos haluamme tarjota asiakkaillemme täysin saatavilla olevan verkkosivuston, meidän ei tarvitse tehdä mitään muuta kuin rakentaa suunnittelumme säätiön 6 kanssa. Huomaa, että meidän on vielä lisää asianmukaiset ARIA-säännöt omille HTML-sivuillemme, vaikka Zurbin tuleva a11-käyttöopas helpottaa varmasti oppimisprosessia.