Working with zenCSS Source Files

Get started with zenCSS, the world’s newest framework for building responsive, auto-formatting websites.

Prerequisites

This guide will help you set up the zenCSS project environment on your system.

To work with these files, we will setup the following tools:

A SASS compiler for turning SASS into CSS.
A JavaScript compiler for compiling our JavaScript modules.
Autoprefixer for handling CSS vendor prefixes to ensure cross-browser compatibility.

We'll also cover how to customize zenCSS with your brand colors/overrides. Follow the instructions below to dive in.

1. Clone the Repository

Clone the zenCSS repository from GitHub:

git clone https://github.com/zen-solutions/zencss.git

Navigate into the cloned directory:

cd zencss

2. Install Node.js

Ensure Node.js (version 12.0.0 or higher) is installed on your system. Download and install from Node.js official website.

3. Install Dependencies

Install all necessary dependencies by running:

npm install

4. Compile SCSS to CSS

Compile SCSS files to CSS using the build-css script:

npm run build-css

This compiles zen.scss into zen.css and zen.min.css, generates map files and runs them through an autoprefixer.

5. JavaScript Compilation with Webpack

Compile JS modules using Webpack:

Run the script with:

npm run build-js

This compiles zencss.js and zencss.min.js and map files.

6. Using Prettier for Code Formatting

To ensure consistent code formatting, use Prettier:

npx prettier --write .

This command formats your code according to the project's Prettier settings.

7. Development and Contributions

For development, refer to the README.md and the Contribution Guidelines. Contributions can be made via pull requests to the GitHub repository, adhering to the contribution guidelines.

Note: The provided instructions assume basic familiarity with Git, Node.js, and npm.

Customizing zenCSS

zenCSS allows for extensive customization in two primary areas. This ensures your settings are preserved across framework updates and gives you control over foundational aspects like colors and initial variables.

Update SCSS Core Config: Override the scss/core/config.scss file to define or override brand colors, universal/black and grey colors, among other settings. For example, to override user settings, modify this line:
```
// -- Optional: Add overrides for user-settings
@import "path-to-your-overrides-folder/user-settings-overrides";
```
Duplicate or update user settings as needed right after this import.
Update zen.css: In zen.css, add overrides as needed for initial variables that are defined earlier in the stylesheet. For instance:
```
// -- Optional: Add overrides for variables above
@import "path-to-your-overrides-folder/zen-variables-overrides";
```

Configure webpack.config.js

When configuring your webpack.config.js, you may consider seting up separate entry points for the zenCSS core modules and your custom modules.

This approach would allow you to keep the original source intact and manage your custom scripts separately. Here's an example configuration:


const path = require('path');

module.exports = {
entry: {
zenCore: ['./js/modules/core-module1.js', './js/modules/core-module2.js'], // Core zenCSS modules
custom: ['./js/custom/custom-module1.js', './js/custom/custom-module2.js'] // Your custom modules
},
output: {
filename: 'zencss.bundle.js', // This will create separate bundles for core and custom modules
path: path.resolve(__dirname, 'dist/'),
},
mode: 'development' // Change to 'production' for minified output
}

By following these steps, you can tailor the framework to meet your specific requirements, ensuring your changes remain intact through any updates.

Community

Stay up to date on the development of zenCSS and reach out to the community...

Follow @tryzencss on Twitter for the latest updates.