# Responsiveness

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.

# Breakpoints

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

# Variables