Introduktion af CSS Gridish: Et open source værktøj til at hjælpe dit team med at tilpasse CSS Grid i dag

I dag er jeg glade for at introducere et nyt open source-værktøj fra IBM kaldet CSS Gridish!

CSS Gridish tager designspecifikationer for dit produkts net og bygger flere ressourcer, som dit team kan bruge:

  • En skissefil med tegnebræt og gitter / layoutindstillinger for designere
  • CSS / SCSS-kode ved hjælp af CSS Grid med en CSS Flexbox-dropback for udviklere
  • En Google Chrome-udvidelse til enhver, der kan kontrollere en webside's justering

Målet er at hjælpe teams med at tilpasse CSS Grid hurtigere og at muliggøre mere komplekse layout. For at vise, hvor alsidigt værktøjet er, er her nogle eksempler på gitter fra Bootstrap, Carbon Design System og Material Design.

Hvorfor IBM's udviklere lavede dette

Den nye CSS Grid spec er vidunderlig til webdesign. Nu kan designere lægge så meget omhu i y-aksen, som de har x-aksen i fortiden. Projekter til venstre og højre begynder at dokumentere deres overgang til CSS Grid.

Mange IBM-teams er ivrige efter at bruge CSS Grid, men står over for et par blokkeere for at overvinde. CSS Gridish hjælper ved at adressere disse blokerere.

Det øverste skærmbillede er en side, der indlæses på Chrome ved hjælp af CSS Grid. Det nederste skærmbillede er den samme side på IE 11 ved hjælp af CSS Flexbox. (Kilde)

Browserkompatibilitet

CSS Grid har i øjeblikket stor browserstøtte (~ 75%). Alligevel er der stadig mange produkter, der har brug for at tjene de resterende browsere. For eksempel modtager ibm.com stadig 10% af sin trafik fra Internet Explorer. Det kræver en masse ekstra arbejde at støtte de ældre browsere.

Mens CSS Gridish altid bygger dinGrid.css, der bruger CSS Grid, bygger den også en fil, vi kalder dinGrid-legacy.css. Denne ældre fil tjener stadig kun CSS Grid-kode, hvis en browser understøtter den. Hvis browseren ikke understøtter CSS Grid, får brugeren en flexbox-tilbagekaldelse. Tilføj de ekstra klasser til dinGrid-legacy.css, og du har tilføjet bagudkompatibilitet!

Hvad gør du, hvis du ikke har brug for at støtte ældre browsere længere? Alt, hvad det kræver, er en skift til dinGrid.css for at barbere dyrebare kilobyte fra oplevelsen.

Bridging Design og kode

Der er fremkommet store værktøjer, der skaber en enkelt kilde til sandhed til design og kode som React Sketchapp og Lona. Disse værktøjer sikrer, at designere og udviklere laver med de samme komponenter.

Brug Chrome-udvidelsen til CSS Gridish til at gennemgå websider med de samme gitter- og layoutindstillinger på dine Sketch-artboards.

Vi håber at bringe den samme team-enhed til nettet. Artboards til Sketch og kode til webudvikling genererer fra den samme konfigurationsfil. Selvom gitterkonfigurationsfilen ikke er fejlfri, ønsker vi, at CSS Gridish skal udløse en samtale om gitterstandarder i lignende værktøjer.

Derudover er det let for designdetaljer at gå tabt i overgangen til udvikling. Derfor har vi bygget en Google Chrome-udvidelse til at gennemgå dit kodede arbejde. Chrome-udvidelsen kan indstilles til dit teams gitterkonfigurationsfil for at se det samme gitter og layout fra Sketch-filen med de samme genveje (CTRL + G og CTRL + L). Udviklere nyder at bruge udvidelsen med den Sketch-fil, de implementerer, åben. Designere elsker at gennemgå kodede websider med det.

Respekterer hele siden

Ved hjælp af CSS Grid kan en udvikler følge gitterdesignet, når det starter på det første lag af HTML. Men ting bliver vanskeligere, når udvikleren skal arbejde inde i forskellige sektioner og andre noder. Dette er fordi display: subgrid vinder stadig browserstøtte.

CSS Gridish fungerer omkring dette ved at stole på visningsbreddeenheder i stedet for relative procentvise enheder. Du kan integrere så mange .yGrid-gitter-elementer inde i hinanden, men respekterer stadig sidens kolonner og rækker. Den eneste ulempe, vi har fundet ved dette, er, at browsere behandler vw-enheden forskelligt med rullepaneler. Dette kan omgås med margin på dit net.

Hvordan det virker

Det eneste input CSS Gridish behov er en json fil kaldet css-gridish.json. Filen accepterer dine gitterdesignspecifikationer og -muligheder for hvor / hvordan de outputte filer gemmes. For øjeblikket laver CSS Gridish et par antagelser om dit gitterdesign:

  • De udvendige tagrender er halvdelen af ​​størrelsen af ​​de indvendige tagrender
  • Dine vigtigste søjler er flydende i stedet for faste bredder

Tip: For de bedste resultater i Sketch, anbefaler vi dig at gøre dine gitterbrudpunkter, margen og tagren delbar med rækkehøjden.

Mens gitterets designer specificerer dimensioner i rødt (plus antal kolonner), forsynes en udvikler med nyttige værdier i blåt.

CSS Gridish køres derefter i en kommandolinie med bare npx css-gridish. Du skal derefter se en mappe med alle filerne, som dit team kan bruge til at bruge dit gitter! Den fantastiske ting ved CSS Gridish er, at det gør det temmelig let for første gang CSS Grid-brugere. Når brugerne har lært de klasser, der er beskrevet i dokumentationen, bruger de typisk kun to regler:

.myElement {
    gitter-søjle: 1 / span 4; // Span fire kolonner fra første række
    gitter-række: 4 / span 8; // Span otte rækker fra fjerde række
}

Flexbox-backback-koden fungerer som de fleste gitterrammer med genkendelig BEM-klasse-navngivning.

Som standard fungerer koden med væskekolonner og faste rækker. Det giver også mulighed for vice versa med nyttige modifikationsklasser. Du vil bruge væskerækkeklassen til at oprette figurer som firkanter, der skalerer med brugerens skærmbredde.

Ét gotcha, når vi bruger CSS Gridish-kode er, at vi ikke bruger CSS Grid's gapsejendom til tagrender. I stedet er der polstringsklasser, der er en halv tagrendestørrelse, som du anvender for at respektere tagren. Dette skyldes manglende evne til at ignorere huller i situationer som baggrundsfarver og medier i fuld størrelse. Forhåbentlig løser den næste version af CSS Grid spec.

Fremtiden

CSS Gridish sigter mod at få flere produkter til at indføre CSS Grid før og gøre overgangen lettere for brugere og teams.

På lang sigt håber vi, at dette tilskynder til en idé kaldet to-dimensionelle komponentbiblioteker. Branchen har haft en stærk æra af komponentbiblioteker, der udfylder den bredde, brugerne placerer en komponent i. Nu med CSS Grid, kan vi oprette komponenter, der også udfylder den højde, de er placeret i. Dette giver mere kreative muligheder for dem, der laver et design system og mere fleksibilitet for de hold, der bruger det.

I mellemtiden skal du bruge og bidrage tilbage til CSS Gridish. Der er meget mere arbejde, der skal gøres!

Hvis det hjælper dig, skal du forlade CSS Gridish en stjerne!

James Y Rauhut (@seejamescode) er en ATX Designer, der arbejder for IBM Design. Han elsker at kode, undersøge og prøve sit bedste for Gud. Ovenstående artikel er personlig og repræsenterer ikke nødvendigvis IBMs holdninger, strategier eller meninger.

Særlig tak til Hayley Hughes for det diskotiske logo. Følgende mennesker var også en stor hjælp til selve projektet: Trevor Wong, Daniel Kuehn, Seth Johnson, Chiu-Ping Chiu, Jen Downs, Josh Black, Jessica Tremblay, Maranda Bodas, Wonil Suh, Quincy Larson og hele FED @IBM-samfund