Introducing the Sector Radix Starter theme

From June 2020, the new Sector Radix Starter theme replaces the Sector Starter theme!  

Motivation

— to move away from a Bootstrap 3 approach in favour of a modern, but familiar, Bootstrap 4 approach to theming Sector websites. The Sector Radix Starter theme is a Drupal Radix sub-theme.

What's new? 🆕

Bootstrap 4 replaces Less with SASS out of the box - meaning we no longer rely on bootstrap-sass and breakpoint-sass packages.

With Sector Radix, we have access to Bootstrap's:

• New CSS flex-based grid system
• Impressive library of utility classes
• Improved form styling, buttons, drop-down menus, responsive media objects and images
• New card component

Sector Radix uses a component-driven approach using Drupal's library loading system. Sector Radix sniffs regions, blocks, views, fields, view modes, and webforms (configurable in preprocess functions) for custom classes, then attempts to load correspondingly named libraries.

Better tooling 🛠

• Updated SASS and JavaScript linting
• Webpack + Babel 7: support for import
• Autoprefixing only files matching configurable specific names (e.g. ie11.scss)
• SVG favicon support using the theme's favicon.svg file

New tools 🛠

• Icon generator - generates a comprehensive and configurable set of favicon and device icons
• Font converter - converts ttf files to a set of web-safe woff + woff2 font stack

Performance ⚡️

With the component-driven approach and the smarter loading of component libraries, the theme is leaner for users of Sector Radix Starter compared to Sector Bootstrap Starter.

For developers

Radix + the components module 

Building on Radix allows us to take full advantage of the components module to better organise our code within the Sector Radix Starter theme included in the Sector Starter kit, as well as for the Sector add-ons. 

Since the new approach breaks up our SASS files into single component files, rather than SASS partials, pre and post processing is magnitudes faster than Sector Bootstrap Starter's global stylesheet approach.

Glitter CSS ☑️✨

With Glitter, we use a toggleable utility to include an additional library that adds a little polish to some of Bootstrap's out-of-the-box components. Developers are encouraged to untick this option when starting their own Sector Radix theme (/admin/appearance/settings/[your-theme]).