epic-css
v0.7.0
Published
CSS library with prebuild utilities
Downloads
32
Readme
NPM custom install
Install dependencies:
npm install sass npm install epic-css
This will install Sass and Epic CSS in your
package.json
file as dependencies.Add script command:
In your package.json file add the
epic-compile
command."epic-compile": "sass --style expanded --source-map --embed-sources --no-error-css --quiet src/my-epic-css/index.scss:src/_includes/style.css"
To use, run
npm run epic-compile
. This will build your style sheet based on the directory input and output for this folder structure or adjust as needed.my-project/ ├── src/ │ └── _include/ │ └── styles.css │ └── my-epic-css/ │ └── index.scss ├── node_modules/ ├── package.json └── README.md
Import the Epic CSS library:
Add a folder in the
src
folder or your projects main folder and give it a name of your choice likemy-epic-css
. Then createindex.scss
file and add the imports like this:@import "../../node_modules/epic-css/src/index";
or individually like:
@import "../../node_modules/epic-css/src/_variables"; @import "../../node_modules/epic-css/src/_base"; @import "../../node_modules/epic-css/src/_fontramp"; @import "../../node_modules/epic-css/src/_colors"; @import "../../node_modules/epic-css/src/_images"; @import "../../node_modules/epic-css/src/grid"; @import "../../node_modules/epic-css/src/_spacers";
Remove any styles that are not in your project from .css build
Add
epicConfig.js
file to the root of your project where your package.json lives.module.exports = { // project source folder where html, nunjucks or php files are projectDir: './src', // where epic css theme folder lives epicThemeDir: './src/my-epic-css', // folder and file where project style sheet lives projectStyleDir: './src/_includes/style.css' };
Add the following commands as of version 0.3.0
"epic-light": "node ./node_modules/epic-css/src/epic-light.js", "epic-build": "node ./node_modules/epic-css/src/epic-build.js"
Run
npm run epic-build
to do a quick start and add a pre-light.css to your project Epic CSS theme folder.Then run
npm run epic-light
to search your project file from the projectDir and filter the found classes against the pre-light.css and build lightened version of your project styles.css.