Grid layouts & bootstrap

UPDATE: Antetype 1.3 now includes templates for Bootstrap layouts and widgets – Bootstrap 3 widgets and examples are available in our community.

Following a tweet last week about bootstrap I have done a little investigation into the various aspects of bootstrap and how we could support bootstrap better.

After some quick analysis it seems there are two major aspects of bootstrap that it would  be useful to have in Antetype: the scaffolding and the components.

This post will focus on the scaffolding and a follow up next week will look at the components.

Bootstrap scaffolding

The scaffolding is a responsive grid for building layouts. Grid based layouts have not previously been supported in Antetype because they generally clash with our aim to be able to resize and relayout screens based on rules.

After some experimentation with the property binding features added in 1 .2.0 we are now able to offer a responsive grid template, based on columns.

layout-12-grid

The template is based on a 12 column grid. As can be seen from the image above using this grid we have columns that are 2,3,4,5 or 6 columns wide, those rows that have evenly spaced column groupings could easily be achieved prior to Antetype 1.2, but with Antetype 1.2 it is now possible to use property binding to make rows that have more complex structure such as 2,3,5,2 etc.

The design can then be stretched horizontally in both directions to keep the correct ratios:

layout-12-grid-narrow  layout-12-grid-wide

To use this in the real world some of the reference rows that are needed to get data binding to work would have to be hidden or collapsed.

Fluidity and flow

Although Antetype can now support a grid based layout it is not currently possible for us to fluidly move to a single column per row as the bootstrap grid does at small widths, but this is something will tackle in the future.

Antetype can however have percentage based layouts that resize matching those in the Bootstrap scaffolding documentation, click on the images below to see examples.

NestingFluid Layout 1 Fluid Layout 2

We have put together a small example / template file that can be downloaded to try out grid / column layouts as used in bootstrap:

Download bootstrap scaffolding example file

Is this of use to you? Would you like more examples related to bootstrap or grids or column based layouts? Tell us in the comments or contact us directly at support@antetype.com.

UPDATE: Don’t miss our new post with Bootstrap Components

4 Responses to Grid layouts & bootstrap

Leave a Reply