Getting started
StyleMods are all self-contained Sass documents that can be compiled individually as Sass modules in custom style sheets or selectively as required using a pre-configured framework.
Customizable style modules for web design
StyleMods is a library of customizable content styles, colors, utilities, components and icons with over 500 different style modules that can be compiled individually or together in 1000s of combinations.
Using StyleMods Shared under MIT license. Requires Dart Sass v1.23.0+Use only what's required and customize it to project parameters.
Whether you require typography styles, an accordion component, a flex utility class or even just a single icon StyleMods is setup to enable bringing modules in selectively and customizing the default property values to suit requirements.
Using modules
The styles are all written and configured as individual Sass @mixin to enable easily including them in custom styles selectively for compiling using @include.
Using the framework
The StyleMods framework is setup to enable selectively including over 500 different style modules using simple true or false statements in a configuration document.
Customizing
Customize default property values with Sass overrides, with CSS variables before and after compiling, or use the Sass maps for expanding, customizing and creating new styles.
A library of ready to use styles commonly used in web design.
All standalone documents, a growing library of content styles, colors, components and utilities provide hundreds if not thousands of combinations in which StyleMods can be used and customized.
Content
Styles cohesively designed for element specific HTML content covering default typography, forms, buttons and tables plus optional accessibility orientated styles and utilities.
Color
Over 150 customizable CSS color variable tokens for primary, grayscale and theme surface colors, plus component and utility modifier extensions and a manual color-scheme switch.
Components
A collection of cohesively designed styles for components commonly used in web and app design with stylised elements including accordions, alerts, buttons, dialogs, list-groups, and popovers.
Utilities
Commonly used generic utility styles and modifier classes for general content design including optional responsive modules for borders and text ready-to-use in custom breakpoints.
Layout
A variety of generic layout, display and spacing utilities commonly used in web and app design each including optional responsive modules ready-to-use in custom breakpoints.
Icons
SVG icons converted to CSS variable tokens to use with custom styles, a template for creating custom icons, plus icon utility classes to display the icons as purely decorative CSS.