Using StyleMods

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

Quickstart (anchor)

1. Load StyleMods with the @use rule as shown (change the file path as required).
2. Include the required module mixins and any other Sass or CSS anywhere below.

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

The individual mixin names are shared on the docs pages with usage instructions as above. You can include them individually as shown or if preferred you can also include them as grouped modules as described below.

Include anywhere (anchor)

The styles are not confined to a fixed single source document for compiling, if required they can be used in multiple project SCSS files then compiled as preferred.

@use "stylemods/scss" as *;
@include typography-css;
@include forms-buttons-css;
@include tables-css;

@use "stylemods/scss" as *;
@include flex-css;
@include gaps-css;
@include margins-css;

This is not restricted to the Sass @mixin, the Sass variables and maps in the styles can also be used to create custom styles in multiple files without impacting how the values might be compiled elsewhere (see below).

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 flex-css;
@include flex-xxl-css;
@include flex-xl-css;
@include flex-lg-css;
@include flex-md-css;
@include flex-sm-css;
@include flex-xs-css;
@include flex-xxs-css;

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

@use "stylemods/scss" as *;
@include flex-css;
@include gaps-css;
@include margins-css;

@media (width <= 1024px) {
  @include flex-md-css;
  @include gaps-md-css;
}
@media (width <= 480px) {
  @include flex-xs-css;
  @include gaps-xs-css;
  @include margins-xs-css;
}
@media (width <= 360px) {
  @include gaps-xxs-css;
}

Include all (anchor)

You can also include everything from the module categories instead of individually as shown above:

@use "stylemods/scss" as *;
@include all-content-css;
@include all-color-css;
@include all-components-css;
@include all-utilities-css;
@include all-layout-css;
@include all-icons-css;

The grouped layout utilities also provide the optional responsive modifier mixins, each follows the same name convention as the other responsive modifiers and are also included in custom breakpoints where required:

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

With all six module categories and all seven responsive layout modifiers compiled the style sheet (currently) totals 248kb uncompressed, so although useful the grouped layout options are not really recommended for use in production sites. You can of course combine both options to help streamline custom styles, and it's essentially for that reason that the grouped options are now provided.

Custom Sass and CSS (anchor)

Your own custom Sass and/or CSS can go anywhere after* the @use rule import of StyleMods, you can place it either above, in-between or below any @mixin included in the document.

@use "index" as *;
/* Custom styles */
@include typography-css;
/* Custom styles */
@include accordions-css;
/* Custom styles */
@include flex-css;

As this highlights you're not confined to StyleMods being compiled in a strict structure, you can shape your custom styles exactly as you want them using only what you need from StyleMods included where required.

*Styles can go before @use rules but have specific rules, see the Sass website's @use documentation page for more information.

Sass functionality (anchor)

The Sass functionality in each module can also be used to create custom styles, components and utilities without compiling any of the mixins. 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 {
  color: #fff;
  padding: $padding-2;
  background-color: $blue-6;
}
.menu a:is(:hover, :focus) {
  background-color: $blue-7;
}

Apart from the Sass variables other Sass functionality used within the styles can also be used, the icons module for example uses a Sass @mixin to generate the property styles that can be used with the Sass variables to create custom icon components where required.

@use "stylemods/scss" as *;
.menu a:before {
  @include icon-mask;  
}
.menu .home {
  --svg: #{$house};
}
.menu .profile {
  --svg: #{$user};
}
.menu .contact {
  --svg: #{$email};
}

The default property values for the Sass variables can also be customized with overrides as described on the customizing page, and as Sass modules any styles customized in one document don't apply to the styles if they are used elsewhere in project SCSS files making both custom and default property values available for use in styles.

Sass maps (anchor)

The color, utilities and layout modules all use Sass maps to help generate the individual styles and variables, as does the SVG icons to help generate the SVG icon variable tokens. See Sass maps on the customizing page for more information about using these in custom styles to expand the existing utility style and modifiers.