Epic CSS

Follow the instruction below to add to any project using node.js and the epic-css node.js package.

Or use with the pre-integrated Epic CSS 11ty theme by cloning from Github.

NPM custom install

  1. Install dependencies:

    npm install sass
    npm install epic-css
    

    This will install Sass and Epic CSS in your package.json file as dependencies.

  2. 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
    
  3. 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 like my-epic-css. Then create index.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

  1. 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'
    };
    
  2. 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"
    
  3. Run npm run epic-build to do a quick start and add a pre-light.css to your project Epic CSS theme folder.

  4. 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.