To build this example, I wrote markup then simply added CSS utility classes that are part of the default Expressive CSS Styleguide. I was nearly able to achieve the layout without writing any new CSS.
There were only two instances when it was necessary to add new styles. I added a
.box-gradient-overlay so the white text on the main image would be readable, and a thick border left class for the colored line on the category kicker.
Portability is one of the main benefits of the Expressive CSS approach. Scalability is another. As a website, project or application grows, it is important to keep stylesheets small and maintainable.
The article only had an example for the desktop layout, but with Simple Grid and our responsive utility classes, it was quick and easy to adjust the layout for different screen sizes. (Adjust your browser window width to see the responsive layout adjustments)
When flowing in real content across different screen sizes, various layout issues will likely arise. In this case, the heights of the bottom four events vary quite a bit depending on the content. I added a
.grid-flex class to the container to make sure the heights were equalized.
In the real world, it is likely that you are using templates to render content that comes from a database. In this example, I used the Twig Template Engine. I’ve created some sample data in a JSON file to represent what one might expect to come from the backend to give the templates something to render.
Breaking down our display patterns into template partials (components) gives us the opportunity to keep our codebase even more DRY and maintainable. We can change our components at will, without needing to touch any CSS or the underlying content itself.