Customize the styles
This guide explains how to override a component in Front-Commerce, to customize the default styles
It is not something that you can do in just a few minutes because your identity shines in the details. However, you can do all the heavy lifting pretty quickly by customizing what is called Design Tokens.
And it's a great way to familiarize yourself with Front-Commerce!
Get your Design Tokens
This concept is often closely related to Design Systems. Basically Design Tokens are the core styles of your design: colors, font families, font sizes, borders, shadows, etc. Together they are what make your brand unique.
There even exist tools that extract those tokens from existing websites. In this example, we will use CSS Stats to extract Design Tokens from Smashing Magazine and use them later.
If you want to learn more about it, you can have a look at Design tokens for dummies which is a very nice introduction.
Apply these tokens to your theme
Now that we've got our Design Tokens, let's apply them to Front-Commerce's chocolatine theme.
Since we use the Atomic Design principles, the tokens are within atoms of our
theme. From your application, you will find components in the theme directory
and atoms under its theme/components/atoms
subdirectory.
For example, files for
theme-chocolatine, will be
in
@front-commerce/theme-chocolatine/theme
The theme-chocolatine will be used as an example for this guide
In this guide, we'll focus on the colors and the typography settings. But feel free to go further and edit buttons, form inputs, etc.
Colors
In order to style our HTML, we use Sass, the well-known CSS preprocessor. Thus, the design tokens often translate to Sass variables.
For instance, if we want to edit the colors of our application, we need to override the one defined in the core. To do so:
-
override the
_colors.scss
theme file in your theme:mkdir -p app/theme/components/atoms/Colors/
cp node_modules/@front-commerce/theme-chocolatine/theme/components/atoms/Colors/_colors.scss \
app/theme/components/atoms/Colors/_colors.scss -
edit the colors as needed
In Smashing Magazine's case it would be:
-$brandPrimary: #fbb03b;
-$brandSecondary: #818199;
+$brandPrimary: #d33a2c;
+$brandSecondary: #2da2c5;
-$fontColor: #131433;
+$fontColor: #333;