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