Mobile First

Gridle is the perfect fit for your mobile first projects. Here how you can start :

Setting up the grid

For mobile first, you have to set the different states for your grid like so

@include g-register-state(mobile, (
    min-width : 320px
@include g-register-state(tablet, (
    min-width : 640px
@include g-register-state(desktop, (
    min-width : 992px
@include g-register-state(large, (
    min-width : 1200px

You can use the mixin g-register-mobile-first-states() that will make this part for you. You will also have these two mixins available:

  • g-register-bootstrap3-states()
  • g-register-bootstrap4-states()

Grid items

Then, you have to tell your grid items to take the full width on small state (if you need so). This is only if you don't want to write each time grid-xs-12 in your html (if your number of columns are 12).

[class*="gr-"] {
    @include g-state(xs) {
        @include g-grid( 12 );

And your good to go!