Base theme for Drupal with starterkit.

Features

• Modern CSS, which includes CSS variables for styling and CSS grids for layouts!
• ITCSS architecture for style structure. If you're not familiar with ITCSS, it's recommended to watch this presentation by Harry Roberts (@csswizardry) to get inspired.
• BEM methodology for template class naming. In variation of Harry Roberts (@csswizardry) as well.

The theme provides only a basic styles for HTML elements (and some Drupal specific ones), a small set of tools and a pre-organized structure. This means that you need to design the site and connect all the necessary libraries and extensions by yourself. It's a price for the flexibility and freedom that a theme gives you. It's a canvas with some important brushes.

Getting started

Structure of CSS

This theme is uses ITCSS architecture.

It's highly recommended to watch this video from it's creator with explanation.

Each level of triangle is much narrow and used for specific usecase.

At the best, utilities is never used, because they meant to have styles with !important key. Use it in the cases where you can't do it without it.

PostCSS starter doesn't have SETTINGS and TOOLS levels, because they are intended for SASS-only features.

Starter theme

STARTER — starter theme based on PostCSS. It's most closely to vanilla CSS. Only several plugins are used. It's intended to give you absolute control of your styles with small QoL improvements. Mostly it gives you some future CSS syntax and CSS optimization, nothing else.

Create theme from starter

1. Copy and paste STARTER_* folder to /themes/custom directory.
2. Rename STARTER_* folder to name of your theme.
3. Inside your theme folder rename every STARTER mention with your theme name.
   • PostCSS only: Replace every STARTER in *.theme file with your theme name.
4. Rename STARTER.info.yml.txt to THEMENAME.info.yml. Just remove .txt so Drupal can find the theme.
5. In STARTER.info.yml also don't forget to replace each STARTER by your theme name. Otherwise, styles will not be included on the pages.

If you did it right, you can find your theme on the Appearance page and install it. To avoid some problems, it's recommended to enable base theme as well, which is Glisseo. You don't need to make it default, just enable.

Compile CSS and JS

1. Install all dependencies npm install

Then use one of the scripts:

1. npm run compile: Compile CSS and JS one time.
2. npm run watch: Watch for CSS and JS sources and compile them on change.

Since these scripts will be part of your theme, you can safely modify everything for your needs.