What's New
We're constantly adding new features and making improvements to SetSeed, so stay tuned for some exciting updates
Auto-Generating Pure CSS for Responsive Design
This week, we were showing an agency's developer how the 'CSS breakpoints' system in SetSeed works.
It reminded us of what a crazy-powerful system it is.
For this, we first need to consider how a CMS website typically handles responsive design. Typically, a designer will define a set of arbitrary widths that trigger different sets of styles to allow the site to work on different-sized devices.
The problem is that these breakpoints tend to be based on allowing things like the website's main menu to fit on one line. Once the menu doesn't fit anymore, a new breakpoint will be defined, and so on, until the design goes to a mobile-first structure that typically uses a pop-out vertical menu behind a 'hamburger' icon.
Those of you who know us best will have already spotted the problem from the description above.
A design decision is being based on a content choice.
That means when someone in charge of content decides to add a new page, the CSS breakpoints will no longer be in the right place. The menu will wrap onto two lines, and the design will look broken.
This is an issue we've wanted to tackle for a long time. Our first solution was to rely on JavaScript to check if the menu fit, and if not, incrementally apply new sets of CSS to shrink the text size and padding until it did fit, finally switching to the full mobile version as needed.
This served us well, but the onload delay was always a reminder that the user experience wasn't as good as it would be with a pure CSS solution.
What we built to fix this is probably a world-first. We certainly have never seen anything else like it.
We created a solution that uses JavaScript during an admin session to calculate at what width new styles need to kick in, and then save those widths into a pure CSS file for use with the real page views. When real visitors then view the site, they get a pure CSS experience based on media queries so content loads in the right place at the right size from the word go. No JavaScript needed.
When admin users make changes in the CMS that are likely to require new breakpoints, they are discreetly reminded to trigger a CSS breakpoints rebuild. This way, the system isn't constantly rebuilding while changes are being made.
Of course, all elements of this can be customised at the developer level—the template CSS file that uses variables to display the replaced width values can be fully edited, resulting in perfectly tuned CSS output at each breakpoint.
It's a feature that takes SetSeed website development into real 'next level' territory.