styled-component boilerplate

Sample.jsx

import styled, { css } from 'styled-components'
import { media } from 'styled-bootstrap-grid'
import { padding } from 'polished'

const Sample = styled.div`

  /* 1. Default mobile first styles */
  ${ padding('10px', '14px', '10px', '8px') }
  color: black;
  

  /* 2. DOM element states (hover, active, ...) */
  &:hover{
    color: green;
  }


  /* 3. Modifiers with properties */
  ${props => props.primary && css`
    color: red;
  `}


  /* 4. Child element stylings (layouting only) */
  & > ${Header} {
    font-size: 2em;
  }


  /* 5. Media queries (order phone -> giant) */
  ${media.phone`

  `}

  ${media.tablet`

  `}

  ${media.desktop`

  `}

  ${media.giant`

  `}

`

export default Sample