Styleguide

Creating a style guide for front-end development involves establishing a set of standards and best practices for designing and coding web interfaces. This ensures consistency, maintainability, and efficiency across a project or team.

Guidelines / Instructions

Follow these steps to easily configure the style guide on the front-end:

1. Access the Style Guide Page:

   • Go to the style guide page by adding '/admin/styleguide' to the base URL (e.g., https://test-vanilla.cloudsuite.com/en-nl/admin/styleguide/).
   • Open the corresponding Figma file to refer to the design guidelines:

2. Update Icons, Logos, and Images:

   • Go to the images directory in the project. Use mosaic-templates/images as a reference.
   • Replace the existing files with your new icons, logos, and images, ensuring they follow the same naming conventions and formats.

3. Customize Theme Colors:

   • Navigate to the styles/variables/_colors.scss directory within the Mosaic Templates theme.
   • Open the Figma file to identify the colors used in the style guide.
   • Match the color names in Figma with the corresponding variables in the Mosaic Templates theme. Create a file with the same name in the theme and set variables that need to be changed.

   The new file _colors.scss in the theme directory styles/variables/ will look like this:

   :root {
     --cs-color-text-headings: #YourNewColorCode; // Color for headings text
     --cs-color-text-body: #YourNewColorCode; // Color for body text
   }

4. Customize Typography:

   • Open the Figma file to identify the typography used in the style guide.
   • Match the typography names in Figma with the corresponding variables in the Mosaic Templates theme (styles/settings/elements/_brand.scss).
   • If any changes need to be made to the default values, create a file with the same name and place it in the same directory as in the Mosaic Templates theme. Then, set the variables that need to be changed.

   The new file _brand.scss in the theme directory styles/settings/elements/ will look like this:

   $font-weight-larger-title: 500;
   $font-weight-large-title: 500;
   
   $header-icon-font-size: rem-calc(22);

5. Customize Elements:

   • Go through all the tabs in the style guide on your site.
   • Compare each element's style with the corresponding element in the Figma file.
   • Make necessary adjustments in the SCSS files to ensure that all element styles match the Figma design specifications.