Install zenCSS

Get started with zenCSS — the best framework for building responsive, auto-formatting websites.

Installation

Download zenCSS

Get early access to the beta pre-release here.

Download Now

Click here to skip to the advanced setup if you'd prefer to work with our SASS/JS modules.

File Structure Overview

Familiarize yourself with the core files:

index.html (docs website) 

hello-world.html
                                
dist/ (source files)
     ├── zencss.min.css
     ├── icons.min.css
     ├── zencss.min.js
     ├── /img

     (optional)
     ├── zencss.css
     ├── zencss.css.map
     ├── zencss.min.css.map
     ├── icons.css
     ├── zencss.js
     ├── zencss.js.map
     ├── zencss.min.js.map

docs/
     ├── help-desk
     ├── examples
     ├── images

js/  (optional: if you want to compile your own JS)
     ├── /modules 
     ├── webpack.config.js 

scss/ (optional: if you want to compile your own CSS)
     ├── _user-settings.scss
     ├── /core
     ├── /design
     ├── /general
     ├── /optional
     ├── zen.scss

Starter Template

Our starter template ( hello-world.html) contains a header, hero area, 3 content sections and a footer.

Simply copy/paste the code from our docs, or use the shortcuts to begin experiementing with our components and site sections in this sandbox.

Manual Installation

CSS Linking: Add the minified stylesheets in your HTML's head section.

<link rel="stylesheet" href="path-to/zencss.min.css">
<link rel="stylesheet" href="path-to/icons.min.css">

JavaScript Inclusion: Include the minified script before the closing </body> tag.
```
<script src="path-to/zencss.min.js"></script>
```

Usage

Applying zenCSS

You can integrate zenCSS either globally or selectively:

Globally: To apply zenCSS styles throughout your website, add the zen class to the <body> tag.
```
<body class="zen"> 

</body>
```
Selectively: For specific sections, use the zen class on individual elements. This method allows zenCSS styling without affecting the rest of your website.
```
<section class="zen"> 

</section>
```

Working with our Smart-Align Framework

We suggest using the following structure where you wrap your page content in a container-fluid. This way you can use container or container-fluid interchangably on any section of the page. The page-name class is optional but useful to target specific pages. The page-section class is also optional and sets spacing between sections. The default is 2em at the top and bottom of every page-section. This value is defined in user-settings.scss, overwrite as needed.

Basic Layout Example:

<main class="z-container-fluid page-name">
    <section class="z-container page-section">
        <div class="z-row">
            <div class="z-col"> ... </div>
        </div>
    </section>
</main>

Download User Snippets

Zentax user snippets are predefined code templates within the zenCSS framework that simplify and expedite the creation of common website structures, sections, and components in Visual Studio Code, enhancing developer productivity.

Download User Snippets: Begin by downloading the user snippets here. There are two options, one for just the zenCSS container structure, and another that also contains our site sections and components.
Configure User Snippets: Open VSCode, navigate to settings -> configure user snippets -> html.json (HTML), and paste the JSON content of your choice into this file. Save the changes.
Start Coding: With the user snippets in place, you can now use shorthand commands to generate container structures and various site sections and components with ease.

To generate a container structure as shown below, simply type zcon and press tab. For more extensive sections and components, use the user snippet shorthand labeled Shortcut, shown next to the code example on our site sections and components.

<z-container>
    <z-row>
        <z-col> ... </z-col>
    </z-row>
</z-container>

Customizing zenCSS

It's worth noting any changes you make to our source files may be overwritten in future software updates. To safely customize your settings and ensure they are preserved across updates to the zenCSS framework, follow these steps:

Create an Override File: Create a new file named zencss-overrides.css in a separate directory, such as a custom directory within your project's root.
Set Your Override Classes: Inside zencss-overrides.css, define your custom classes as needed. For example:
```
.bg-primary {
  background: blue;
  color: white;
}
```
Load Overrides File: In your HTML file, add your zencss-overrides.css right after the zencss.min.css fie . Ensure the path to your custom file is correct based on its location. For example:
```
<link rel="stylesheet" href="path-to/zencss.min.css">
<link rel="stylesheet" href="path-to/zencss-overrides.css">
```

Following these steps will allow you to customize the framework to fit your needs while keeping your changes intact through updates.

Working with our SCSS/JS modules

For those who prefer a tailored approach, our SCSS and JS modules allow you to integrate zenCSS into your own asset pipeline. Customize the framework to meet the specific demands of your project. In addition to the compiled and minified files, you'll be working with:

Sass source files for compiling into custom CSS
JavaScript source files for extending and customizing functionality

Go to Advanced Setup

Community

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

Follow @tryzencss on Twitter for the latest updates.