More documentation at Epic CSS.
-
Make a project directory and navigate to it if you don't already have one.
mkdir my-blog-name cd my-blog-project -
From your new directory folder clone the Epic CSS 11ty Theme from GitHub.
git clone https://github.com/jeremyfaucher/epic-css-11ty-theme.git cd epic-css-11ty-theme -
Install dependencies
npm install
-
Run Eleventy to start the server and follow to the localhost URL http://localhost:8080/.
npm run start
The
npm run startcommand will fire upeleventy --serveand watch for any changes to your files. Changes will be auto updated in the browser for fast iterating.You will see a folder named
my-epic-csswith and index.scss file insrcfolder, where you can customize your Epic CSS integration.
In your Epic CSS 11ty theme project root folder, you will see the epicConfig.js file. This is to configure a light build and will correspond with the Epic CSS 11ty theme folder structure.
module.exports = {
// Project source folder where HTML, Nunjucks, or PHP files are located from root
projectDir: './src',
// Where your epic CSS theme lives from root
epicThemeDir: './src/my-epic-css',
// The directory where your CSS file will be saved
projectStyleDir: './src/_includes',
// The name of the final CSS file
outputFileName: 'style.css'
};In the package.json file you will see the epic-build and epic-light commands. These are to update the pre-light.css file, and output a light version of the style.css file.
"epic-build": "node ./node_modules/epic-css/src/epic-build.js",
"epic-light": "node ./node_modules/epic-css/src/epic-light.js"-
Run
npm run epic-buildto update the pre-light.css file to your project, that theepic-lightcommand can use to compare to your project file results. -
Then run
npm run epic-lightto search your project files from theprojectDirand filter out the found classes against pre-light.css class, then build a lightened version of your project style.css.
This will take the current Epic CSS UI library from 1426 lines of CSS down to only 303 lines of CSS for the Epic CSS 11ty theme. This gives you access to all the UI library styles during development and publishing only the styles you use in your project for production.