Breakpoints

This theme uses a set of responsive breakpoints to ensure that your layouts and utilities adapt to different screen sizes. All of my utility systems (Grid, Display, Flexbox, Sizing, Spacing, and Typography) use these same breakpoints.

How it Works

This theme's utility classes are applied from the specified breakpoint and up, meaning they affect that screen size and all larger ones. For example, a class with a -md- infix will apply to medium screens, large screens, and extra-large screens.

Breakpoint Values

Here are the breakpoints I use throughout my system:

• xs (extra-small): 0px (default, no media query needed)
• sm (small): 576px
• md (medium): 768px
• lg (large): 992px
• xl (extra-large): 1200px
• xxl (extra-extra-large): 1440px

Example Usage

You can use these breakpoints as suffixes to utility classes to create responsive designs.

Item 1

Item 2

Resize your browser to see the changes:

• On extra-small and small screens (<768px): The container is a block element, and the items are stacked vertically.
• On medium screens (≥768px and <992px): The container becomes a flex container, and the items are displayed side-by-side.
• On large and extra-large screens (≥992px and <1440px): The entire container is hidden.
• On extra-extra-large screens (≥1440px): The container will reappear as a block element.

<div class="d-block d-md-flex d-lg-none">
  <div>Item 1</div>
  <div>Item 2</div>
</div>