Using StyleMods
StyleMods are all self-contained Sass documents with styles configured as Sass @mixin to enable selectively compiling them 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.
Repository • Releases • MIT license
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 the default StyleMods styles with Sass variable overrides or using the CSS variables both before and after compiling.
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
Element specific HTML content styles for generic typography, forms, buttons and tables plus optional accessibility orientated styles.
Color
CSS color variable tokens for primary, grayscale and theme surface colors, component and utility modifier extensions and manual theme switch.
Components
Component utility styles commonly used in web design including a small library of SVG icons converted to CSS variable tokens.
Utilities
Generic utility styles and modifier classes for general content design including responsive options for borders and text to use in custom breakpoints.
Layout
A variety of commonly used layout, display and spacing utilities including responsive modules ready-to-use in custom breakpoints.