Epic CSS - 11ty Theme

The Epic CSS 11ty theme is a high performance starter blog theme. It uses the Epic CSS utility-first UI library making it light weight and easy to manage.

Epic CSS 11ty theme demo site.

Features

Out of the box it scores all 100's on the Lighthouse - performance, accessibility, best practices and SEO. You can also see the day to day testing over at speedlify:eleventy-starters leader board.
Ready to go blog loop with SEO friendly URLs and an all in one place to manage title's and description's for SEO.
Fully responsive using CSS Grid and Flexbox.
Integrated with the Epic CSS Sass utility first UI library, making it easy to scale, change layouts and colors.

Download/clone Epic CSS 11ty theme from Github by follow the below instructions.

Clone and run the Epic CSS 11ty theme

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 start command will fire up eleventy --serve and 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-css with and index.scss file in src folder, where you can customize your Epic CSS integration.

Build a light version of your CSS

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
    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'
};

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-build to update the pre-light.css file to your project, that the epic-light command can use to compare to your project file results.
Then run npm run epic-light to search your project files from the projectDir and 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.