Grid

Problem

Most SSGs and template engines have themes with predefined layout.
What if you just want to position an image to the right? Not so fast!
You need to mix in some inline HTML in your beautiful markdown and get a real mess...

Also, it's easy to forget that sum of columns in a Bootstrap row must be 12, for example.
A buggy example:

This won't yield wanted result, it will always stack the divs...

Hepek grid

Hepek has the typesafe row abstraction, with these overloads:

• arbitrary HTML (Scalatags Frags)
• halves, constructed with half
• thirds, constructed with third

By default, columns have the same/proportional width, as expected.
You just need to import the Grid from your favorite Bundle.
So, in a nutshell, these will compile and work as expected:

        import utils.Bundle.*, Grid.*

        row(div(), p(), "text"), // normal HTML
        row(
          half( /* content */  ),
          half(...)
        ),
        row(
          third(...),
          third(...),
          third(...)
        )
      

These won't:

        row(
          half(...),
          half(...),
          half(...) // too many halves, compile error, yay!
        ),
        row(
          third(...),
          third(...) // missing one third, compile error!
        )
      

        val customRatios = Ratios()
          .withSingle(1, 4, 1)
          .withHalf(5, 7)     // 5:7
          .withThird(4, 3, 5) // 4:3:5

        val customGrid = Grid.withScreenRatios(
          Grid.screenRatios
            .withLg(customRatios)
            .withMd(customRatios)
            .withSm(None) // stack on small
            .withXs(None) // and extra-small screens
        )

        import customGrid.*
        row(half("left"), half(right)) // will be 5:7