Template
Page updated:
Single Column
A single column is still a flex-box
ax-cards
The basic building block
Most pages use an ax-card to display content. The class ax-card has padding on all four sides and a box shadow. However, they have no specific colour. This needs to be added using one of the many ax-theme classes, otherwise they use the page background colour which on this site the lightest in the theme. It also means that the seagull at the bottom of the page will always be visible.
The card has an ax-titleBar at the top which allows multiple elements to display on the same line as they are also Flexboxes. However, ax-titleBars do not wrap so puting too much content will overspill the right edge.
ax-containers
A card with no shadow
This is the second child of the parent 'ax-column1' element. It is automatically gapped below its sibling. Its content aligns
with its siblings. Cards and containers in an ax-column1 element will always be 100% wide.
All the panels on this page use ax-theme8
Cards and containers are normally used within a 'column' structure of which there can be between 1 and 6. The structure used to create these is a 'flex-box'. Flex boxes automatically wrap their content based either on the content of the box or on minimum- and maximum-widths. This ensures that their content can be displayed on all devices
The panels below are provided to enable you to see and use the flexibility that has been built into the Alternative Website (and Interface). Multiple column layouts also have the tools to force panels to be double, triple or even quadruple widths if required.
Two Column Layout - flexible
class - 'ax-column2'
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Two column layout - fixed
class - 'ax-column2 ax-fixedwidth'
Title
Fixed width
Content
Title
Fixed width
Content
Title
Fixed width
Content
Three Column Layouts - flexible
class - 'ax-column3'
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Three Column Layouts - fixed
class - 'ax-column3 ax-fixedwidth'
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
class - ax-growX2
Content
Four Column Layouts - flexible
class - 'ax-column4'
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Four Column Layouts - fixed
class - 'ax-column4 ax-fixedwidth'
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
class - ax-growX3
Content
Five Column Layouts - flexible
class - 'ax-column5'
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Five Column Layouts - fixed
class - 'ax-column5 ax-fixedwidth'
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
Tagline
Content
Title
class - ax-growX2
Content
Title
class - ax-growX3
Content
Title
Tagline
Content
Title
class - ax-growX4
Content
Title
class - 'ax-growX2'
Content
Title
Tagline
Content
Title
class - ax-growX2
Content
Gradients
Four gradients are provided - shown right. These can be modified by editing the apropriate theme file.
class
ax-gradient-up
class
ax-gradient-down
class
ax-gradient-left
class
ax-gradient-right
Rows of data
When displaying rows of data it is convenient to enable hover features to highlight individual rows. this can be achived by using the class 'ax-dataBar' for each row of data as shown in the card on the right
Hover highlights
ax-theme2
data
ax-theme2
data
Normal text. The above 'ax-dataBar' lines show how data rows are highlighred.