Neurotic Programmer Masquerade

    @humblebee/styled-components-breakpoint
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/humblebee__styled-components-breakpoint package

    2.1.4 • Public • Published

    Commitizen friendly codecov semantic-release Travis npm npm

    Styled Components Breakpoint 💅

    This library provides utility functions for dealing with media queries, to make them reusable and easier to read. It can be used as an alternative to SASS/LESS mixins.

    More on mixins and Styled Components in this article.


    Installation

    yarn install @humblebee/styled-components-breakpoint
    # or 
    npm install @humblebee/styled-components-breakpoint

    Usage and setup

    The default export of styled-components-breakpoint is a function that accepts a config object of breakpoints. This will return an object with three main utility methods/mixins: up (min-width), down (max-width) and only (a range between two media queries), all described in detail below.

    import styledBreakpoint from '@humblebee/styled-components-breakpoint';
     
    // Creates an object with breakpoint utility methods.
    export const breakpoint = styledBreakpoint({
      xxs: 0,
      xs: 320,
      s: 576,
      m: 768,
      l: 992,
      xl: 1200,
    });

    Up

    breakpoint.up('m')
    // Will return a media query with a min-width of 768
    // @media only screen and (min-width: 768px)

    Down

    breakpoint.down('m')
    // Will return a media query with a max-width of 768
    // @media only screen and (max-width: 768px)

    Only

    breakpoint.only('m')
    // Will return a range media query between "m" and the next upper breakpoint "l"
    // @media only screen and (min-width: 768px) and (max-width: 1200px)
    breakpoint.only('m', 'xl')
    // Will return a range media query between "m" and the breakpoint passed as the second argument, "xl"
    // @media only screen and (min-width: 768px) and (max-width: 1200px)

    Shorthand

    There is also a shorthand for mobile first media queries (min-width). Calling breakpoint.m is the same as breakpoint.up('m').

    breakpoint.m
    // Will return a media query with a min-width of 768
    // @media only screen and (min-width: 768px)

    Usage with styled components

    In the following example we create a styled button component.

    This is the folder structure we'll be working with.

    .
    +--components
    |  +--Button.js
    +--themes
    |  +--mixins.js
    

    themes/mixins.js

    import styledBreakpoint from '@humblebee/styled-components-breakpoint';
     
    // Create an instance of styled-components-breakpoint and pass it an object of breakpoints.
    export const breakpoint = styledBreakpoint({
      xs: 320,
      s: 576,
      m: 768,
      l: 992,
      xl: 1200,
    });

    components/Button.js

    // Styled Components
    import styled from 'styled-components';
    // Our breakpoint instance/mixin
    import { breakpoint } from '../../theme/mixins';
     
    const Button = styled.button`
        background: white;
        font-size: 18px;
        ${breakpoint.down('s')}`
          font-size: 12px;
        `
        ${breakpoint.m}`
          background: palevioletred;
        `
      `
    });

    The first mixin breakpoint.down('s'), will give the styled button component a font size of 12px, at a breakpoint bellow "s", i.e. max-width(320px).

    The second mixin breakpoint.m, uses the short hand version of breakpoint.up.('m'), and will give the button a background of palevioletred, at a breakpoint above "m", i.e. min-width(768).


    Happy coding!

    / The bees at Humblebee 🐝

    Install

    npm i @humblebee/styled-components-breakpoint

    DownloadsWeekly Downloads

    159

    Version

    2.1.4

    License

    MIT

    Unpacked Size

    11.3 kB

    Total Files

    3

    Last publish

    Collaborators

    • flosch
    • humblebee-hive
    • humblebee-admin
    • mikaelvesavuori
    • johnnybira