Free Axure Starter File with Bootstrap Grids

About four years ago I wrote a post promoting the idea of starting a new Axure project using the 960 grid system. The idea was to use a grid to keep the prototype nice and neat, and also to use a 960 pixel wide work space to ensure the prototype would fit on a typical laptop screen without left and right scrolling. Well, four years is a long time in technology land and so I’m offering an updated point of view here, along with a free Axure starter file.

Now with the ubiquity of higher resolution monitors, and the necessity for websites or apps to work on all types of devices from desktop to laptop computers, tablets to phones, I recommend starting your Axure project with an adaptive template using a Bootstrap grid.

Axure Adaptive Views

Help yourself to this free Axure Bootstrap template download.

The purposes are the same as what proposed four years ago. First, working with a grid keeps your Axure file neatly organized. Second, through the use of Axure’s adaptive views, you ensure that your prototype will fit on any screen. Of course there’s much more to adaptive views than fitting the prototype to various screens for ease of viewing the prototype. The main purpose of that Axure feature is to allow you to explore how the design is modified as it applies to various screen sizes and devices. In that respect it’s often critical to start designing mobile first and working back up to the larger tablet and desktop screen sizes.

The template has guides set for one, two and three equal columns as well as a set of guides for three unequal columns. The guides adjust as the screen sizes on the adaptive views change from Large Display (1140 pixels+), Landscape Tablet (1024 & smaller), Portrait Tablet (768 & smaller) and Portrait Phone (375 and smaller).

When using the template (screenshot of the Axure file below) you can delete some of the Bootstrap grid guides to clean up your workspace if you don’t need them all. The Master pages include a file named “Bootstrap grid 1,2,3 equal & 1 unequal col.” After deciding which grid guides you need for a given project, just delete the others from this master.

The downloadable Axure bootstrap template also includes a free “bonus.” There are a couple starter pages that may be helpful to begin any basic website project – complete with mobile navigation. You’ll need to install the Google Roboto font and adjust your Axure publish settings to use that web font if you post it online. Here’s a demo.

 

 

4 thoughts on “Free Axure Starter File with Bootstrap Grids”

  1. questions for you (thanks for this post)
    – how do i import the master into my files?
    – how do i know the distance between the grid lines using axure w/o manually calculating the distance between 2 purple lines in the grid?
    – is it necessary that every element on the page must begin and end exactly on the grid lines? your buttons on your sample page do not.
    – how do you tell axure to make the page you are working on – as adaptive – will using this grid system be enough to tell that to axure? or did you manually make designs for every breakpoint?

    • 1. To import a master, use “File > Import from RP File”. This would be the best way to copy a master from one .rp file to another, and you can even import whole pages if you wish.
      2. You could read across the rulers or drag a box widget onto the page and size it to the grid, then note width displayed in the top toolbar.
      3. No. The grid indicates the maximum for full column width elements. Other elements that are less than full column width could align left, right or center within the column grid lines.
      4. On the Page Inspector Properties Panel you must check the box that says Adaptive Enabled. You define the page breaks in the Manage Adaptive Views dialog. And yes, I made this all manually. See: https://www.axure.com/support/reference/adaptive-views

  2. Hi John – thanks for this useful file.

    Can you expand on the rationale of the lower 375 breakpoint? Was this set at 320 in the original file 4 years ago?

    Thanks
    Mike G

    • Mike, great question. Yes, the breakpoints have evolved as devices have changed. The 375px breakpoint is based on the current iPhone 6, 7 and 8 screen sizes (see https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/). However, the best way to decide where to make the breakpoints for your project is to determine what devices will be most commonly used to access your site. If you are redesigning an existing site, this can be discovered by looking at the current Google Analytics. If you’re starting from scratch, you may have to do user research to determine the best breakpoints. I hope that helps!
      – John

Leave a Comment

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.