breakpoints

v1.0.7

v1.0.6

v1.0.5

v1.0.4

v1.0.3

v1.0.2

v1.0.1

v1.0.0

STATUS

Passing

DOWNLOADS

5,349

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

3 KB

Preset breakpoints for the whole app.

UI Components

layout

1 contributor

Install breakpoints as a package?

Copied

npm i @bit/bit.base-ui.layout.breakpoints

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

layout/breakpoints ()

Preset breakpoints for the whole app.

Use (min-width: xxx) to keep a consistent mobile-first experience (and not max-width).

$br-xs: 360px;
$br-sm: 480px;      //mobile
$br-md: 768px;      
$br-l: 920px;       //tablet
$br-lg-new: 1200px; //laptop
$br-xl: 1440px;
$br-xxl: 1920px;

example

.content @media screen and (min-width: $br-l) {
  display: flex;
}