Smart-Align Framework

Dive into a world where shape and form align, and everything magically falls into place.

Overview

The zenCSS Smart-Align System uses a custom Flexbox grid system to provide you with an advanced, responsive layout solution for your web apps. Like most modern CSS frameworks' grid systems, it is composed of three main components:

Containers

The container is the outermost layer of the grid system and serves as a nestable, responsive wrapper. Containers are the basis for your layout.

Rows

Inside the container, you can add one or more rows , which will in turn house the columns like these ones right here.

Columns

Columns are placed inside rows and they can be customized to display differently on different screen sizes, make use of fluid layouts, use features and change ordering.

Experience Smart-Align

By default, in each row the Smart-Align System places four columns on desktop, two on tablet and one on mobile. You can modify this behavior, but the system is dynamic and will adjust to any amount of columns. Add or remove some columns using the buttons below, and watch as the content reflows automatically.

column 1

column 2

column 3

column 4

You may use "x-up" prefix to specify modifier classes that change the default alignment (where x is a number from two through eight). here we add the class eight-up to the row. We also target mobile with the .mobile:two-up class so devices smaller than tablet will display columns side by side.

With 2/3 items in a row, you can "feature" them to take up more space in your design. You can also use -sm, -md, and -lg for extra emphasis.

col

feature-lg

feature-md

col

feature-xl

col

feature-lg

col

feature-md

col

feature-sm

col

feature

col

feature

col

feature-sm

col

feature-md

col

feature-lg

HTML

<div class="z-container">
  <div class="z-row">
    <div class="z-col">
    ...
    </div>
  </div>
</div>

Zentax

What is zentax?

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