About

Implementing design work

When a designer hands off work, it is vital to work through potential implications that design may have on the Design System.

Are there any new variations on components? Are there any new components not present on this site? For more on that process, read about how to contribute.

Implementation rules

In general, some rules for implementing design work include:

Use spacing units instead of hard-coding pixel values for margins and padding.
Use Sass variables for colors instead of hex codes.
Discuss reusability of new design components and where is the most appropriate home for CSS and JS.
Use the CSS Library naming convention.
Do not use ID selectors

Use design system utilities

Sometimes you will need to modify certain default properties of a component depending on how it scaffolds with nearby elements. Use utilities instead of writing new CSS.

Do

Use utility classes to override default properties. This allows components to maintain a well-defined baseline of properties.

HTML

<div class="a-container">
  <div class="a-component vads-u-margin-top--3"></div>
</div>

Don’t

Don’t change CSS properties based on a container or other context. This makes baseline properties for components unclear.

HTML

<div class="a-container">
  <div class="a-component"></div>
</div>

CSS

.a-container .a-component {
  margin-top: 24px;
}