SCSS Framework
Frontend SCSS Framework to provide frequently used functions, mixins and styles.
Install
To use this framework you can simply download the project here on github, or install it with npm.
$ npm install cps-scss-frameworkUsage
There are two ways of usage for this framework. The first option is to include the compiled dist/framework.css in your project. The second, more preferable, option is to include the src/framework.scss in your project and overwrite the default settings.
A) Include the pre-compiled css file
You can use the pre-compiled css file as standalone framework in your project. The Framework comes with some default options and styles, which cannot be overwritten in this method.
1.) Include the framework.css in your <head> section.
After you installed the framework as described in the Install section simply include the compiled .css file in your page <head> section.
2.) Use the included classes to style your website.
To learn more about all the included classes check out the Classes documentation.
B) Include the scss file and use your own settings
To overwrite some of the predefined styles you can include the framework in your SCSS setup.
1.) Create your own configuration file.
After you installed the framework as described in the Install section you should create your personal configuration file. Simply copy the src/_config.scss file to your scss path and change the configuration according to your needs.
Attention: Make sure to import your configuration file before the framework.scss!
2.) Import the framework.scss in your project.
After you created your personal configuration you need to include the framework.scss file in your projects main .scss file.
;Attention: Make sure to import your configuration file before the framework.scss!
3.) Use the included functions, mixins and classes in your project.
Now you can use all the included functions, mixins and classes with your own configuration in your project. See the Functions, Mixins and Classes Documentation for further details.
Configuration
For all Configuration options see the Configuration documentation.
Included Functions, Mixins and Classes
The framework comes with many functions, mixins and classes, below you will find a short overview grouped by each module.
Global
Basic Functions and Mixins used by other modules.
- Functions
- Mixins
- Breakpoints
breakpoint($query, $query-max: false)
- Breakpoints
- Classes
License
Code released under the MIT License.