The Optimum Mix of Power and Simplicity

Agility Easy Responsive Columns

Easy and Responsive

The goal of the Agility Easy Responsive Columns system is to be both easy and responsive.  In fact that’s the whole goal of Agility 3 – making the process of creating a responsive site simpler and quicker.

One box – many configurations

The Agility 2.1 responsive layout system is STILL state of the art.  No other skin offers a layout system that can be used to rapidly create custom RESPONSIVE layouts.

However the Agility 3 Easy Responsive Columns system is far and a way simpler to use.  Before Agility 3 if you wanted to create a 2 column section you would need to create:

  • An area wrapper: HTML Container
  • An area page wrapper: HTML Container
  • A columns wrapper: Agility Responsive Columns Wrapper
  • 2 columns: Agility Responsive Columns

That’s 5 boxes you had to create, label and give class names to.  Today, it’s just one box.

Just drag it into the template and configure

The responsive columns system has 11 different column configurations to choose from:

  1. Single – full width column
  2. 2 columns – equally sized
  3. 2 columns – 3/4 + 1/4
  4. 2 columns – 1/4 + 3/4
  5. 2 columns – 2/3 + 1/3
  6. 2 columns – 1/3+ 2/3
  7. 3 columns equally sized
  8. 3 columns – 1/4 + 1/4 + 1/2
  9. 3 columns – 1/4 + 1/2 + 1/4
  10. 3 columns – 1/2 + 1/4 + 1/4
  11. 4 columns equally sized

And if that’s not enough for you – you can add more columns by using the Responsive Sub Columns box inside of any of the columns.

 

Easy Responsive Columns

It does double duty

You can check the box to add an area wrapper and the system will set up a full width section that contains the columns.  However, you can also simply drop it into an existing full width section to add multiple column configurations within the section.

Full control over padding

Many of the modern websites these days employ a “frameless” or “edge-to-edge” design where the backgrounds extend all the way to the edge of the next column.  If that is your desire then Agility has you covered.

Simply check the appropriate boxes and the default padding will be removed!

5-26-2015 2-42-01 PM

Plus some bells and whistles

For those really hoopy sections of your site you can remove the page wrapper altogether (say for a full screen slider) and add an overlay element that you can use to apply a semi transparent color or patterned background.

Responsive Subcolumns Section

For added flexibility within the columns you can add sections of subcolumns which work just like the responsive column system.  There are endless possibilities for laying out complex sites!