Website Info

This is an experimental demo site to explore Bento Grid design.

For more information watch the videos on building a vet site at the No Script Show's YouTube channel. You can download the site from Github.

DESIGN

Our notes from the show

We could view it as a modernised approach to layout. It may live on as it is not tied to one aesthetic.
As everything is a box in web design. It's not really that clear cut what is and isn't a bento design.
Article on Bento Grid design

Offers more flexibility with branding and responsive design?
More agile. Just add and remove boxes as needed. No having to balance page items. Easier designing with clients and maintaining business changes.
It coud reduce user scroll fatigue. More info "above the fold".
You can be more adventurous in mixing up styles. Ironically, more thinking "out of the box".

Potential for information overload (lack of hierarchy, but that can be a positive in Eastern cultures).
Potential for Accessibility and SEO issues.
Could get boring.

Yet to be seen, but…

Fit well with CUBE CSS.
Grid template areas make the structure easy to read and design. (composition in CUBE terms).
Utility classes can be added at the card level and we have clear blocks for navigating around the CSS styles.
Could be quite a flexible starting code base.
Could even be a way to teach clients how to build and maintain a site in a day.

Using find and replace to change the “card” grid area names.
:has() to control the layout of “cards” based on the number of them.
Using grid-auto-flow: dense (auto-placement that fills holes, but puts things out of the DOM order).
Relative colors to control overlay transparency and the whole palette.
Using hide and reveal components (scrollers, tabs, video popups).
Seems a good place to start using container queries more.
Card animation with new CSS scroll animation.