Extend Ionic Grid with SASS
Interesting tips about IONIC
Ionic 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 | |
|---|---|
| .col-10 | 10% |
| .col-20 | 20% |
| .col-25 | 25% |
| .col-33 | 33.3333% |
| .col-50 | 50% |
| .col-67 | 66.6666% |
| .col-75 | 75% |
| .col-80 | 80% |
| .col-90 | 90% |
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 SASS 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.
We would love to hear from you! If you have any feedback or run into issues using our framework, write your comment below.