Sub page

The story of building a layout in Starter Kit starts with a grid that enables the Responsive Web Design. The platform is shipped with three built in grids: 960 Grid System with 12 and 16 columns and the Bootstrap Grid, but still allows you to implement your custom grids out of it. You may not believe it, until you try it yourself, how easy it is to compose a layout in Starter Kit.

Let's get started

You create a new page in Starter Kit and... bam, it looks like this one on the left. There is nothing in there except for three placeholders: header, main and footer. How can you build layout of your dreams from here? 

Keep reading below.

Split and conquer

Step 1

If you want to add the parsys for each editable section you should start your design session with inserting components. Drag & drop Paragraph and a new authorable parsys will be available on the related pages. 

Step 2

Once the first layer of rows is in place, it's time to insert some columns. The story begins with editing the Paragraph. Just open the dialog, switch to Layout tab and provide expected width. Click Ok to save and voila! The placeholder covers expected number of columns

Step 3

Don't stop there yet. Keep adding and configuring Paragraphs, until you get your desired layout.

The Layout configuration might seem mystery for you. But don't worry! In the chapter below you will learn what all the numbers mean in this context.

Do you want more?

Simply keep adding new Paragraphs until you reach desired number of editable areas. Should you ever want to get rid of some parsys just simply right click to open the context menu and select the Delete option.

Grid makes you organized

Zen Garden is based on a grid layout which means we divide the page to equal columns which constitutes a grid. By using grid system we achieve visual consistency as the elements are always vertically aligned to one of the columns. It also simplifies usage of boxes, because column width is always a multiplication of single grid columns.

The platform is shipped with 12 and 16 column grids that are 960 pixels wide. Now you know why there are the number from 1 to 12/16 in the toolbars. Should you need either finer column granularity or different page width, you can always generate a 960 variant with the Grid Generator or implement your custom one.

The bootstrap grid is slightly different and not so obvious at the beginning but it proves his power once mastered. For more details see the page based on this grid.

Let's have a look at different column configurations:

One 

Eleven columns

Two columns

Ten columns

Three columns

Nine columns

Four columns

Eight columns

Five columns

Seven columns

Six columns

Six columns

Go responsive, support mobile

We've just said that Starter Kit is using column fixed grid, but this is not the whole truth. It actually applies principles of Responsive Web Design (RWD) in order to support a wide range of devices with different screen resolutions. Fluid grid applied here is proportional and columns are sized in relative percentages rather than absolute pixels. Breakpoints are another mechanism used by vanilla Starter Kit. Once you reach certain width, columns start falling to next rows, and eventually everything ends in a single column.

What does this mean for you? Start by designing with desktop devices and work as if you were working with columns fixed grid. The layout you create will handle mobile devices out of the box, sometimes with some help from a couple of additional lines of CSS code. But in case you want to provide a totally different experience to your mobile users, go ahead, switch to mobile device in AEM and design a brand new Starter Kit layout.

Enough reading

Try moving mobile for this page and watch the grid above carefully. See how they are breaking into one column grid for narrower devices

Check me on mobile

Now it's time for you to experience the responsiveness! This page is a perfect example to starts with. If you don't have any mobile device around, just grab the edge of your browser and narrow it down to see what happens.

For those who don't like experimenting we have this captured. The four columns right above this section, will be rendered on mobile devices as shown on the right.