CSS Grid – Endelig et ordentlig layoutverktøy

Frem til nå har vi hacket oss rundt med HTML, CSS og noen ganger Javascript for å få til de designene vi har ønsket oss på nettsider. Tabeller, floats, position og Flexbox var aldri vært ment til å være noe layoutverktøy, men de har på sin måte fungert som det med sine begrensninger, og til tider noe mildt sagt rare oppførsel. Nå har vi endelig fått et ordentlig layoutverktøy som har god støtte i nettlesere og som fort vil endre måten vi tenker, designer og skriver kode for nettsider. Møt CSS Grid.

Etter hvert som responsive nettsider snarere ble ett krav enn et alternativ så har også rammeverk som Bootstrap og Foundation blitt veldig populære og uten tvil hjulpet mange med å responsive sider uten for mye problemer. Men den generelle utfordringen med nevnte rammeverk har ofte vært i form av mye ekstra HTML-kode som strengt tatt aldri var nødvendig for semantikken sin del og som potensielt kunne skape trøbbel med tanke på sidens tilgjengelighet.

Et ordentlig layoutverktøy

Med CSS Grid så har vi derimot fått den første spesifikasjonen som er laget for å være et layoutverktøy i CSS, og i løpet av første halvår i 2017 er det nå blitt tilgjengelig i alle nettlesere med unntak av Internet Explorer og Edge. Internet Explorer 10 og 11 har en eldre implementasjon som man kan benytte seg av om ønskelig. Edge får full støtte i løpet av andre kvartal 2017.

Under WordCamp Europe i Paris i juni så holdt Morten Rand-Hendriksen en presentasjon med gode eksempler på hva CSS Grid er, hvordan det fungerer og hva man kan gjøre for de nettleserne som ikke støtter det. Jeg anbefaler på det sterkeste å se denne presentasjonen på en halvtime.

Kode møter design på en ny måte

Med CSS Grid så er det etter min mening nå fullt mulig for designere å tilnærme seg design av nettsider på en helt annen måte enn før fordi det fungerer i mye større grad slik vi er vant til med å sette opp grid for print. Dette kan også være med på å gjøre terskelen noe lavere for de som ønsker å lære seg å lage enkle nettsider.

De tekniske begrensningene andre metoder har hatt vil i stor grad forsvinne og man kan nå designe sider som gjenspeiler for eksempel et magasindesign for print på nett, og dette med et system som er responsivt ut av boksen. Det gjør at kompetansen man i bunn og grunn trenger for å lage nettsider vil være HTML og CSS. Det er også nyttig å se på ting som semantikk og struktur i HTML, men prinsippielt sett så er det ikke dette som avgjør om du får til å lage en enkel nettside. På sikt så bør alle som vil jobbe seriøst med å lage nettsider uansett sette seg inn i regler for Universell utforming og Accessibility, men det er et annet tema.

Så ser jeg ikke bort fra at det vil komme flere forsøk på å lage rammeverk som benytter CSS Grid i tiden fremover, men det er som nevnt egentlig kun to ting man trenger å kunne for å få noe på plass; HTML og CSS. For de interesserte bør dette være fullt overkommelig selv uten en teknisk bakgrunn. Da gjenstår det bare å få snudd webdesignverden på hodet nok en gang også får vi se hvilke kule ting som blir laget med mulighetene CSS Grid gir.

Lær mer om CSS Grid

Det finnes en del gode ressurser på temaet og Grid by Example av Rachel Andrews er den absolutte goto. Dronningen av CSS Grid. Jen Simmons har en del eksempler på sin Intro to CSS GridMDN har en meget god oversikt på sin side over spesifikasjonen og CSS-tricks har en Complete Guide to Grid.

Jeg vil også på det sterketste anbefale å benytte Firefox eller aller helst Firefox Nightly til å utvikle sidene med. De har per dags dato det absolutt beste utviklerverktøyet for CSS Grid. Jen Simmons viser i videoen nedenfor hva som er tilgjengelig og hvorfor du bør benytte nevnte nettleser til utvikling.

Gratis dokumentert starttema for WordPress

Før jul i fjor hadde ThemeShaper en serie artikler om hvordan det går an å gå fram for å skrive et starttema for WordPress. Produktet av serien er et tema som kan fungere som et utgangspunkt for utvikling av tema til andre sider. Det finnes forsåvidt mange temaer som er gratis tilgjengelie på nettet som fungerer utmerket til akkurat samme jobben som Shape, artikkelseriens tema, men om jeg skal trekke fram en ting jeg synes er en relativt kurant fordel så er det at all kode er dokumentert over hos ThemeShaper.

Interessant som jeg syntes denne artikkelserien var tok jeg meg bryet i tiden før jul med å skrive temaet etterhvert som serien skred framover. Såvidt jeg vet er ikke temaet tilgjengelig hos dem på noen annen måte enn som dokumenterte kodesnutter i sammenheng med artiklene i serien deres. Den gode nyheten er derimot at jeg fulgte serien og samlet sammen koden slik at temaet eksisterer i en form som kan brukes. Utover det artikkelserien tar for seg har jeg jeg oversatt temaet til norsk og inkludert fitvids som en responsiv løsning for videoinnhold. Lag noe kult med det som ThemeShaper sier. Shape er nå tilgjengelig via GitHub til å gjøre hva du vil med. Selv har jeg nylig brukt det med hell som utgangspunkt for siden til Tonje Karlsen.

Velbekomme!

Temautvikling i WordPress

WordPress som publiseringsløsning

De fleste nettsider i dag bruker et eller annet publiseringssystem (CMS) hvor brukere kan logge inn og administrere innholdet på siden. WordPress har blitt en stor aktør innen blant disse de siste årene. WordPress har et dedikert utviklingsteam som heter Automattic bak seg som har muliggjort den utviklingen systemet har hatt siden starten, og en av suksessfaktorene har nok vært at det hele tiden har vært gratis. Dette skiller i grunn ikke WordPress så veldig mye fra andre store publiseringssystemer som finnes der ute, men det har sikret dem en stor brukermasse hvor både komersielle og private aktører bidrar med utvikling temaer og utvidelser til systemet.

Det finnes to varianter av WordPress. En dot-com variant hvor du registrerer deg og siden er oppe på 1-2-3. Velger du denne varianten finnes det muligheter i grensesnittet for å kjøpe temaer og diverse andre tjenester som kan knyttes til siden din. Den andre varianten krever at du har tilgang til et webhotell med støtte for programmeringsspråket PHP og MySQL som databaseløsning. Heldigvis er dette mer som regelen å regne enn unntaket i dag når det gjelder webhotell. Velger du denne varianten får helt fritt spillerom til å tilpasse systemet til ditt eget bruk. Selv har jeg brukt denne siden versjon 1.5 tilbake i 2005, og mens noen sider jeg har laget har kommet og gått finnes det fortsatt noen som stadig lever i beste velgående, som denne.

Bygg ditt eget tema

For å kunne utvikle temaer til WordPress er det nødvendig med grunnleggende kjennskap til HTML og CSS, men også noe PHP er greit å kunne for å forstå hva som foregår i de forskjellige malene som utgjør et tema. WordPress har en veldig fin Codex på som gir nødvendig oversikt over hvilke funksjoner som kan gjøre hva, og hvordan de kan brukes. Finner du ikke svar på det du leter etter her så er Google ofte din venn. Dette fører oss dit jeg ville med dette innlegget. ThemeShaper som er nettsiden til temautvikler-teamet til Automattic har nå i November hatt en veiledning i 17 deler på hvordan et grunntema for WordPress kan bygges opp. Går du gjennom denne steg for steg så vil du ende opp med et brukbart tema som kan brukes til å bygge videre på. Jeg anbefaler alle som kan tenke seg å lære mer om hvordan temaer lages å se på denne steg for steg.