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.
Over 500 customizable style modules for website design and development.
Build and design websites quickly with a growing library of 500+ different styles that can be compiled and customized individually or together in 1000s of combinations.
Using StyleMods Shared under MIT license. Requires Dart Sass v1.23.0+Built with Sass modules for flexibility, use only what's required and customize it to suit 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 compiling over 500 style modules individually 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.
Commonly used styles written to baseline standards all designed cohesively to work individually or combined.
A growing reusable collection of individual content styles, colors, components, utilities, layouts and icons are all designed to work as independent, self-contained styles if required, or can be integrated together to provide a custom framework of styles.
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 160 customizable color tokens for primary and semantic named colors plus theme modifier variables and integrated modifier classes for StyleMods components and utilities.
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, icon utility classes to display the icons as purely decorative CSS, and a utility for creating custom SVG icons.