Genstyl Layout grids demo

Описание: 👇🏻Genstyl's waitlist
https://genstyl.ovidiu.works/?utm_source=y...

Layout grids with real inheritance: configure once, override where needed!

Each Style you create in Genstyl gets its own global Grid Settings: max number of side-by-side columns and the gutter (can be zeroed if you want columns to touch).

The Row module lets you override global Grid Settings for that instance. Nested Rows inherit from their nearest Row ancestor, and you can customise at each level. Columns have a size (how many columns they span) and an offset (a left margin spanning the specified number of columns, including gutters).

Genstyl also allows you to display a baseline grid to check up on your vertical rhythm. In this layout I’ve made sure my content flows nicely vertically, but on the modern web this is quite hard to do with dynamic content, especially when you consider responsiveness on different devices.

Things I tweaked: the image spans across a round number of body copy lines; the subheadings in the content area are playing with top and bottom margins that will always sum up to a round number (e.g. 0.75 + 0.25, where 1 is the body copy leading, calculated from the Typographic Scale settings. It’s all connected!)

A while back I was envisioning a UI where you’d say “I want a row with 6/8 + 2/8”, you’d type that formula and the app would build the Row and nested Columns structure, but since Genstyl can be driven by an LLM via MCP, I’m not so sure it’s worth now… what do you think?

PS. Some terms are capitalised, because they are key concepts in the App’s domain language. 🙂

#DesignSystems #UIDesign #UIUX #FrontEnd #Typography #UIGrids #WebDesign