Epic CSS

A simpler utility-first UI library.

Epic CSS is a utility-first CSS framework designed to empower developers by offering a comprehensive set of utility classes for rapid and efficient styling of web projects. Unlike Tailwind CSS, Epic CSS excels in seamlessly integrating with non-JavaScript projects such as 11ty and PHP, providing unparalleled flexibility and ease of use.

With Epic CSS, developers can efficiently create responsive and visually stunning websites without the need for complex JavaScript setups, making it an ideal choice for a wide range of web development projects.

How to initialize a new node.js project

  1. Initialize a new project: Open your terminal or command prompt and navigate to the directory where you want to create your project. Then, run the following commands to create a new directory for your project and initialize it with npm (Node Package Manager):
mkdir my-node-project
cd my-node-project
npm init -y

The npm init -y command will initialize a new npm project with default settings, automatically generating a package.json file.

Quick Start

  1. Install dependencies:
npm install sass
npm install epic-css

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

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

  1. 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/_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/_spacing";

For this folder structure or adjust as needed.

my-project/
    ├── src/
    │   └── my-epic-css/
    │       └── index.scss 
    ├── node_modules/
    ├── package.json
    └── README.md

Epic CSS will soon be shipping with the ability to only build the CSS that is being used in the .html, .njk, .php and more.

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'
};
  1. 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"

  1. Run npm run epic-build to do a quick start and add a pr-styles.css to your project Epic CSS theme folder.

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

epic-css-11ty-theme

A starter 11ty theme (using the v2.0 release) integrated with epic-css that is an utility-first UI library.

Getting Started

Clone from Epic CSS - 11ty Theme GitHub.

  1. Make a project directory and navigate to it if you don't already have one:
mkdir my-blog-name
cd my-blog-name
  1. Clone this Repository and navigate to it.
git clone https://github.com/jeremyfaucher/epic-css-11ty-theme.git
cd epic-css-11ty-theme
  1. Install dependences
npm install
  1. Run Eleventy to start server and follow to 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 browser for fast iterating.

You will see a folder named my-epic-css with and index.scss file where you can customize your Epic CSS integration.

Example usage

<div class="container flex flex-col md-flex-row gap-40 items-center mb-80">
  • Wrapper for side gutters of 5%: wrapper
  • Container for max width: container
  • Push a log to left and nav to right use flex justify-between items-center.
  • Medium screen and up flexbox row: md-flex-row
  • Flex column for mobile first screens below medium: flex-col
  • Padding top 24px: pt-24 or padding top and bottom 24px py-24.
  • Margin bottom 80px: mb-80
  • Gap of 24px: flex gap-24

Known Issues

None at the moment.

Release Notes

0.2.0

Initial release of epic-css

0.3.0

  • Added epic-build - this builds like epic-compile but also adds a pre-light.css to the my-epic-css folder.
  • Added epic-light - this uses the pre-light.css to filter used project class results and builds to project style.css.

Contribution

This extension is open-source, contributions are always welcome!

This project is licensed under the ISC License.