bolt/settings-breakpoints
Major breakpoint sizes. Part of the Bolt “Core” CSS framework that powers the Bolt Design System.
- Sassdocs
- Demo (Coming Soon)
Table of Contents
Cheat Sheet
Install via NPM
npm install @bolt/settings-breakpoints
Breakpoint Sizing Chart*
| T-Shirt Size | Size in px |
|---|---|
| xsmall | 400px |
| small | 600px |
| medium | 800px |
| large | 1000px |
| xlarge | 1200px |
[Deprecation Notice]: Coming in from PegaKit? Please take note that while Bolt's Sass variables, mixins, CSS classes, etc are intended to be used in a variety of different environments and use-cases, the specific names of things in Bolt are typically a little different than PegaKit to avoid potential namespace conflicts!
Getting Started
The best way to start using Bolt is via the Bolt Starterkit (coming soon), a pre-assembled front-end boilerplate designed to get you up and running as quickly as possible.
You can also use the full Bolt Core CSS framework on its own, or, install just the parts you need and fold the different ITCSS layers of Bolt into your existing codebase.
Installing Bolt’s breakpoint settings is as easy as running NPM install:
npm install @bolt/settings-breakpoints
TIP:: Don’t have a
package.jsonfile? Need a little help getting started? Check out our Getting Started guide for some tips to help get you up to speed.
Usage
Once installed, you should @import the main Sass partial into your project’s main .scss file to make the included variables and Sass mixins available to use in the rest of your code.
// Settings
@import ‘@bolt/settings-breakpoints’
...
// Tools
@import ‘@bolt/tools-...’
Since Bolt's CSS architecture is based on ITCSS (Inverted Triangle CSS)1, what Sass partials you import, and in what order, makes a whole world of difference. That’s why importing any Settings packages from Bolt in your project’s Settings layer (prior to any Sass mixins, resets, base HTML element styles, etc) is so important.
Compiling
We recommend using Bolt’s Gulp-based front-end build tools to compile your Sass as we're pre-packaging many of the latest tools and add-ons to help you write your very best: LibSass, Autoprefixer, PostCSS, CleanCSS, Sassdoc, Stylelint, Gulp Plumber, npm-sass, and BrowserSync live reloading.
Breakpoint Features
Defined as T-shirt Sizes
As with most sizing options in Bolt, breakpoint sizes are categorized and referenced as t-shirt sizes, with medium being the default the average medium-ish sized screen and each t-shirt size option being one step larger/smaller.
This helps to better explain intended behavior based on the user's available screen size without getting caught up in any assumptions about context or physical form factor ("mobile" vs "tablet" vs "desktop") of the user.
Breakpoint Size Doesn't Mean Device Type
For example, small doesn't mean mobile just as much as large doesn't mean desktop.
Small simply means I have less pixels on my device which could apply to a phone, but could just as easily apply to a Windows 10 user docking Microsoft Edge browser to the side of the screen or Safari for iOS on an iPad when viewing two windows side-by-side.
Plain and simple: breakpoints don't necessarily equate to a specific screen size or device type.
Mobile First
Breakpoints defined and used in Bolt start out with any rules for the smallest of screen sizes first and gradually add additional rules for larger devices as needed.
Major vs Minor Breakpoints
To help with consistancy in the design system, major breakpoints in Bolt are assigned names to help coordinate different behaviors across large ranges of screen and device sizes.
@include respond-to(medium){
max-width: none;
}Minor breakpoints on the other hand are used much more sparingly to tweak things at the component level, as needed.
$bolt-card-horizontal-layout: 650px;
...
.c-bolt-card {
...
@include breakpoint($bolt-card-horizontal-layout){
flex-direction: row;
}
}