Creating a Sassy Style Sheet

Reactium makes SASS components easy.

Domain Atomic Partials

Reactium will track your component domain partials for you, and helps you keep your style hierarchy organized by Atomic Design concepts.

Ordinarily in SASS, you would be fully responsible for setting up your base .scss stylesheet, and manage a set of @import statements for each partial in your system. With Reactium, any specially named partials found throughout your src code-base will be automatically imported into a special partial, found at src/assets/style/_scss/_reactium-modules.scss. This partial is managed by Reactium, so just import it in your top-level stylesheet to get started.

@import '_scss/reactium-modules';

In general you won't need to edit this file. This is the default.

When starting the Reactium build locally, a style.css will automatically be generated and placed in the /public/assets/style directory, which will be served by Node/Express at http://localhost:3030/assets/style/style.css.

Dynamic Partials

See _reactium-style partials reference for more information.

Rather than managing all of your styles in one place (such as the /src/assets/style directory), this will let you place your styles anywhere in the src directory, and will automatically import them in a sensible order.

The order which these partials is loaded in your sassy style-sheet is:

  1. mixins: for sass mixins and functions

  2. variables: for sass variables

  3. base: for global base html element styles (like reset)

  4. atoms: for specific small-grain atomic styles

  5. molecules: for molecule (or multiple composed atoms)

  6. organisms: for larger markup structure styles

  7. overrides: for overriding existing styles using natural cascade order

Example: Bootstrap SCSS

In this example, let's add bootstrap styles from the NPM module into the Reactium stylesheet hierarchy.

First, let's install bootstrap into the project.

npm install --save bootstrap@5.1.3

Ok, now let's create the following files anywhere in our src directory:

├── bootstrap
│   ├── _reactium-style-atoms.scss
│   ├── _reactium-style-base.scss
│   ├── _reactium-style-mixins.scss
│   ├── _reactium-style-molecules.scss
│   └── _reactium-style-organisms.scss

In our _reactium-style-mixins.scss partial, let's import the highest priority items from the bootstrap framework (functions, mixins, default variables):

 * Bootstrap v5.1.3 (
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (

// scss-docs-start import-stack
// Configuration
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Toggles
// Used in conjunction with global variables to enable certain theme features.

// Vendor
@import "~bootstrap/scss/vendor/rfs";

// Deprecate
@import "~bootstrap/scss/mixins/deprecate";

// Helpers
@import "~bootstrap/scss/mixins/breakpoints";
@import "~bootstrap/scss/mixins/color-scheme";
@import "~bootstrap/scss/mixins/image";
@import "~bootstrap/scss/mixins/resize";
@import "~bootstrap/scss/mixins/visually-hidden";
@import "~bootstrap/scss/mixins/reset-text";
@import "~bootstrap/scss/mixins/text-truncate";

// Utilities
@import "~bootstrap/scss/mixins/utilities";

// Components
@import "~bootstrap/scss/mixins/alert";
@import "~bootstrap/scss/mixins/backdrop";
@import "~bootstrap/scss/mixins/buttons";
@import "~bootstrap/scss/mixins/caret";
@import "~bootstrap/scss/mixins/pagination";
@import "~bootstrap/scss/mixins/lists";
@import "~bootstrap/scss/mixins/list-group";
@import "~bootstrap/scss/mixins/forms";
@import "~bootstrap/scss/mixins/table-variants";

// Skins
@import "~bootstrap/scss/mixins/border-radius";
@import "~bootstrap/scss/mixins/box-shadow";
@import "~bootstrap/scss/mixins/gradients";
@import "~bootstrap/scss/mixins/transition";

// Layout
@import "~bootstrap/scss/mixins/clearfix";
@import "~bootstrap/scss/mixins/container";
@import "~bootstrap/scss/mixins/grid";

@import "~bootstrap/scss/_utilities.scss";

Next, let's add our base styles controlling layout from the bootstrap framework into _reactium-style-base.scss:

// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";

Next, let's select a handful of atom (small-grain) styles we wish to use from the framework, and add them into _reactium-style-atoms.scss:

@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms/labels";
@import "~bootstrap/scss/forms/form-text";
@import "~bootstrap/scss/forms/form-control";
@import "~bootstrap/scss/forms/form-select";
@import "~bootstrap/scss/forms/form-check";
@import "~bootstrap/scss/forms/form-range";
@import "~bootstrap/scss/forms/floating-labels";
@import "~bootstrap/scss/forms/input-group";
@import "~bootstrap/scss/forms/validation";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";

Next, let's select some molecule styles:

@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";

Next, our large organisms and any late precedence styles from the framework:

@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/offcanvas";
@import "~bootstrap/scss/placeholders";

// Helpers
@import "~bootstrap/scss/helpers/clearfix";
@import "~bootstrap/scss/helpers/colored-links";
@import "~bootstrap/scss/helpers/ratio";
@import "~bootstrap/scss/helpers/position";
@import "~bootstrap/scss/helpers/stacks";
@import "~bootstrap/scss/helpers/visually-hidden";
@import "~bootstrap/scss/helpers/stretched-link";
@import "~bootstrap/scss/helpers/text-truncation";
@import "~bootstrap/scss/helpers/vr";

// Utilities
@import "~bootstrap/scss/utilities/api";

Ok, now let's look at what Reactium will put in our modules partial for us automatically:

// WARNING: Do not directly edit this file !!!!
// File generated by gulp styles:partials task

@import 'bootstrap/_reactium-style-mixins';
@import 'bootstrap/_reactium-style-base';
@import 'bootstrap/_reactium-style-atoms';
@import 'bootstrap/_reactium-style-molecules';
@import 'bootstrap/_reactium-style-organisms';

Note the WARNING message. Don't modify this file, as Reactium will recreate it frequently during local development and production build.


Ok, now that we've importing those components of bootstrap that we want, let's setup a SCSS variables file so we can override any of the variable defaults in bootstrap for Themeing:

$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$black: #212529;
$black: #000;

Domain Styling

Up to this point, we've been building out style-sheet from the top-level /src/assets/style directory in our project. This is sometimes desirable, such as in this case (importing styles from a library). Often though we have styles that apply to a component in our application, and it would nice to create that style in the same directory as our component.

Fortunately, Reactium will find these partials anywhere in your src directory, and automatically import them.

Let's say I have a custom Button component, and I want to style it in place:

import React from 'react';

const CustomButton ({children, ...props}) => 
    (<button {...props} className='custom-button'>{children}</button>);

export default CustomButton;

Now to style this button, I can create an atom style partial in the same directory, and Reactium will automatically import it:

.custom-button {
    background: $gray-800;
    color: $white;

This component directory can now be moved safely anywhere in the src directory without changing needing to change the import statement in your stylesheet!

Last updated