Frontend SCSS Framework to provide frequently used functions, mixins and styles.
To use this framework you can simply download the project here on github, or install it with npm
.
$ npm install cps-scss-framework
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.
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.
After you installed the framework as described in the Install section simply include the compiled .css
file in your page <head>
section.
<link rel="stylesheet" href="path/to/framwork/dist/framework.css">
To learn more about all the included classes check out the Classes documentation.
To overwrite some of the predefined styles you can include the framework in your SCSS setup.
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!
After you created your personal configuration you need to include the framework.scss
file in your projects main .scss
file.
@import 'path/to/framework/src/framework.scss';
Attention: Make sure to import your configuration file before the framework.scss!
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.
For all Configuration options see the Configuration documentation.
The framework comes with many functions, mixins and classes, below you will find a short overview grouped by each module.
Basic Functions and Mixins used by other modules.
- Functions
- Mixins
- Breakpoints
breakpoint($query, $query-max: false)
- Breakpoints
- Classes
Code released under the MIT License.