Grid support

Grids are usually a pain to work with. Let's see what Hepek has to offer.

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!
        )
      

Configuration

Halves and thirds use the screenRatios configuration. You can configure each screen size separately: lg, md, sm and xs.
Example:


        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
      

These are pretty self-explanatory. For large screens, halves have 5:7 ratio.
So, first half will get col-lg-5 class, and second half will get col-lg-7 class (when using BS 5).
Same pattern follows for thirds etc.

Ratio for rows with arbitrary HTML is specified in singleRatios.
First value is padding left, then the column, and then right padding.
Padding can be zero, of course.

Notice that sm and xs have None as value. These won't be filled at all.
This means that on small and extra-small screens these columns will stack like divs normally do.