Getting started
StyleMods are self-contained Sass documents to compile individually as Sass modules in custom style sheets or selectively 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 or with CSS variables before and after compiling, or use the Sass maps for expanding and customizing 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
Mildly opinionated content reset styles for standard HTML typography, forms, buttons and tables plus optional accessibility focused utilities.
Color
220+ color variable tokens for primary and semantic named colors, custom theme variables and optional color classes for components and utilities.
Components
Commonly used components in website and app design with elements including accordions, alerts, buttons, dialogs, list-groups, and popovers.
Utilities
Utility styles and modifier classes for general content design with optional responsive modules for borders and text to use in custom breakpoints.
Layout
Content layout, display and spacing utilities for general web and app design with optional responsive modules ready-to-use in custom breakpoints.
Icons
SVG icons for common web design converted to CSS variable tokens to use with utility classes and custom styles, and a utility for creating custom icons.