Predstavljamo CSS Gridish: alat otvorenog koda koji će pomoći vašem timu da danas prilagodi CSS Grid

Danas sam uzbuđen što predstavim novi alat otvorenog koda iz IBM-a pod nazivom CSS Gridish!

CSS Gridish uzima dizajnerske specifikacije mreže vašeg proizvoda i izrađuje nekoliko resursa za vaš tim koji će koristiti:

  • Datoteka skice s umjetničkim pločama i postavkama rešetki / izgleda za dizajnere
  • CSS / SCSS kôd koji koristi CSS Grid s CSS Flexbox nadoknadom za programere
  • Proširenje za Google Chrome za svakoga tko može provjeriti poravnanje web stranice

Cilj je pomoći timovima brže prilagoditi CSS Grid i omogućiti složenije izglede. Kako biste pokazali koliko je alat svestran, evo nekoliko primjera rešetki tvrtke Bootstrap, Carbon Design System i Material Design.

Zašto su IBM-ovi programeri to napravili

Nova specifikacija CSS Grid odlična je za web dizajn. Sada, dizajneri mogu uložiti onoliko pažnje u osi y koliko su imali x-os u prošlosti. Projekti slijeva i desno počinju dokumentirati svoj prijelaz na CSS Grid.

Mnogi IBM-ovi timovi rado koriste CSS Grid, ali suočavaju se s nekoliko blokade koje treba prevladati. CSS Gridish pomaže rješavanjem ovih blokera.

Gornja snimka zaslona je učitavanje stranice na Chromeu pomoću CSS Grid-a. Donja snimka zaslona je ista stranica na IE 11 koja koristi CSS Flexbox. (Izvor)

Kompatibilnost preglednika

CSS Grid trenutno ima sjajnu podršku preglednika (~ 75%). Ipak, još uvijek je potrebno puno proizvoda da bi se poslužili preostali preglednici. Na primjer, ibm.com i dalje prima 10% svog prometa od Internet Explorera. Za potporu tim starijim preglednicima potrebno je mnogo dodatnog rada.

Dok CSS Gridish uvijek izrađuje yourGrid.css koji koristi CSS Grid, on također gradi datoteku koju nazivamo yourGrid-legacy.css. Ova naslijeđena datoteka i dalje poslužuje CSS Grid kod samo ako je preglednik podržava. Ako preglednik ne podržava CSS Grid, korisniku se servira povratni prikaz flexbox-a. Dodajte dodatne klase za svojGrid-legacy.css i dodali ste povratnu kompatibilnost!

Što učiniti ako više ne morate podržavati starije preglednike? Potrebno je samo prebacivanje na vašGrid.css za brijanje dragocjenih kilobajta s iskustva.

Dizajn i kod premošćivanja

Pojavili su se sjajni alati koji stvaraju jedinstveni izvor istine za dizajn i kod kao što su React Sketchapp i Lona. Ovi alati osiguravaju da dizajneri i programeri izrađuju s istim komponentama.

Koristite Chromeovo proširenje za CSS Gridish da biste pregledali web stranice s istim mrežnim postavkama i postavkama izgleda na umetničkim pločama Sketch-a.

Nadamo se da ćemo isti tim jedinstva dovesti u mrežu. Artboards za Sketch i kôd za web razvoj generiraju se iz iste konfiguracijske datoteke. Iako konfiguracijska datoteka rešetke nije besprijekorna, želimo da CSS Gridish potakne razgovor o mrežnim standardima u sličnim alatima.

Uz to, detalji dizajna lako se mogu izgubiti u prijelazu na razvoj. Zato smo i napravili Google Chrome proširenje za pregled vašeg kodiranog rada. Chrome proširenje može se postaviti u konfiguracijsku datoteku mreže vašeg tima kako bi se prikazala ista rešetka i izgled iz datoteke Sketch s istim prečacima (CTRL + G i CTRL + L). Razvojni programeri uživaju u upotrebi proširenja s datotekom Sketch koju otvaraju. Dizajneri vole pregledati kodirane web stranice s njom.

Poštujući cijelu stranicu

Koristeći CSS Grid, programer može slijediti dizajn mreže kada započinje na prvom sloju HTML-a. No stvari postaju još teže kada programer mora raditi unutar različitih odjeljaka i drugih čvorova. To je zato što display: subgrid još uvijek dobiva podršku preglednika.

CSS Gridish radi oko toga oslanjajući se na jedinice širine prikaza umjesto na relativni postotak jedinica. Možete umetnuti što više .yourGrid-rešetki unutar sebe, ali svejedno poštujte stupce i redove stranice. Jedina mana koju smo otkrili je da preglednici s VW jedinicama različito tretiraju trake za pomicanje. Ovo se može zaobići s maržom na vašoj mreži.

Kako radi

Jedini ulazni CSS Gridish potreba je jedna json datoteka koja se zove css-gridish.json. Datoteka prihvaća vaše značajke dizajna rešetke i opcije za spremanje / izlaz izlaznih datoteka. Za sada, CSS Gridish donosi nekoliko pretpostavki o vašem dizajnu mreže:

  • Vanjski oluci su upola manji od unutarnjih oluka
  • Glavni su stupci tekući umjesto fiksnih širina

Savjet: Da biste postigli najbolje rezultate u Sketch-u, preporučujemo vam da svoje točke prijeloma, rub i oluk rešetke učinite djeljivim prema visini retka.

Dok dizajner mreže određuje dimenzije crvenom bojom (plus broj stupaca), programeru se nude korisne vrijednosti u plavoj boji.

CSS Gridish zatim se pokreće u naredbenom retku sa samo npx css-gridish-om. Tada biste trebali vidjeti mapu sa svim datotekama vašeg tima da koristi vašu mrežu! Sjajna stvar CSS Gridish-a je što prilično olakšava korisnike CSS Grid-a koji prvi put dolaze. Nakon što korisnici nauče klase detaljno opisane u dokumentaciji, obično će koristiti samo dva pravila:

.myElement {
    rešetka-stupac: 1 / raspon 4; // Rasporedite četiri stupca iz prvog reda
    rešetkastog reda: 4 / raspon 8; // Rasporedite osam redaka iz četvrtog reda
}

Flexbox zamjenski kod djeluje slično kao i većina mrežnih okvira s prepoznatljivim imenovanjem BEM klase.

Kod prema zadanim postavkama radi s stupcima tekućine i fiksnim redovima. Također omogućuje obrnuto korisne klase modifikatora. Koristite fluidnu klasu reda kako biste stvorili oblike poput kvadrata koji se skaliraju sa širinom korisničkog zaslona.

Jedna poteškoća kada se koristi CSS Gridish kod je da ne koristimo svojstvo jaz CSS Grid za oluke. Umjesto toga, postoje klase padding-a koji su upola niže od veličine oluka koje primjenjujete za poštovanje oluka. To je zbog nemogućnosti ignoriranja praznina za situacije poput boja pozadine i medija u punoj veličini. Nadam se da će sljedeća inačica CSS Grid specifikacije to riješiti.

Budućnost

CSS Gridish ima za cilj dobiti što više proizvoda kako bi što prije usvojili CSS Grid, a korisnicima i timovima olakšao prijelaz.

Dugoročno se nadamo da ovo potiče ideju koja se zove dvodimenzionalne biblioteke komponenata. Industrija je imala snažno razdoblje biblioteka komponenti koje ispunjavaju širinu u koju korisnici postavljaju komponentu. Sada pomoću CSS Grida možemo stvoriti komponente koje također ispunjavaju visinu u koju su smještene. To pruža kreativnije mogućnosti onima koji dizajniraju sustav i više fleksibilnosti za timove koji ga koriste.

U međuvremenu, koristite i dodajte svoj CSS Gridish. Treba još puno posla!

Ako vam to pomogne, ostavite CSS Gridish zvijezdu!

James Y Rauhut (@seejamescode) je ATX dizajner koji radi za IBM Design. Obožava šifrirati, istraživati ​​i truditi se za Boga. Gornji članak je ličan i ne predstavlja nužno IBM-ove stavove, strategije ili mišljenja.

Posebna zahvala Hayley Hughes na diskografskom logotipu. Također, sljedeći ljudi bili su od velike pomoći samom projektu: Trevor Wong, Daniel Kuehn, Seth Johnson, Chiu-Ping Chiu, Jen Downs, Josh Black, Jessica Tremblay, Maranda Bodas, Wonil Suh, Quincy Larson i cijeli FED @IBM zajednica