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;

Example

In this example, the padding, font size and button width all change at the sm (768px) breakpoint. Resize the browser window 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--full sm:ch-width--auto">CTA Label</button>
</div>