Breakpoints

Chassis uses a mobile-first design system. You'll set the base style for mobile, then use modifier classes to change the layout or styling for larger screen sizes.

$xs: 390px
$sl: 576px
$sm: 768px
$md: 992px
$lg: 1200px

Examples

In this example, padding, font size and button width all change at the $sm breakpoint (resize the browser width to see this in action):

Example heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

<div class="ch-measure ch-rounded--lg ch-bg--grey-2 ch-pa--3 sm:ch-pa--6">
  <h2>Example heading</h2>
  <p class="ch-fs--3 sm:ch-fs--4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
  <button class="ch-btn ch-width--12 sm:ch-width--auto">CTA Label</button>
</div>