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.
src/assets/style/style.scss
@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.
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:
mixins: for sass mixins and functions
variables: for sass variables
base: for global base html element styles (like reset)
atoms: for specific small-grain atomic styles
molecules: for molecule (or multiple composed atoms)
organisms: for larger markup structure styles
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.
npminstall--savebootstrap@5.1.3
Ok, now let's create the following files anywhere in our src directory:
In our _reactium-style-mixins.scss partial, let's import the highest priority items from the bootstrap framework (functions, mixins, default variables):
_reactium-style-mixins.scss
/*! * Bootstrap v5.1.3 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */// 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:
Ok, now let's look at what Reactium will put in our modules partial for us automatically:
src/assets/style/_scss/_reactium-modules.scss
// 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.
Variables
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:
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:
This component directory can now be moved safely anywhere in the src directory without changing needing to change the import statement in your stylesheet!
