Breakpoints

Read all breakpoint mixins

Overview

Breakpoints are the stage where website changes and adapts based on user viewport size. Ravenbright is mobile-first CSS library which has 6 key breakpoints where the design and the content of layout may shift.

All breakpoints are fluid, except until it reaches the width of 1440px, they will become fixed.

Name	Mixins	Viewport (Min-width)	Description
Extra-small (xs)	@mixin screen-xs-up	12.5rem	Smartphone
Small (sm)	@mixin screen-sm-up	36rem	Tablet
Medium (md)	@mixin screen-md-up	48rem	Tablet
Large (lg)	@mixin screen-lg-up	67.5rem	Laptop
Extra-large (xl)	@mixin screen-xl-up	87.5rem	Desktop
Extra-extra-large (xxl)	@mixin screen-xxl-up	100rem (max-width)	Desktop

--rbrh-screen-sm: 36rem;
--rbrh-screen-md: 48rem;
--rbrh-screen-lg: 67.5rem;
--rbrh-screen-xl: 87.5rem;
--rbrh-screen-xxl: 100rem;

Customizing with PostCSS mixin plugin

Ravenbright uses PostCSS mixin to make it easier when writing breakpoints. This code below is placed in mixin directory.

@define-mixin screen-xs-up {
  @media (min-width: 12.5rem) {
    @mixin-content;
  }
}
@define-mixin screen-sm-up {
  @media (min-width: 36rem) {
    @mixin-content;
  }
}
@define-mixin screen-md-up {
  @media (min-width: 48rem) {
    @mixin-content;
  }
}
@define-mixin screen-lg-up {
  @media (min-width: 67.5rem) {
    @mixin-content;
  }
}
@define-mixin screen-xl-up {
  @media (min-width: 87.5rem) {
    @mixin-content;
  }
}
@define-mixin screen-xxl-up {
  @media (min-width: 100rem) {
    @mixin-content;
  }
}

Usage

You can place the @mixin inside the selector in this way below.

.button-group {
  display: grid;
  @mixin screen-xs-up {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    width: 100%;
  }
  @mixin screen-sm-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: fit-content;
  }
}

Check out the container utility

Find out how to apply responsiveness in your sites

Read container utility class