Responsive

Responsive Suffixes

Our grid classes, utility classes and typography are built in a way that give flexibility across breakpoints. To change things at different breakpoints, we have 5 suffixes to add to your classes: -xs, -sm, -md, -lg, and -xl.

To see this in action, resize your browser and pay attention to how this grid layout changes.

.col-100-xs .col-50-md .col-25-lg

<div class="col-container">
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
</div>

Breakpoints

Everything in Leap is built with a mobile first approach. This means that if you want the same style across all breakpoints you'd use the -xs suffix. Here's a rundown of which breakpoint applies to which suffix.

Suffixes	Breakpoint
`-xs`	`@media screen`
`-sm`	`@media (min-width: 480px)`
`-md`	`@media (min-width: 680px)`
`-lg`	`@media (min-width: 960px)`
`-xl`	`@media (min-width: 1140px)`

What can be suffixed?

We apply suffixes to a lot of classes within Leap, but not so many that we end up creating a bunch of wasted code. We decided that this list of utilities, text and grid classes gave us the most flexibility without going overboard.

Element	Class Names
Text Sizing	`.text-[n]-xs`
Text Alignment	`.text-left-xs`, `.text-right-xs`, `.text-center-xs`, `.text-justify-xs`
Display	`.hide-xs`, `.block-xs`, `.inline-xs`, `.inline-block-xs`
Floats	`.float-l-xs`, `.float-r-xs`, `.float-none-xs`
Overflow	`.overflow-hidden-xs`, `.overflow-scroll-xs`, `.overflow-auto-xs`, `.overflow-visible-xs`
Margin	`.m-[n]-xs`, `.m-t-[n]-xs`, `.m-b-[n]-xs`, `.m-l-[n]-xs`, `.m-r-[n]-xs`
Padding	`.p-[n]-xs`, `.p-t-[n]-xs`, `.p-b-[n]-xs`, `.p-l-[n]-xs`, `.p-r-[n]-xs`
Position	`.relative-xs`, `.absolute-xs`, `.fixed-xs`, `.static-xs`
Position Spacing	`.pos-[n]-xs`, `.pos-t-[n]-xs`, `.pos-b-[n]-xs`, `.pos-l-[n]-xs`, `.pos-r-[n]-xs`
Z-Index	`.z-[n]-xs`
Borders	`.border-xs`, `.border-[shade]-xs`, `.border-[side]-xs`, `.border-[side]-[shade]-xs`
Buttons	`.button--[size]-xs`
Grid	`.col-[n]-xs`
Grid Offsets	`.col-offset-[n]-xs`
Block Grid	`.block-[n]-xs`
Flex Box	`.flex-xs`
Width and Height	`.w-full-xs`, `.w-fit-xs`, `.w-auto-xs`, `.h-full-xs`
Veritcal Alignment	`.align-top-xs`, `.align-middle-xs`, `.align-bottom-xs`
Rotation	`.rotate-[n]-xs`

Suffixes
Breakpoints