ALF Cols

Columns have a container (.cols) with child-items (.col).

Responsive

The responsive setup is done in the items, with classes w??-web-large, w??-web, w??-tablet and w??-phone.

The question marks are the available percentage widths, which can be: 20, 25, 33, 40, 50, 60, 66, 75, 80, 100.

For a given resolution, if there is a class for that resolution or lower, that width will be used. Otherwise, the item will be 100% wide.

There is no need to use w100-phone.

For phone-small, width will always be 100%.

For example:

<div class="col w20-web-large w25-web w33-tablet w50-phone"></div>

This column would have:

• 20% width for web-large
• 25% width for web
• 33% width for tablet
• 50% width for phone
• 100% width for phone-small

<div class="col w50-tablet"></div>

In this case, this column would have:

• 50% width for tablet or higher
• 100% width for phone and phone-small

Container options

• .no-gap class: can be used in the .cols container to remove all separation between columns.

Examples

50-50 (tablet up)

50-50, .no-gap (tablet up)

Responsive

<div class="col w20-web-large w25-web w33-tablet w50-phone">
<div class="col w20-web-large w25-web w33-tablet w50-phone">
<div class="col w60-web-large w50-web w33-tablet w100-phone">

• web-large: 20/20/60
• web: 25/25/50
• tablet: 33/33/33
• phone: 50/50/100 (the 100 in the third column is assumed, no need for a specific class)
• phone-small: 100/100/100 (this is assumed, no need for a specific class)

Nested columns: 50(66,33) - 50 (tablet up)