master-css
v1.4.5
Published
Collection of styles for Axcess Software Suite
Downloads
81
Readme
Master-css
Master-css is a wk-themed version of bootstrap along with several third party front end components:
- Angular-Toaster
- UI-Grid
- UI-Bootstrap
- UI-Select
Dependencies
In order to build the module, you will need to install the following apps:
- Node.js
- [Grunt] (http://gruntjs.com/) or [gulp] (http://gulpjs.com/)
Once node is installed, you will need to add the grunt-cli to your global node repository:
$ npm install grunt-cli -g
Installation
Master-css is installed using npm:
$ npm install master-css --save
This will put master-css into your node_modules directory.
Usage
Master-css is best utilized when you are making use of its scss components and the functionality that those provide.
The best way to go about this is to set up your own sass directory and import the styles you need from the main directory.
Then you would use the task runner of your choice to compile the scss.
Using Grunt
Assuming you already have a gruntfile already, first thing you would need to install is the grunt-sass plugin.
$ npm install grunt-sass --save-dev
And the task in your gruntfile should look something like this
sass: {
master: {
options: {
outputStyle: 'compressed',
sourceMap: true
},
files: {
// if you only wanted to compile master-css
'node_modules/master-css/stylesheets/main.scss': '/content/css/master.css'
// if you want to customize your master-css build import the files in the sass and compile those
'<path to your own main.scss stylesheet goes here>': '<path to your output css>'
}
}
}
Your own sass file would look something like this
//your own bootstrap variable overrides must be imported first if you are using them
@import 'custom_theme'
//the base stylesheets, includes bootstrap uibootstrap icons and fonts
@import './node_modules/master-css/stylesheets/base.scss'
//Picking and chosing the components you need.
@import './node_modules/master-css/stylesheets/components/<path to component .scss file>'
//now import your own styles.
...