Regardless of where you are coming from, someone new or pro to web dev or a UI/UX person, creating a website style guide can be so easy and yet so complex at the same time. Great to kick start a project if you have no ideas, and great to serve as a documentation for your website too!
What, Why
A little back story to what is a style guide and why we are doing this before jumping into how to do it!
There will always be that client/stakeholders that comes and request for a website, and at the same time requesting the web developer to come up with the theme and design. Lets be real here, most web developers do not have the final say in the website design, and usually have to amend their design in a very weird way across pages. A style guide aims to create to preview the general "theme" of the website, or can even function as a documentation during development. But more importantly, it gives the stakeholder a sense of consistency as they now will think of the "style" before asking for changes in design.
Few benefits come along creating a simple style guide:
- Clear way to communicate consistency with your team members
- Quicker way to get design approval, rather than drafting page full of content
- You actually think of your design first, so code re usability promoted
- Beginners can use this to kick start their own projects and improve their skills
How to create a style guide for websites
A style guide can be simple (designing the typography) to a complex one (buttons, input forms, dropdowns). But today, we will be doing a simple one, and as you work longer on it, you will be adding new elements to it!
We will be recreating a simple style guide I created that covers the dark and light theme here.
The code for you to copy paste or refer to can be found on my github repo.
First off, if you are building for a brand/client, I would always go with finding out what is their brand color. Set a primary color, secondary color etc, as we will be using that a lot. A great example would how Whatsapp Brand Resource provided you with their brand colors.
Next would be the font. Do they have a specific font their brand uses? Or not Google Fonts is a great place to start sourcing.
Generally, if we are building for a client, we do not want to deviate too far from their brand design.
Lets jump into it!
The concept would be the same if you are using JS frameworks such as React, VueJS etc. Let us start by creating a html tag and defining the title and import the font you selected in the head section. We will also be creating a body to briefly show us how our page is looking like.
<html lang="en">
<head>
<title>Website Style Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</head>
<body>
<h1>Website Style Guide</h1>
<h2>H2 - The second header</h2>
</body>
</html>
For this simple project, we will be doing the CSS internally rather than externally on another file. Internal CSS would be great if you are using a CSS framework such as Bootstrap and you need to overwrite their styles. Lets create the internal styles and ask our HTML to use the font we chose.
</head>
<style>
html {
font-family: 'Didact Gothic', sans-serif;
}
</style>
Great! Our h1 and h2 should look different now. Next is to define the primary colors as a CSS variable, stylize and standardize the font size. CSS variables are great as you can be sure, the primary color throughout your web pages would be consistent, and if you ever need to change the primary color, you just need to change the variable value once, rather than searching though every page and replacing it.
The look I am going for now is a "phase-shift" effect for the font. To achieve this, I will be creating a class called .special, and adding a text shadow to it.
<style>
:root {
--primary-color: #152CFF;
--primary-shade: rgba(21, 44, 255, 0.2);
--red: #FF421D;
--dark-bg: #222831;
}
h1 {
font-size: 3rem;
font-weight: 500;
color: inherit;
}
h2 {
font-size: 2.25rem;
font-weight: 300;
color: inherit;
}
.special {
text-shadow: -4px 0 0px var(--primary-shade);
}
</style>
<h1><span class="special">Website</span> Style Guide</h1>
Launching the website on your browser, you will notice that the Website text is a little more unique. And we know, if we needed to use this "phase shift" effect elsewhere, we would just need to apply a .special, and it would just work! Now, just continue designing for h3, h4, h5, p, href and span and you would have a great and simple style guide already. Play around with the :hover, transitions and animations to add more interactivity to the website! Font weight would be helpful in building the headers as it gives excellent control over the thickness of the fonts.
Summary
This post is getting long and I believe people are getting tired of reading, so I will not be covering how I did the entire Website Style Guide sample, but the code for it is on my github repo and I highly encourage people starting out to have a look and perhaps, pick up a few tricks there (scrollbars, href effect, text selection colors, the image effect and creating light and dark theme without writing 2 CSS).
I hope this mini introduction to creating style guide kick starts your web development journey, or perhaps serve a good purpose in your professional work. Do share your very own style guide. And as always, if there are any improvements that can be made on this post or on the code at the repo, do let me know!
Top comments (1)
Cool article! Thanks for sharing! Here this material will also be useful what is a style guide, in an article about the benefits of creating a style guide and the necessary elements to create a template, great for beginners.