Install zenCSS

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

Installation

Download zenCSS

Get the latest 2.0.2-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 (main website)
                
dist/ (source files)
     ├── zencss.min.css
     ├── icons.min.css
     ├── zencss.min.js
     ├── /hello-world (start here)

     (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
         
dist/img/
     ├── [various 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 at dist/hello-world contains the configuration below, and starts you off with a header, hero area, 3 content sections and a footer.

Copy any of the examples from the docs/examples folder to the dist/hello-world folder to begin experiementing with them 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>

Zentax Shorthand Syntax: Use our streamlined syntax for quicker coding. A shortcut user snippet file and a converter for semantic HTML are available.

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

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.