Theming Overview

Themes are a collection of CSS, JavaScript, templates files, images and other assets. This theming guide will describe the structure and purpose of such files in an Adaptivetheme sub-theme, and how you can use those files to build your custom theme.

The guide is broken down into sections most often relevant to all themers.

Theme Extensions vs Code
Should you use the Extension settings or code it yourself? This is an overview of when and why you might choose one or the other.
This section discusses SCSS and CSS usage in the theme. SCSS is not a requirement, however it is fully supported and recommended.
The User Interface Kit is a library of SCSS components. It was designed specifically for theming Drupal and AT sub-themes. It includes many useful tools to speed up theming and integrations with the Layout system, breakpoints and other aspects of Adaptivetheme sub-themes and Drupal core.
In Drupal 8 CSS and Javascript assets are loaded via the library system. This section details the libraries used in sub-themes, including when and why they're loaded.
Adaptivetheme includes many template overrides and several unique templates. Here we details templates and suggestions.
An introduction to the JS plugins included in the theme and how you might use them in your theme.
Breakpoints and Media Queries
Sub-themes use media queries to enable and control responsive styles and behaviours. In this section we look at the breakpoints supplied by AT Core and how they're used BY sub-themes.
In this section we discuss the page layout system and Layout Plugin layouts.
Color Module
Some themers will want to use the Color module. This is brief overview of how to use the color module features in sub-themes.
Font Awesome
This is a detailed overview of Font Awesome and how it's used in the theme.