Tulip Theme Docs

SCSS Introduction

Tulip Theme using SCSS to make easier developing our styling CSS template. We resemble the CUBE CSS structure, inspired by web.dev of Google Chrome Web Devs.

Introducting of CUBE CSS

CUBE CSS is a CSS methodology that's orientated towards simplicity, pragmatism and consistency. CUBE stands for Composition Utility Block Exception.

SCSS file and folder structure

Our styling CSS stands with the principle of CUBE CSS methodology

src
└── scss
    ├── blocks
    ├── compositions
    ├── functions
    ├── mixins
    ├── pages
    ├── utilities
    ├── web-components
    ├── _config.scss
    ├── _fonts.scss
    ├── _reset.scss
    ├── _site-footer.scss
    ├── _site-header.scss
    ├── _tokens.scss (generated)
    └── tulip.scss

The Sass scss folder mostly resembles the CUBE CSS structure and is as follows:

  1. blocks: contained components
  2. compositions: layout compositions
  3. functions: Sass functions used across the SCSS files
  4. mixins: Sass mixins used across the SCSS files
  5. pages: specific styles for pages and page types
  6. utilities: core utilities
  7. web-components: styles for lit web components
  8. _config.scss: core Gorko configuration
  9. _fonts.scss: @font-face declarations
  10. _reset.scss: a lightweight CSS reset
  11. tokens.scss: Variable config size and colors tokens.
  12. tulip.scss: the main SCSS file that pulls everything together and defines global CSS

References

Learn SCSS web.dev Design System