AMA: Brad Frost, Web Designer

7 years ago from Brad Frost, Brad Frost Web

  • danilo vargas, 7 years ago

    How do you deal with spacing in style guides, do you separate between spacing for components and spacing for sections of pages. Do you use reusable helpers classes or apply padding or margin properties on the components selectors itself.

    0 points
    • Brad FrostBrad Frost, 7 years ago

      That's a great question. I attempted to answer a similar question here. Here's the relevant part:

      Quick example: one thing I always struggle with is stuff like this: section { margin-bottom: 2em; }. In most cases, I want there to be some room in between major sections of the site. Except when I don't. Sometimes there are cases where I want the sections to be flush together (say if I'm applying background colors to the sections). I could hard-code , but that would become unruly pretty quick. A better option would be to make a modifier for the pattern called .section--flush or something along those lines. That way the pattern becomes more versatile and can address similar scenarios in the future.

      So to answer your question, I typically add a modifier to a pattern that allows me to adjust the spacing of a component based on its usage. That being said, there's more than one way to skin this cat and I'm sure helper classes and other techniques could also be valuable.

      0 points