Atomizer

Layout

Learn different methods to layout your website.

On this page

Atomizer does not come with an out-of-the-box grid system. Instead, you can use any layout method you want to build your projects layout. It’s up to you to decide which method fits your needs best. Read the sections below to see examples of different layout options.

Float

This styling method was one of the first ways to layout a website without the spacer.gif or table markup hacks. Additionally, Atomizer can make it "direction" agnostic by simply using the Fl() class (e.g., Fl(start) or Fl(end)).

<div class="Cf">
   <div class="Fl(start)">Box 1</div>
   <div class="Fl(start)">Box 2</div>
</div>
Box 1
Box 2

In this example, the class Cf (for "clearfix") is used to contain the floats, but there is also a Row helper class to better deal with floats across browsers.

Table

This styling was a step in up from the float method, but avoids float issues. Table layouts are also direction-friendly (boxes are displayed according to ltr / rtl contexts).

In this example, the display classes D(tb) and D(tbc) are used, along with vertical-align and text-align classes Va(m) and Ta(c):

<div class="D(tb) Ta(c)" role="presentation">
    <div class="D(tbc) Va(m)">Box Number 1</div>
    <div class="D(tbc) Va(m)">Box Number 2</div>
    <div class="D(tbc) Va(m)">Box Number 3</div>
    <div class="D(tbc) Va(m)">Box Number 4</div>
</div>

This example shows the same table with dir="rtl":

<div class="D(tb)" dir="rtl" role="presentation">
    <div class="D(tbc)">Box <br />Number <br />1</div>
    <div class="D(tbc)">Box Number 2</div>
    <div class="D(tbc)">Box Number 3</div>
    <div class="D(tbc)">Box Number 4</div>
</div>

You can also use table-header-group and/or table-footer-group to swap boxes vertically without changing the markup order:

<div class="D(tb)" role="presentation">
    <div class="D(tbfg)">Box Number 1</div>
    <div class="D(tbc)">Box Number 2</div>
    <div class="D(tbhg)">Box Number 3</div>
</div>

Flexbox

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.

<div class="D(f) Jc(sb)">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 3</div>
</div>
Box 1
Box 2
Box 3
Box 3

Grids

NOTE: Due to the complex nature of CSS Grid, some of these properties can only use custom variables.

Use D(g) for display: grid or D(ig) for display: inline-grid on the chosen node, you can then specify any required additional grid classes.

For alignment of child elements please see the Alignment guide.

grid-area

The grid-area property is a shorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end. Based on the complexity of value configuration, its best to use custom variables for style declarations. Additionally, you can also use substitution tokens like in the examples below.

The following example shows Ga(colMain) -> grid-area: 'main'.

// atomizer.config.js
module.exports = {
    custom: {
        colAside: 'aside',
        colMain: 'main',
        twoColNamedGrid: '[#{colMain}-start] repeat(9,minmax(0,1fr)) [#{colMain}-end #{colAside}-start] repeat(3,minmax(0,1fr)) [#{colAside}-end]',
    }
};

<div class="D(g) Gtc(twoColNamedGrid)">
    <div class="Ga(colMain)">1</div>
    <div class="Ga(colAside)">2</div>
</div>
1
2

grid-auto-columns & grid-auto-rows

The grid-auto-columns and grid-auto-rows properties specify the size of tracks not assigned a size by grid-template-rows or grid-template-columns. You can use keywords, single values or custom variables.

The following example shows Gar(150px) -> grid-auto-rows: 150px.

<div class="D(g) Gar(150px)">
    <div>1</div>
    <div>2</div>
    ...
</div>
1
2
3
4
5
6

grid-auto-flow

Grid items that aren’t explicitly placed are automatically placed into an unoccupied space in the grid container by the auto-placement algorithm. grid-auto-flow controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

The following example shows Gaf(rd) -> grid-auto-flow: row dense.

<div class="D(g) Gaf(rd)">
    <div>1</div>
    <div class="Gc(twoCol)">2</div>
    ...
</div>
1
2
3
4
5
6

grid-column & grid-row

The grid-row and grid-column properties are shorthands for grid-row-start/grid-row-end and grid-column-start/grid-column-end, respectively. Uses values and variables.

The following example shows Gr(twoCol) -> grid-row: 1 / span 2.

// atomizer.config.js
module.exports = {
    custom: {
        twoCol: '1 / span 2'
    }
};

<div class="D(g)">
    <div class="Gr(twoCol)">1</div>
    <div class="Gc(twoCol) Gr(4)">2</div>
    <div>3</div>
    <div class="Gr(twoCol)">4</div>
    <div class="Gc(twoCol)">4</div>
    <div class="Gc(2)">6</div>
</div>
1
2
3
4
5
6

grid-column-start & grid-column-end

The grid-column-start and grid-column-end properties determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement. Thereby specifying the inline-start, block-start, inline-end, and block-end edges of its grid area.

The following example shows Gcs(spanTwo) -> grid-column-start: span 2.

// atomizer.config.js
module.exports = {
    custom: {
        spanTwo: 'span 2',
    }
};

<div class="D(g)">
    <div class="Gcs(2)">1</div>
    <div class="Gcs(spanTwo)">2</div>
    ...
    <div class="Gce(4)">4</div>
    ...
</div>
1
2
3
4
5
6

grid-row-start & grid-row-end

The grid-row-start and grid-row-end properties determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start, block-start, inline-end, and block-end edges of its grid area.

The following example shows Gre(1) -> grid-row-end: 1.

<div class="D(g)">
    <div class="Grs(2)">1</div>
    <div class="Grs(spanTwo)">2</div>
    ...
    <div class="Gre(1)">4</div>
    ...
</div>
1
2
3
4
5
6

grid-template

The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas. This property specifies named grid areas, which are not associated with any particular grid item, but can be referenced from the grid-placement properties.

The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand.

Since this property has numerous complex possibilities, we only allow using custom variables which can be configured using a template literal.

The following example shows Gt(gridABCUnit) ->

grid-template: "a a a" 40px
               "b c c" 40px
               "b c c" 40px / 1fr 1fr 1fr;

// atomizer.config.js
module.exports = {
    custom: {
        gridContent: 'c',
        gridHeader: 'a',
        gridNav: 'b',
        gridABCUnit: `"a a a" 40px
                    "b c c" 40px
                    "b c c" 40px / 1fr 1fr 1fr;`,
    }
};

<div class="D(g) Gt(gridABCUnit)">
    <div class="Ga(gridHeader)">1</div>
    <div class="Ga(gridNav)">2</div>
    <div class="Ga(gridContent)">3</div>
</div>
1
2
3

grid-template-areas

This property specifies named grid areas, which are not associated with any particular grid item, but can be referenced from the grid-placement properties. The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand.

Since this property has numerous complex possibilities, we only allow using custom variables which can be configured using a template literal.

The following example shows Gta(gridABC) ->

grid-template: "a a a" 40px
               "b c c" 40px
               "b c c" 40px;

// atomizer.config.js
module.exports = {
    custom: {
        gridContent: 'c',
        gridHeader: 'a',
        gridNav: 'b',
        gridABC: `"a a a"
                "b c c"
                "b c c"`,
    }
};

<div class="D(g) Gta(gridABC)">
    <div class="Ga(gridHeader)">1</div>
    <div class="Ga(gridNav)">2</div>
    <div class="Ga(gridContent)">3</div>
</div>
1
2
3

grid-template-columns & grid-template-rows

These properties specify, as a space-separated track list, the line names and track sizing functions of the grid. The grid-template-columns property specifies the track list for the grid’s columns, while grid-template-rows specifies the track list for the grid’s rows.

Since these properties have numerous complex possibilities, we only allow using custom variables.

The following example shows Gtc(threeColEvenGrid) -> grid-template-columns: repeat(3, minmax(20px, 1fr)).

// atomizer.config.js
module.exports = {
    custom: {
        threeColEvenGrid: 'repeat(3, minmax(20px, 1fr))',
        rowOneFixed: '[col1] 100px [col1-end] repeat(auto-fit, [line3] 400px)'
    }
};

<div class="D(g) Gtc(threeColEvenGrid) Gtr(rowOneFixed)">
    <div>1</div>
    <div>2</div>
    ...
</div>
1
2
3
4
5
6