Quick Summary
If you have set out on using a design system for your website without the help of any popular framework or library but just pure CSS, then you've come to the right place.
This is still relevant if you're using any javascript framework, including react.
Getting Started
To begin with implementing a design system with CSS we should have it documented somewhere, maybe on Figma. We can then pick up those tokens and styles and starting working.
What are the essentials?
- Colors
- Typography
- Iconography
- Spaces
- Components
- Patterns/images/logos
We can use a open-source design system for this exercise. Carbon by IBM is one such open-source, well designed and documented design system.
Setting up design tokens
Design tokens are important part of a design system's foundation, here's a overview about design tokens from material. We can consider these as the source of truth whenever necessary.
It is important to scope everything under the design tokens and keeping exceptions and one-offs at the minimum, else we could end up with a design system (-system).
In CSS, we can setup these design tokens as variables (i.e. custom properties). Design tokens are usually available globally and thus we can define these variables at :root pseudo-class like this:
:root {
/* Colors */
--color-bg: #FFF;
--text-primary: #161616;
--text-secondary: #525252;
...
}
Once we have all the design tokens set-up, we can proceed for application. Tokens that we have defined are the only possible values to be used anywhere in the styles and hardcoding values should be avoided in-order for the design system to succeed.
Application and usage patterns
We can any model or patterns that we prefer in CSS, as long as we are referencing property values to the CSS variables we defined.
Using utility classes is a common and popular method. We can also set styles directly to some of the HTML elements. For example, setting up a heading styles
/* common properties of headings */
h1, h2, h3, h4 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
}
/* typography h1 properties */
h1 {
font-size: var(--font-size-heading-1);
line-height: var(--line-height-heading-1);
letter-spacing: var(--letter-spacing-heading-1);
}
Similarly we can set default styles for other semantic tags like a, img, p and others. This will most of our atom level components styled according to our design system and we won't need to add classes to for these elements across the codebase.
For more complex components, we can start creating classes and use the design tokens there.
These are some of the very basics of using a design system with plain CSS. We will talk more about the applications and best practices in the upcoming articles.
Thanks for reading!
Top comments (0)