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.
Source files (anchor)
StyleMods includes over 500 individual elements that can be compiled in thousands of different combinations depending on what you require. The latest version can be cloned from the repository or downloaded via the ZIP file below, the assets include the Sass source files and JS required the theme switch and dialogs.
Requirements: Dart Sass v1.2.3+
Latest release: StyleMods v1.3.0
Custom setup (anchor)
A custom file setup similar to the following is recommended for compiling both the modules and framework versions as it leaves the source files unchanged and allows seamlessly updating to newer versions of StyleMods when released.
/styles/
- custom.scss
- overrides.scss
/stylemods/
/scss/
Alternatively if you were using StyleMods in multiple projects you could compile styles for each from a global StyleMods system that updates all projects when a new version is released.
Compiling (anchor)
The modules and the framework use the same source code to provide different ways to compile StyleMods depending on your project requirements and preferences for compiling.
- Using modules
- The modules are designed for pure flexibility to allow you to use and reuse the different styles and customize them instance by instance without impacting how anything else is compiled.
- Using the framework
- The framework 'herds' the different modules into a structured environment that wraps the styles with system controls to provide a more traditional framework approach to compiling.
- Customizing
- The modules and the framework both use the same source code so follow the methods for customizing the default Sass values and using the CSS variables to create custom theme documents.
You're not limited to the examples provided in the documentation for using and customizing, the Sass uses very basic techniques written consistently across the system that once you become familiar with reveal a far greater level of flexibility for using and customizing that can be documented on this website.