What is a Style Guide?
A style guide is a set of standards for the writing, formatting and design of documents. It is a manual used to create a style sheet.
These standards can be applied either for general use, or be required usage for an individual publication, a particular organization, or a specific field.
- Header background color - hsl(180, 100%, 50%).
- Main background color - hsl(180, 50%, 50%).
- Footer background color - hsl(180, 65%, 50%)
- Text color is hsl(0, 0%, 0%)
- Font size is 16px.
- Font family ["Roboto"]
Importance of a Style Guide
Style guides help to establish standard style requirements.
It helps to improve communication by ensuring consistency both within a document, and across multiple documents.
From Figma to Style guide
Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows.
Figma designs have embedded styles which can be used to create style guides. This helps the developer to create a more dependable and easy stylesheet.
How to use the var() function in CSS
The
var()function is used to insert the value of a CSS variable. ...W3schools
Let's see an instance using the sample style guide above:
Example:
:root{
--clr-header-background: hsl(180, 100%, 50%);
--clr-main-background: hsl(180, 50%, 50%);
--clr-header-background: hsl(180, 65%, 50%);
--clr-text: hsl(0, 0%, 0%);
--ff: "Roboto", sans -serif;
}
As used in the code snippet above, clr stands for color while ff stands for font-family.
This means that the variables are ready for use.
How to use the variables created in styling.
Let's say we are to give the background-color of an element like header in a web page. Follow this code snippet below:
header{
background-color: var(--clr-main-background);
color: var(--clr-text);
}
a{
color: var(--clr-text);
text-decoration: none;
}
The var() function is used mostly when the same variables are to be used in style.css files for different color declarations.
I hope you enjoyed reading this. Thank you.