I've been brainstorming, for sometime implementing a system for controlling and updating the vertical spacing within our webpages. The vertical rhythm has become an issue with the lack of both an established design system and design leadership for our website (I've chosen to remain out of the creative process for this project to prevent a conflict of interest). Not only does it reduce visual consistancy and readbility, it slows development and management times.
To remedy this I thought about the following solutions:
1) Vertical Spacing Modules
- With something like this I (the developer) could add the modules directly to the layout, and allow the designers building the page to update as needed.
I think it really depends on the needs of your project and personal preference ~ it looks like that addon puts in a specific element to handle vertical spacing (rather than a CSS only approach where you add a class to an existing on page element) and also allows for each usage to be customized. (which could be a good thing depending on your needs)
While it's minor, you are adding additional code and increasing page weight with this approach. (additional HTML elements + CSS) It also opens the door to someone setting up a template with a different sized spacing element from one page to the next rather than keeping a consistent approach across the site. (again, this could be a good thing depending on your use case)
In my opinion, both solutions work but it's a matter of what fits your needs and preferences. I personally like the flexibility of a class system as you can extend the usage of the classes and reapply those classes to other elements on the page if/when you need that spacing. You also ensure that the spacing stays on a consistent incremental grid across the site with this approach.
I'd suggest coming up with an incremental baseline - for example, a 10px baseline would net you: 10, 20, 30, 40, etc. and then set a max number that you know you will not exceed for margin values.
From there you could add classes such as .mt10, .mt20 and so forth to cover the margin for the tops up to your max number (repeat the same pattern for the bottom to allow for multiple classes to be added - .mb10, .mb20, etc.).
For integrating, you'd have two options: 1 - Allow for classes to be added to your markup via a text field for a module 2 - Add a dropdown for top and bottom values based on whatever classes you added to your css.
To cover responsive, you could set at a standard rate of 70% of the desktop value on each class (or whatever % you feel looks good... you could also make this flexible in the setup as well, with unique classes for the responsive styles).