Responsive

Bristlecone's Design System leverages system-props' pattern and utility for easily defining different css property values for different, customizable breakpoints.


CSS System-Prop Examples

To create a div that has a css width value of 100% at a small breakpoint, let's say 320px and higher, and the width value change to 50% between 320px and 640px (the md breakpoint range in the default theme), you would do something like the following example:

width value based on breakpoints

My CSS width will be `100%` when the viewport is between `1px` and `320px` or larger; My width will change to `50%` when the viewport is at `320px` or larger, and back to `100%` when at `544px` or larger; Go ahead and adjust the viewport's width to see my `width` automagically adjust.
<BorderBox p={3} width={{sm: 1, md: 1/2, lg: 1}}>
  My CSS width will be `100%` when the viewport is between `1px` and `320px` or larger; My width will change to `50%` when the viewport is at `320px` or larger, and back to `100%` when at `544px` or larger; Go ahead and adjust the viewport's width to see my `width` automagically adjust.
</BorderBox>

The sm, md and lg breakpoint keys in the above example map to the breakpoint values as defined in Bristlecone's default theme's breakpoints dictionary. If you fancy, you can pass-in your own breakpoints dictionary with different breakpoints to the default theme (or your own theme all-together).

Learn more

useMedia Hook

For most situations, you will be fine-and-dandy with the built-in CSS system-prop pattern as demoed above, however, there may be times when creating a user experience that, for example, you may want to override your default props based on a media breakpoint. In such a case, you can leverage the useMedia hook from @bristlecone/hooks.

Basic Usage

The useMedia hook will update the corresponding isMobilePortrait variable value -- true / false -- based on the provided media query and as the user's viewport changes (e.g. the width gets smaller or bigger)

import useMedia from '@bristlecone/hooks'

function YourReactFunctionComponent({MQ, ...rest}) {
    const isMobilePortrait = MQ && useMedia(MQ.portrait)

    // implementation
}

YourReactFunctionComponent.defaultProps = {
    MQ: {
        portrait: '(max-device-width: 375px) and (orientation: portrait)'
    }
}

The useMedia hook is available from the @bristlecone/hooks package.