Back to top anchor
Documentation

Introducing the Sector Radix Starter theme

We are updating our documentation library to be ready for the Sector 10! Find out more in our Sector 10 roadmap or head straight to our collection of Sector 10 - Changes and Updates.

User role
Drupal Sitebuilder Site Administrators (UID1)
Collection
Task
Frontend
Product
Sector Ecosystem Sector 9 Sector Starter kit

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.

Performance wins comparing the old Sector Starter Theme with Sector Radix
  Sector Bootstrap Starter Sector Radix Starter % Saved
Homepage 162.85KB 131.95KB 30.9KB (20.96%)
Section A 157.81KB 130.53KB 27.28KB (18.92%)
News article 157.81KB 130.16KB 27.65KB (19.20%)

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]).

Want to try it? 

Install the latest Sector development version 5.0.x-dev and let us know what you think.

Radix Theme Frontend

Last updated

Sector 10 is coming!

Find out more in our Sector 10 roadmap.

Need Help?

Sector is brought to you by Sparks Interactive - supporting Sector from Wellington and Auckland

Open Source award winner!

Sparks Interactive are delighted to accept the Open Source Use in Business award for Sector and the Sector.nz open source platform.

Subscribe for Sector updates