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 has the typesafe row
abstraction, with these overloads:
Frag
s)half
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!
)
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 row
s with arbitrary HTML is specified in singleRatio
s.
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.