From June 2020, the new Sector Radix Starter theme replaces the Sector Starter theme!
— 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
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 🛠
- Webpack + Babel 7: support for
- Autoprefixing only files matching configurable specific names (e.g.
- SVG favicon support using the theme's
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
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.
|Sector Bootstrap Starter||Sector Radix Starter||% Saved|
|Section A||157.81KB||130.53KB||27.28KB (18.92%)|
|News article||157.81KB||130.16KB||27.65KB (19.20%)|
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 (