Gebruik van col-xs-12.

Deze memo gaat over het gebruik van col-xs-12 en in hoeverre deze class optioneel is. De aanleiding voor deze memo is een bug over het gebruik van Highlight Boxes in een Grid Row Featured.

Het grid van de DSO Toolkit is gebaseerd op die van Bootstrap 3.4.1. Het is een float based, 12 koloms grid met een gutter van 32px.

Aanleiding

De volgende markup is geldig maar geeft op smalle viewport ongewenst gedrag:

<div class="row dso-equal-heights">
  <div class="col-md-4 col-sm-6">
    <div class="dso-highlight-box dso-border">
      <h3>Heeft u een vraag?</h3>
      <p>
        Het snelste antwoord op uw vragen vind u in ons Helpcentrum. Wij hebben de veelgestelde vragen per thema voor u
        op een rij gezet.
      </p>
      <a class="dso-tertiary btn-align" href="/helpcentrum">
        <dso-icon icon="chevron-right"></dso-icon>
        Helpcentrum
      </a>
    </div>
  </div>
  [...]
</div>

Oorzaak

Row heeft een modifier "Equal Heights": <div class="row dso-equal-heights">. Met deze modifier worden alle kolommen in de Row even hoog.

Equal Heights werkt met Flexbox. De Row krijgt een display type flex. De kolommen worden flex items.

Over het algemeen wordt aangenomen dat col-xs-12 overbodig is. Immers, waarom expliciet iets op 12 kolommen zetten terwijl dat standaard gedrag van een <div> is. En een element wat toch de maximale breedte pakt heeft ook niets aan floaten:

.col-xs-12 {
  float: left;
  width: 100;
}

Maar het is deze aanname in combinatie met Row "Equal Heighs" is waar het fout gaat. Een kolom in Row "Equal Heights" zonder expliciete kolomdefinities voor de actieve viewport krijgt geen width: 100% waardoor de kolommen zo smal als mogelijk worden.

Maar ooit ging dit goed. Het is pas in #2383 Highlight Box: aspect ratio banner aanpassen naar 3.5/1 stuk gegaan. Bij het testen zijn we precies tegen hetzelfde issue aangelopen: https://github.com/dso-toolkit/dso-toolkit/pull/2393#issuecomment-1786824211

De aangedragen oplossing was om er destijds col-xs-12 op te zetten.

Samenvattend

• Aanname/conventie dat col-xs-12 niet nodig is;
• Kolommen in Row "Equal Heights" hebben zijn flex items;
• #2382 heeft de gebrekkige basis blootgelegd;

Oplossingen

Zoals https://stackoverflow.com/questions/28591607/bootstrap-3-is-col-xs-12-optional aangeeft, wordt het over het algemeen aangenomen dat col-xs-12 optioneel is. Maar het alternatieve antwoord wijst de vraagsteller er fijntjes op dat er we degelijk gevolgen zijn als deze class niet wordt gebruikt. Het alternatieve antwoord kaart een ander probleem aan, maar de conclusie geldt ook voor onze situatie.

Er zijn twee opties:

1. Expliciet benoemen dat het gebruik van col-xs-12 verplicht is. Dit is een wijziging in het koppelvlak van de toolkit en zal strict genomen een breaking release betekenen.
2. Het gebruik van col-xs-12 blijft optioneel, en het ontbrekende gedrag wordt verwerkt in de toolkit. In dat geval is een patch release.

In het geval van optie 2 is optie 1 de alternatieve oplossing voor applicaties die niet op de nieuwste versie van de toolkit zitten.

Procesverbeteringen

Dat deze bevinding bij een productie applicatie naar voren is gekomen, is hoogst ongewenst.

De gebeurtenissen die met de bevinding te maken hebben:

1. De DSO Toolkit heeft het Bootstrap 3.4.1 grid geadopteerd, met de bijbehorende conventies en documentatie.
2. In #365 Gelijke hoogte kolommen voor highlight-box is de modifier "Equal Heights" geintroduceerd.
3. In #2383 Highlight Box: aspect ratio banner aanpassen naar 3.5/1 hebben we de aanleiding van deze memo tijdens testen ondervonden.
4. De aanleiding voor deze memo.

Ten grondslag ligt de incorrectie aanname dat col-xs-12 optioneel is en niet van toegevoegde waarde. Idealiter was het bij punt 1 al goed gegaan, hetzij via expliciete markup voorschriften waar col-xs-12 verplicht wordt of dat het gewenste gedrag overeenkwam me de werkelijkheid.

Tijdens punt 2 was het niet mogelijk om de situatie te voorkomen.

Punt 3 was een belangrijke gebeurtenis, hier kunnen we veilig aannemen dat we beter hadden moeten acteren. Idealiter was tijdens punt 3 ook de fix voor het gewenste gedrag meegekomen, of een wijziging in de markup voorschriften. Tijdens het reviewen van de oplossing (overal zomaar col-xs-12 plaatsen) is niet nagedacht of afnemers dit ook hadden moeten doen. Uiteindelijk is #2383 een breaking change geweest.

Punt 4 is waar we nu mee bezig zijn.

Conclusie

Wij doen ons best om afnemers zoveel mogelijk te ontzien. Het ligt voor de hand om voor oplossing 2 te gaan.