Create a classy subtheme

Topics
Theming

Classy is a minimal base theme with classes added to components, providing plenty of css targets for front end developers to use.

Step 1: Generate a theme with Drush

drush gen theme

Give it a name and customize or hit enter to accept defaults.

Make sure you choose the classy base theme for this exercise.

Enable the new theme in your site's appearance settings.

Results

Classy subtheme after generating

Step 2: Customize basic layout

To simplify things for now, let's work with 3 regions - Head, Content, and Footer.

In YOURTHEME.info.yml, remove the extra default regions so it only has:

regions:
  header: 'Header'
  content: 'Content'
  footer: 'Footer'

Copy /web/core/themes/classy/templates/page/page.html.twig to your theme's templates/page directory. Remove extra regions from there.

Clear the cache and go to the block layout settings.

Move blocks into regions.

Edit css/layout.css:

body {
  font-family: sans-serif;
  max-width: 42rem;
  margin: auto;
}