Bootstrap er ikke det eneste værktøj til at strukturere HTML!

Selve titlen på dette blogindlæg kan måske virke en smule provokerende, da de fleste webudviklere nok er klar over, at der eksisterer talrige værktøjer, som man kan bruge til at producere modulær, genanvendelig og cross-browser-kompatibel CSS.

Ikke desto mindre er Bootstrap blevet en form for de facto værktøj hos mange webudviklere. Det viser sig i særdeleshed ved frameworkets popularitet på Github, hvor det i skrivende stund er det projekt med andet flest stjerner - knap 100.000 - blandt 1.575.925 offentlige repositories. Ligesom det anslås, at 17 procent af de største hjemmesider (efter trafik) på internettet, implementerer Bootstrap i en eller anden form.

Der er ingen tvivl om, at en større del af Bootstraps popularitet skyldes, at det er et godt værktøj, der er let at tage i brug. Men selvom det er et godt værktøj, så eksisterer der en række alternativer, der afhængigt af use case kan vise sig bedre eller mindst ligeså gode.

Et eksempel på et sådan alternativ, er LostGrid, som vi med stor tilfredshed selv har implementeret i en række af vores projekter.

Peter Ramsing, der er hovedpersonen bag LostGrid, beskriver det som følger: "LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS. [...] With the ever-changing web, Lost wants to be a tool that allows one to dive deep and enable powerful grids, not be the »one tool fits all«. With improved documentation and a keen focus, LostGrid plans on being a great grid option to stand alongside the rest of them".

Allerede med disse ord adskiller LostGrid sig fra Bootstrap, da det netop er et grid-system og ikke et komplet framework. En del af den kritik, der kan rettes mod Bootstrap, er (om end man selv kan vælge delelementer til og fra), at det lider af et overfokus på at passe til alle use cases.

LostGrid er derimod ikke en færdigproduceret CSS-fil, eller færdigproducerede SASS/LESS-moduler. Ved implementering igennem PostCSS, fungerer LostGrid præcis som andre abstraktions-funktioner i eksempelvis LESS, SASS eller Stylus. Herved kan man selv trække funktionalitet ind i egne CSS-klasser, når det er relevant med en specifik funktionalitet.

LostGrid kommer derfor heller ikke med færdigklare klasser som container, row eller col-sm-12. Man skal i stedet selv definere de klasser, der er relevante for ens projekt, og bruge LostGrid til at generere den relevante CSS til klassen.

Inden der nedenfor vises et kort eksempel på brugen af LostGrid, skal det indskydes, at en positiv effekt ved at benytte et minimalistisk CSS-værktøj som LostGrid, er, at man automatisk underlægger sig selv en form for »tree shaking« (for at låne et begreb fra JavaScript-verdenen), hvor der kun trækkes de moduler/komponenter ind, som man egentlig har brug for.

Nedenstående eksempler viser den CSS, der genereres ved brug af forskellige funktioner i LostGrid:

// Ved at kalde nedenstående funktion
.col {
    lost-column: 1/2;
}

// Får man nedenstående CSS-output
.col {
    width: calc(99.99% * 1/2 - (30px - 30px * 1/2));
}

.col:nth-child(1n) {
    float: left;
    margin-right: 30px;
    clear: none;
}

.col:last-child {
    margin-right: 0;
}

.col:nth-child(2n) {
    margin-right: 0;
    float: right;
}

.col:nth-child(2n + 1) {
    clear: left;
}

Det, der er interessant at hæfte sig ved i dette eksempel, er, at lost-column 1/2 automatisk generer et grid-system, der opdeler alle elementer, der har klasseangivelsen col i to kolonner (tallet 1/2 styrer antallet af elementer. Brøkens nævner er antallet - her to kolonner per række. Derudover sørger LostGrid både for at sætte gutter-margin på elementerne (og fjerne den på den sidste kolonne for hver række) og, at de har de korrekte clears.

Et andet eksempel er LostGrids mulighed for at lave Waffle-grids:

// Ved at kalde nedenstående funktion
.waffle {
    lost-waffle: 1/4;
}

// Får man nedenstående CSS-output
.waffle {
    width: calc(99.99% * 1/4 - (30px - 30px * 1/4));
    height: calc(99.99% * 1/4 - (30px - 30px * 1/4));
}

.waffle:nth-child(1n) {
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    clear: none;
}

.waffle:last-child {
    margin-right: 0;
    margin-bottom: 0;
}

.waffle:nth-child(4n) {
    margin-right: 0;
    float: right;
}

.waffle:nth-child(4n + 1) {
    clear: left;
}

.waffle:nth-last-child(-n + 4) {
    margin-bottom: 0;
}

Som ovenfor generer det ene funktionskald lost-waffle 1/4 automatisk et grid-system, der opdeler alle elementer med klasseangivelsen waffle i et waffle-grid. Ligesom ovenfor er det nævneren, der styrer, hvor mange elementer/kolonner, der ønskes for hver række. Ligesom LostGrid igen sørger for at sætte korrekt gutter-margin på alle elementer, at sikre korrekte clears etc.

LostGrid er derudover også kompatibelt med flexbox. Brugen af flexbox kan både angives som en standard for alt genereret CSS, men også på funktionsniveau ved at tilføje flex til funktionskald (eg. lost-column 1/2 flex).

Et andet positiv ved at benytte et grid-system, hvor man selv bestemmer klasseangivelser, er, at det gør det langt nemmere at inkorporere en standard taksonomi i sin klassenavngivning. Læs mere om at skrive struktureret, vedligeholdsvenlig og genanvendelig CSS.

Hvis du har konkrete spørgsmål til brugen af LostGrid, eller valg af CSS-framework/-grid, er du velkommen til at kontakte os.