Every element and component in Leaf is mobile-first, so by default on mobile:

  • columns are stacked vertically.
  • the navbar-menu will be hidden.

However, you can enforce horizontal layout for columns by appending the is-mobile modifier.


There are 5 breakpoints:

  • mobile: up to 768px
  • tablet: from 769px
  • desktop: from 1024px
  • widescreen: from 1216px
  • fullhd: from 1408px

Also, there are 9 responsive mixins:

  • mobile
    until 768px

  • tablet
    from 769px

  • tablet-only
    from 769px and until 1023px

  • touch
    until 1023px

  • desktop
    from 1024px

  • desktop-only
    from 1024px and until 1215px

  • widescreen
    from 1216px

  • widescreen-only
    from 1216px and until 1407px

  • fullhd
    from 1408px


Name Type Value
$container-gap size 32px
$tablet size 769px
$desktop computed 960px + (2 * $container-gap)
$widescreen computed 1152px + (2 * $container-gap)
$fullhd computed 1344px + (2 * $container-gap)