Using StyleMods

StyleMods are all self-contained Sass documents with styles configured as Sass @mixin to enable selectively compiling them using @include.

Quickstart (anchor)

To use StyleMods load the scss directory using the @use rule with the * namespace value as demonstrated then include the mixins required anywhere below. Change the path to suit the source files location as required.

@use "stylemods/scss" as *;
@include typography-css;
@include accordions-css;

If including custom SCSS inside the StyleMods scss directory load the index.scss file instead.

@use "index" as *;
@include typography-css;
@include accordions-css;

All the individual mixin names are provided on the docs pages with instructions as per the first example above, the website docs example further below also provides a demo of StyleMods as compiled for this site.

Responsive modifiers (anchor)

The majority of the layout utilities and some of the text and border utilities also include responsive modifier mixins to include in custom breakpoints, each uses the following naming convention for the responsive mixins:

@include block-css;
@include block-xxl-css;
@include block-xl-css;
@include block-lg-css;
@include block-md-css;
@include block-sm-css;
@include block-xs-css;
@include block-xxs-css;

Breakpoint sizes are then determined in custom SCSS and responsive modules included only where required:

@use "stylemods/scss" as *;
@include block-css;

@media (width <= 1024px) {
  @include block-md-css;
}
@media (width <= 480px) {
  @include block-xs-css;
}

Website docs example (anchor)

The following is the document used for compiling StyleMods for this website, it demonstrates an expanded example of using StyleMods as described above including only what's required for the site.

@use "stylemods/scss" as *;

// Color variables
@include all-color-variables-css;
@include all-theme-variables-css;

// HTML
@include typography-css;
@include forms-buttons-css;
@include tables-css;
@include vis-hidden-css;

// Components
@include accordions-css;
@include alerts-css;
@include cards-css;
@include dialogs-css;
@include dialogs-animation-css;
@include list-groups-css;
@include popovers-css;
@include popovers-animation-css;

// Utilities
@include background-css;
@include badges-css;
@include borders-css;
@include buttons-css;
@include gradients-css;
@include images-css;
@include lists-css;
@include shadows-css;
@include text-css;

// Color utilities
@include blue-utilities-css;

// Layout
@include allgrids-variables-css;
@include grid-utilities-css;
@include grid-css;
@include autogrid-css;
@include gaps-css;
@include alignment-css;
@include block-css;
@include containers-css;
@include flex-css;
@include margins-css;
@include padding-css;
@include sizes-css;

// Breakpoints
@media (width <= 1600px) {
  @include grid-xl-css;
  @include autogrid-xl-css;
  @include gaps-xl-css;
}

@media (width <= 1280px) {
  @include grid-lg-css;
  @include autogrid-lg-css;
  @include gaps-lg-css;
}

@media (width <= 1024px) {
  @include grid-md-css;
  @include autogrid-md-css;
  @include gaps-md-css;
}

@media (width <= 768px) {
  @include grid-sm-css;
  @include autogrid-sm-css;
  @include gaps-sm-css;
}

@media (width <= 480px) {
  @include grid-xs-css;
  @include autogrid-xs-css;
  @include gaps-xs-css;
}

// Icons
@include icons-utilities-css;

Sass variables (anchor)

The Sass functionality in each module can also be used to create custom styles, components and utilities without compiling any of the modules. Everything can be accessed using the same @use rule as above and included in any of the custom styles wherever required.

@use "stylemods/scss" as *;

.menu a {
  --ico: #{$yellow-4};
  color: $yellow-4;
  padding: $padding-2;
  background-color: $blue-6;
}

.menu a:before {
  @include icon-mask;  
}

.menu .home {
  --svg: #{$house};
}

.menu .profile {
  --svg: #{$user};
}

.menu .contact {
  --svg: #{$email};
}

.menu a:is(:hover, :focus) {
  --ico: #{$yellow-6};
  background-color: $blue-7;
}

As demonstrated if using Sass variables for CSS variable values the #{} interpolation is required to embed the styles. See the Sass docs about interpolation and custom properties (CSS variables) for more information.