Vertical rhythm System

Highlighted
Advisor

Hey all,

 

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.

- This could bloat the template quite rapidly.

 

The markup:

<div class="b-spacer-{{ module.spacer_size.desktop }}-{{ module.spacer_size.mobile }}">
 
</div>

 

SCSS was used to quickly generate the large number of classes that might be needed.

 

@mixin mobile {
  @for $i from 0 to 15 {
    &-#{$i} {
      @for $j from 0 to 15 {
        &-#{$j} {
          margin-bottom: $i+em;
        }
      }
    }
  }
}

@mixin desktop {
  @for $i from 0 to 15 {
    &-#{$i} {
      @for $j from 0 to 15 {
        &-#{$j} {
          margin-bottom: $j+em;
        }
      }
    }
  }
}

.b-spacer {
  @include mobile;
}

@media screen and (min-width: 768px) {
  .b-spacer {
    @include desktop;
  }
}

 

2) Adding the fields directly to the modules themselves

- Rather than creatng a module we could add the fields and markup to each module

- This obviously creates a lot of redundant work.

 

3) Class and inlining in the template editor

- The styling and classes could be added in the template editor

- Class management would still be in my hands rather than the designer, creating drag in the update process.

- Inlining is obviously not an answer for responsive heights.

 

 

 

My question is:

Has anyone approached or have an opinion on how to best a handle this snowball of an issue?

 

Reply
0 Upvotes
6 Replies 6
Community Manager

Hey  @Kevin-C 

 

 I will tag a few of our experts Emoticono feliz     

 

Hey @bschneidewind  @Adesignl  @John could you please share your knowledge with @Kevin-C ?

 

Thank you,

Sharon 

Reply
0 Upvotes
Occasional Contributor | Platinum Partner

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). 

Top Contributor

Hey @Kevin-C , I have created a module in the marketplace for this very problem. It is called "Better Vertical Spacer".

Advisor

Thanks for the responses!

And a special thanks @sharonlicari for driving the engagement.

 

@John @bschneidewind 

My questions to both of your solutions would be:

 

What are the advantages and disadvantages of your solutions?

From a development, management, and scalability standpoint, what would drive me to choose one solution over the other?

 

Looking forward to hearing back!

Advisor

*Bump*

Reply
0 Upvotes
Occasional Contributor | Platinum Partner

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. 

Reply
0 Upvotes