Smart-Align Framework

Enter the realm of Smart-Align, where shape and form seamlessly unite, creating a harmonious web layout experience.

Overview

Smart-Align, a feature of zenCSS, leverages a custom Flexbox grid layout, offering a sophisticated and adaptable framework for your websites and applications. It comprises three integral elements:

Containers

These are the foundational blocks of the Smart-Align grid. They act as responsive, nestable shells that form the backbone of your layout.

Rows

Within containers, rows are the structural units that host columns. They play a pivotal role in organizing and aligning your content.

Columns

Nested inside rows, columns are the dynamic elements of this system. They offer versatility in display across different devices, embracing fluidity, feature-rich layouts, and often marrying form and function.

Smart-Align in Action

Smart-Align is intuitively designed to cater to various devices. The default setting places four columns on a desktop view, two on a tablet, and one on mobile. This fluid system allows for customization, adapting seamlessly to any column configuration. Experiment with adding or removing columns and observe the auto-reflow of content.

column 1 column 2 column 3 column 4

Advanced Customization

Use container-fluid for a full width layout. Containers can be nested inside a fluid container.

Use the "x-up" prefix in modifier classes for altering default alignments, with 'x' ranging from two to eight. For instance, applying 'eight-up' to a row changes its structure. The .mobile:two-up class is specifically for mobile devices, enabling a two-column view on smaller screens.

1 2 3 4 5 6 7 8

For rows with 2 or 3 columns, the "feature" option allows columns to occupy more space, making them stand out. Additional size modifiers like -sm, -md,, -lg and -xl offer further emphasis options.

 col col feature-lg feature-md col feature-xl col feature-lg col feature-md col feature-sm col feature col col col col feature col feature-sm col feature-md col feature-lg

Code Examples

Here, we'll provide detailed examples of semantic HTML and zenCSS's unique syntax, demonstrating the practical implementation of the Smart-Align System.

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>