In response to a recent tweet we have previously posted some ways that bootstrap grid /…
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.
@ANTETYPE Hello! We need Bootstrap support in Antetype. Will you make it and when?
— Nick (@nmatuhin) April 8, 2013
This post will focus on the scaffolding and a follow up next week will look at the components.
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.
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:
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.
We have put together a small example / template file that can be downloaded to try out grid / column layouts as used in bootstrap:
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 email@example.com.
UPDATE: Don’t miss our new post with Bootstrap Components