Customizing Bedrock with SASS Overrides

Edit

Improvements?

Let us know by posting here.

Customizing Bedrock with SASS Overrides

In Introduduction to Bedrock we learned to create a new theme using Bedrock. Now, we'll enhance this basic theme for a unique look and develop a second variant, or Skin, for Concrete CMS. Users will be able to select and switch between these skins.

Customizing the Theme

Our customization will align with the Bootstrap 5 approach, keeping Bedrock's base but overriding its default SASS variables to personalize our theme.

Theme Customization Structure

To customize a Bedrock theme, structure it for easy customization and skinning. This doesn't refer to Concrete Dashboard Theme Customizer adjustments but to modifying the theme and Bootstrap framework with custom SCSS variables.

Setting Up SCSS for Customization

Our current theme has a main.scss file which includes Bedrock:

@import "@concretecms/bedrock/assets/bedrock/scss/frontend";

Create an _variables.scss file in assets/scss for customization:

Filesystem Structure

Note: Files prefixed with an underscore (_) in SASS are part of other files and aren't standalone.

Import this new file in main.scss:

@import "variables";
@import "@concretecms/bedrock/assets/bedrock/scss/frontend";

Development Mode with npm run watch

Instead of npm run prod, use npm run watch:

npm run watch

This command stays active, building non-minified, debuggable CSS and JS files. It watches for changes in source files and automatically rebuilds them.

Next, we'll add variables to _variables.scss to define the theme's appearance.

Theme Color Customization

Initial Steps

We begin by enhancing our Bedrock theme's colors, starting with adding an override variables file for customization.

Viewing Overridable Variables

To find variables you can change, check Bootstrap's _variables.scss file on their GitHub. We'll modify primary, secondary, light, and body background colors.

Selecting Colors

Inspired by the Flintstone theme, we use Photoshop to pick colors from an image of Fred Flintstone, applying these to our theme's color variables in SASS:

  • $primary: #375d84 (Blue Tie)
  • $secondary: #eb7724 (Orange Tunic)
  • $light: #fff (White)
  • $body-bg: #ffd89f (Skin Color)

Our running npm run watch process auto-updates these changes.

Adding Custom Color

We introduce a custom fun color (#ec008c), inspired by Fred's pet dinosaur. To integrate this into Bootstrap:

  1. Define $fun in _variables.scss.
  2. Add $fun to the $custom-colors map.
  3. Merge $custom-colors with $theme-colors.

This allows Bootstrap to generate new color variants.

Important: Familiarize yourself with Bootstrap's customization guidelines for better understanding.

Final Outcome

Upon successfully building the file, we see our new fun color variants in alerts and buttons.

Integrating with Concrete CMS

To include the new color in Concrete's editor:

  1. Override the getColorCollection method in page_theme.php.
  2. Extend the default color collection with the new fun color.

This enables the new color to appear in Concrete's block color selectors.

By following these steps, our Bedrock theme is now vividly customized with a unique color scheme and a new, 'fun' color variant.

Simplified Typography Customization

After customizing colors, we're now adjusting the theme's typography, changing the base font size, font family, and headings font family.

Importing Google Fonts

We're importing two Google Fonts for our theme: - Headings: Fredoka One - Main Text: Bellota Text

The imports in _variables.scss:

@import url(//fonts.googleapis.com/css?family=Fredoka+One);
@import url(//fonts.googleapis.com/css2?family=Bellota+Text:wght@400;700&display=swap);

Customizing Headings

New $light-blue color (#8bb2ff) and font settings for headings:

$light-blue: #8bb2ff;
$headings-font-family: "Fredoka One";
$headings-color: $light-blue;
$headings-font-weight: 400;

Setting Base Font

Base typography settings using "Bellota Text":

$font-family-base: "Bellota Text";
$font-weight-base: 500;
$font-size-root: 20px;

After updating the _variables.scss file, we reload it (ensure npm run watch is running) and check the changes in the browser. The typography is significantly changed with these few settings.

Download the Source

The source for this, and all other Bedrock theme work described in this section, can be found on GitHub in https://github.com/concretecms/theme_bedrock_documentation.