Build Awesome Desktop Apps with Ionic’s NEW Responsive Grid

We’ve been hard at work at Ionic improving our support for desktop applications, one of our most requested features. The central piece of Ionic’s desktop support is an all-new responsive grid system that makes it easy to build UI that scales up from mobile through tablet and desktop displays.

The new grid is a powerful, mobile-first flexbox grid system composed of three units – a grid, row(s) and column(s). Columns will expand to fill their row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns and breakpoints can be fully customized using Sass.

Let’s dive into the new grid system!

What’s new?

• Attributes for grid, row, and column are now supported in addition to using them as an element. Use the <ion-grid>, <ion-row> and <ion-col> elements or add them to any element (e.g., <div ion-row> or <p ion-col>).
• New and changed attributes for rows:
  • Rows will wrap by default, but adding the nowrap attribute will prevent wrapping.
  • Reverse wrap the row by adding the wrap-reverse attribute.
  • Attributes to vertically align all columns for a row have been changed to align-items-*.
  • Attributes to horizontally align all columns for a row have been added as justify-content-*.
• Attributes for columns to align a column vertically have been changed to align-self-*.
• Media query support for any number of breakpoints which can be customized via Sass. Defaults to: all breakpoints (xs), sm, md, lg, and xl.
• Each column can be set to take up a specific number of columns out of the total number of columns, no longer by a predefined percentage.
• New variable width columns that take up the width of their content by adding the col-{breakpoint}-auto attributes, where {breakpoint} can be omitted in order to affect all breakpoints or specified to use one of the predefined breakpoints.
• Added pull and push modifiers to change the order of the columns.
• Responsive row attributes have been deprecated, but the same can be achieved using the new attributes.
• Set the grid to a fixed size based on screen size by adding the fixed attribute.

Getting started

To use the new grid, simply update to the latest version of Ionic by running the following command:

npm install --save --save-exact ionic-angular@2.1.0

If you’ve never used the grid before, head on over to the Grid API documentation for usage information. If you have already been using the grid, read the next section for steps to convert to the new grid.

Converting to the new grid

While the old grid attributes are still supported for now, we will be removing them in a future release. We strongly recommend updating now to avoid any surprises down the road. Here are some steps that should get you updated to the latest and greatest:

1. Columns will automatically size to take up equal width inside of a row unless specified. If you are setting the width explicitly using width-* attributes, you should now set the the size by specifying how many columns out of the total columns it should take up. The number of total columns defaults to 12 for the new grid system. To change this, change the value of the following Sass variable from 12 to your number of desired columns:

   $grid-columns:         12;
   

   All examples in this post will be based on a 12 column grid.

2. All instances of width-* attributes will need to be changed to use col-*. So for example, if you have the following:

   <ion-col width-50>col</ion-col>
   

   it should be changed to take up 50% of the available columns, so 6 columns:

   <ion-col col-6>col</ion-col>
   

3. The offset-* attributes still start with offset-*, but the number value that follows should still change from a percentage to the number of available columns. Here’s an example using offset-25:

   <ion-col offset-25>col</ion-col>
   

   it should be changed to offset by 25% of the available columns, so 3 columns:

   <ion-col offset-3>col</ion-col>
   

4. Responsive row attributes have been removed. In order to achieve the old way of using the responsive-* attributes:

   <ion-row responsive-sm>
     <ion-col>col</ion-col>
     <ion-col>col</ion-col>
     <ion-col>col</ion-col>
   </ion-row>
   

   it should become:

   <ion-row>
     <ion-col col-12 col-sm>col</ion-col>
     <ion-col col-12 col-sm>col</ion-col>
     <ion-col col-12 col-sm>col</ion-col>
   </ion-row>
   

   This tells it to take up 12 columns up to the small breakpoint and then change to equal width columns.

5. If you were using any of the vertical alignment attributes on rows such as top, center, bottom, etc. they will need to be changed to the new attributes for alignment. For example:

   <ion-row top>
     <ion-col>col</ion-col>
     <ion-col>col</ion-col>
     <ion-col>col</ion-col>
   </ion-row>
   

   it should become:

   <ion-row align-items-start>
     <ion-col>col</ion-col>
     <ion-col>col</ion-col>
     <ion-col>col</ion-col>
   </ion-row>
   

6. Similar to the row, the horizontal attributes for columns will need to be changed to the new attributes for alignment. For example:

   <ion-row>
     <ion-col top>col</ion-col>
     <ion-col center>col</ion-col>
     <ion-col bottom>col</ion-col>
   </ion-row>
   

   it should become:

   <ion-row>
     <ion-col align-self-start>col</ion-col>
     <ion-col align-self-center>col</ion-col>
     <ion-col align-self-end>col</ion-col>
   </ion-row>
   

What’s next?

While a new grid system is great, our support for desktop doesn’t end here! We will be continuously making improvements to features that extend the power and extensibility of the framework. In addition to more responsive features, we plan on improving our support for accessibility, electron, windows, and more. Our next major feature will be split pane support, an often requested component that is shaping up to be amazing! Also, up next we’ll be making our showWhen and hideWhen components more powerful than ever. We can’t wait for you to get your hands on these features and add them to your apps.

Thank you

We want to sincerely thank you for your feedback and patience as we work towards better desktop support. We want you to know that we hear you, and know how important these features are to you. <3