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.
Customizable style modules for web design
StyleMods is a collection of customizable content styles, variables, utilities and components ready to use as Sass modules in custom style sheets. Designed for flexibility include only what you want where you want it and customize default property values to suit project parameters as required.
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.
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.