SCSS Framework to provide frequently used functions, mixins and styles.
npm install cps-scss-frameworkFrontend 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.
``text`
$ 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.
#### 1.) Include the framework.css in your
section.After you installed the framework as described in the Install section simply include the compiled
.css file in your page section.`html
`#### 2.) Use the included classes to style your website.
To learn more about all the included classes check out the Classes documentation.
$3
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.`scss
@import 'path/to/framework/src/framework.scss';
`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.
$3
Basic Functions and Mixins used by other modules.
color($name, $opacity: false)
* Mixins
* Breakpoints breakpoint($query, $query-max: false)
* Classes
* Grid
* .o_grid
* .o_grid__row
* .o_grid__col
* Colors
* .u-color-bg:$name
* .u-color-bo:$name
* .u-color-c:$name`Code released under the MIT License.