Using the framework

Quickstart (anchor)

1. Create a Sass document to compile the styles and second one to enable them via overrides, then include both with the StyleMods source files in your project's style directory as follows:

[styles]
 - custom.scss
 - overrides.scss
 [stylemods]
   [scss]

2. Load the configuration in the overrides file then enable the styles required as follows:

@use "stylemods/scss/configuration" as *;
$enable-typography:     true;
$enable-forms-buttons:  true;
$enable-tables:         true;

3. Setup your custom Sass document for compiling as follows:

@use "overrides";
@use "stylemods/scss/stylemods";

The individual docs pages also include usage instructions for enabling each style option as demonstrated above, see the configuration files below to view all the options.

Multiple overrides (anchor)

You can also create different overrides documents to enable specific styles that could be used in multiple projects:

@use "stylemods/scss/configuration" as *;
$enable-typography:     true;
$enable-forms-buttons:  true;
$enable-tables:         true;

@use "stylemods/scss/configuration" as *;
$enable-accordions:   true;
$enable-dialogs:      true;
$enable-popovers:     true;

Then include them as you would with an overrides document:

@use "reset";
@use "components";
@use "stylemods/scss/stylemods";

Combined overrides (anchor)

The same overrides file can also be used to customize the styles:

@use "stylemods/scss/configuration" as *;
$enable-typography:       true;
$enable-forms-buttons:    true;
$enable-tables:           true;

@use "stylemods/scss" as *;
$body-font-size:          1.1rem;
$button-padding-inline:   0.75rem;
$table-padding-inline:    0.75rem;

If preferred they can still be included in separate documents that could also then be used in more than one project:

@use "system";
@use "theme-1";
@use "stylemods/scss/stylemods";

@use "system";
@use "theme-2";
@use "stylemods/scss/stylemods";

Single document (anchor)

You can also keep everything within the same document if you'd prefer to keep things contained or are only using a couple of styles:

@use "stylemods/scss/configuration" as *;
$enable-typography:       true;
$enable-forms-buttons:    true;
$enable-tables:           true;
@use "stylemods/scss/stylemods";

@use "stylemods/scss/configuration" as *;
@use "stylemods/scss" as *;
$enable-typography:       true;
$body-font-size:          1.1rem;
@use "stylemods/scss/stylemods";

Cascade layers (anchor)

The styles can be compiled using cascade layers with customizable layer order, individual layers and breakpoint options (see below) enabled individually if required:

@use "stylemods/scss/configuration" as *;
$enable-layer-order:            true;
$enable-color-layer:            true;
$enable-content-layer:          true;
$enable-components-layer:       true;
$enable-utilities-layer:        true;
$enable-modifiers-layer:        true;
$enable-layout-layer:           true;
$enable-icons-layer:            true;

$enable-utilities-layer-xxl:    true;
$enable-utilities-layer-xl:     true;
$enable-utilities-layer-lg:     true;
$enable-utilities-layer-md:     true;
$enable-utilities-layer-sm:     true;
$enable-utilities-layer-xs:     true;
$enable-utilities-layer-xxs:    true;
$enable-layout-layer-xxl:       true;
$enable-layout-layer-xl:        true;
$enable-layout-layer-lg:        true;
$enable-layout-layer-md:        true;
$enable-layout-layer-sm:        true;
$enable-layout-layer-xs:        true;
$enable-layout-layer-xxs:       true;

The default names (used below) for the layers can be customized:

@use "stylemods/scss/configuration" as *;
$color-layer:         color;
$content-layer:       content;
$components-layer:    components;
$utilities-layer:     utilities;
$modifiers-layer:     modifiers;
$layout-layer:        layout;
$icons-layer:         icons;

The layer order can be re-arranged and/or expanded to include custom layers:

@use "stylemods/scss/configuration" as *;
$layer-order: '#{$color-layer}, #{$content-layer}, #{$components-layer}, #{$utilities-layer}, #{$modifiers-layer}, #{$layout-layer}, #{$icons-layer}';

Breakpoints (anchor)

The default breakpoint sizes used for the responsive modifier classes can be customized to use your own values and the media query changed to suit your own design preferences.

@use "stylemods/scss/configuration" as *;
$breakpoint-query:  'width <';
$breakpoint-xxl:    1536px;
$breakpoint-xl:     1366px;
$breakpoint-lg:     1280px;
$breakpoint-md:     1024px;
$breakpoint-sm:     768px;
$breakpoint-xs:     480px;
$breakpoint-xxs:    360px;

The breakpoints for the individual modules are enabled individually as required:

@use "stylemods/scss/configuration" as *;
$enable-margins:       true;
$enable-margins-lg:    true;
$enable-margins-md:    true;
$enable-margins-sm:    true;

$enable-padding:       true;
$enable-padding-lg:    true;
$enable-padding-md:    true;
$enable-padding-sm:    true;

$enable-gaps:          true;
$enable-gaps-lg:       true;
$enable-gaps-md:       true;
$enable-gaps-sm:       true;

Framework files (anchor)

The framework files use the default StyleMods module mixins as designed but wraps them within Sass @if rule controls for managing what's included. The system isn't complicated but it is verbose so the Sass files for compiling the framework have been compartmentalized into the distinct source files outlined below.

Configuration (anchor)

The configuration files include all the default $enable-* options described above and documented throughout the website, plus the default values for the framework's responsive breakpoint sizes and cascade layer styles.

Source documents

stylemods/scss/configuration/styles.scss

stylemods/scss/configuration/colors.scss

stylemods/scss/configuration/breakpoints.scss

View on Github

https://github.com/pmbrown/StyleMods/blob/main/scss/configuration/styles.scss

https://github.com/pmbrown/StyleMods/blob/main/scss/configuration/colors.scss

https://github.com/pmbrown/StyleMods/blob/main/scss/configuration/breakpoints.scss

The configuration files are essentially the only files you need to get familiar with if using the framework

Framework mixins (anchor)

The framework files include the styles as individual mixins within @if rules controlled by the $enable-* configuration options, then group the individual mixins within each style module for compiling.

Source documents

stylemods/scss/framework/styles.scss

stylemods/scss/framework/colors.scss

stylemods/scss/framework/breakpoints.scss

View on Github

https://github.com/pmbrown/StyleMods/blob/main/scss/framework/styles.scss

https://github.com/pmbrown/StyleMods/blob/main/scss/framework/colors.scss

https://github.com/pmbrown/StyleMods/blob/main/scss/framework/breakpoints.scss

Compiler (anchor)

The stylemods.scss document includes the grouped mixins from the framework documents and compiles them depending on the configuration options for the cascade layers and the breakpoints.

Source documents

stylemods/scss/stylemods.scss

View on Github

https://github.com/pmbrown/StyleMods/blob/main/scss/stylemods.scss