Structure

In this section of AxiomCSS, we are primarily concerned with layout utility classes. There is no default styling of standard html tags.

Users of other utility-based CSS classes (e.g. Tailwind) should feel at home, although there are some notable differences.

Firstly, there are currently no media queries here. We are experimenting with the idea of focussing on container queries as the default method of obtaining responsiveness.

Secondly, Axiom CSS is not 'mobile-first'. You can certainly work this way if you wish, and there is nothing wrong with this approach. However, Axiom CSS leans towards a 'wahtever-you-like-first'; allowing us to design and develop on larger screens, working on the (usually) more complex versions of our layouts, and then modify (simplify) using smaller screen overrides.

Grid layout

We lean on the CSS grid system as the primary engine of page layout.

Using utility classes, we have have (loosely) 3 methods of making common layouts:

1. Simple column definitions

Use the .grid class, define columns with .cols-[x] classes, and add gaps with .gap-[x] classes. Modify for smaller container widths using prefix modifiers, e.g. hee we're using sm:cols-1.

In the following example, we have six items, and we define 3 columns as default, then step down to two columns, before ending up at one column for a small container

2. Auto-fit and Auto-fill

Use the grid-cols-auto-fit class.

3. Comprehensive column/row layout

For precise grid layouts, we can define the rows and columns in our grid. Use start/end classes (or span classes) to precisely position child elements in the grid.