themgoncalves

const webpack = require('webpack');
const path = require('path');
const ReactLoadableSSRAddon = require('react-loadable-ssr-addon');

module.exports = {
  target: 'web',
  entry: {
    index: './source/client.jsx',
  },
  devtool: 'cheap-module-eval-source-map',

themgoncalves

Built-in Breakpoints

Type	How to Use	Size	Comes after of	Following options	Can set css after?
xs	.xs()	0px	Media Feature	Logical Operator	✔
sm	.sm()	576px	Media Feature	Logical Operator	✔
md	.md()	768px	Media Feature	Logical Operator	✔
lg	.lg()	992px	Media Feature	Logical Operator	✔
xl	.xl()	1200px	Media Feature	Logical Operator	✔

themgoncalves

import styled from 'styled-components';
import SuperQuery, { configureBreakpoints } from '@themgoncalves/super-query';

const customBreakpoints = {
  extraSmall: 360,
  small: 640,
  medium: 960,
  large: 1024,
  extraLarge: 1200,
  superExtraLarge: 1600,

themgoncalves

// first we need to import the `configureBreakpoints` function
import { configureBreakpoints } from '@themgoncalves/super-query';

// here is an example of a custom breakpoint
const customBreakpoints = {
  extraSmall: 360,
  small: 640,
  medium: 960,
  large: 1024,
  extraLarge: 1200,

themgoncalves

import styled from 'styled-components';
import SuperQuery from '@themgoncalves/super-query';

const Title = styled.h1`
  color: #666;
  font-size: 16px;
  ${SuperQuery().minWidth().lg().css`
    font-size: 20px;
  `};
  ${SuperQuery().minWidth().lg().and().landscape().css`

themgoncalves

const wrapper = styled.div`
  background-color: #1B9CE2;
  color: #FFF;
  font-size: 16px;
  SuperQuery()
        .screen()
        .and()
        .deviceAspectRatio('16/9')
        .or()
        .screen()

themgoncalves

const wrapper = styled.div`
  background-color: #1B9CE2;
  color: #FFF;
  font-size: 16px;
  SuperQuery().maxWidth().md().and().landscape().css`
      content: 'Yep! Your device is on landscape mode!'
  `
`

themgoncalves

const wrapper = styled.div`
  background-color: #1B9CE2;
  color: #FFF;
  font-size: 16px;
  SuperQuery().minWidth().sm().and().maxWidth().lg().css`
      content: 'this is even more awesome!'
  `
`

themgoncalves

const wrapper = styled.div`
  background-color: #1B9CE2;
  color: #FFF;
  font-size: 16px;
  SuperQuery().minWidth('360px').and().maxWidth('1024px').css`
      content: 'this is awesome!'
  `
`