Extend Ionic 1 Grid with SCSS

Ionic 1 is an open source mobile app development framework, licensed under MIT, for developing native and progressive web apps with ease. It is actually a great way to bridge the gap between AngularJS web apps and hybrid mobile apps!

Ionic’s grid system is different than most, because of its use of the CSS Flexible Box Layout Module standard. The advantage is that the devices that Ionic supports, all support flexbox. There’s no restriction to a 12 column grid, or having to explicitly state how large each column should be.

Explicit Column Percentage Classnames:

But you cannot have one column to be 30% and the other 70% in a row. You have to use the above percentages.

If you use Ionic with the SCSS version (CSS with superpowers) you can extend the above classes with this code:

// Extend ionic sass grid
@for $i from 1 through 100 {
    .col-#{$i} {
        @include flex(0, 0, percentage($i)/100);
        max-width: percentage($i)/100;
    }
}

But you may need to extend the column offset too, with the following code:

// Extend ionic sass grid offset
@for $i from 1 through 100 {
    .col-offset-#{$i} {
        margin-left: percentage($i)/100;
    }
}

You may download the above code from here.

Originally published at blog.sieben.gr.