🎠 SuperQuery

Module: SuperQuery

A media-query for styled-component

Version:
  • 2.0.0
Author:
License:
  • MIT
See:

Example

Example of use together with `styled-components`

const Title = styled.h1`
  color: #666;
  font-size: 16px;
  // Use with your custom breakpoints directly from `ThemeProvider`
  ${props => SuperQuery(props.theme.breakpoints).minWidth.large.css`
    font-size: 20px;
  `};
  // Or directly from an object
  ${SuperQuery(myCuystombreakpoints).minWidth.large.css`
    font-size: 20px;
  `};
   // Or use the built-in breakpoints instead
  ${SuperQuery().minWidth.lg.and.landscape.css`
    font-size: 26px;
  `};
`;

Requires

  • module:styled-components

Methods

<inner> css(args)

Render the given css syntax

Parameters:
Name Type Description
args String

ES6 Tagged Template Literals containing your CSS syntax
See:
Example
SuperQuery.all.minWidth.md.css`
 background-color: #CCC;
`

<inner> css(args)

Render the given css syntax

Parameters:
Name Type Description
args String

ES6 Tagged Template Literals containing your CSS syntax
See:
Example
SuperQuery.all.minWidth.md.css`
 background-color: #CCC;
`

<inner> of(value)

Media Feature Selector

Parameters:
Name Type Description
value String

Optional value of the Media Feature
See:
Returns:
Type
Object
Example
SuperQuery().width.of('120px');
SuperQuery().minResolution.of('300dpi');
SuperQuery().deviceAspectRatio.of('16/9');

<inner> of(value)

Media Feature Selector

Parameters:
Name Type Description
value String

Optional value of the Media Feature
See:
Returns:
Type
Object
Example
SuperQuery().width.of('120px');
SuperQuery().minResolution.of('300dpi');
SuperQuery().deviceAspectRatio.of('16/9');

Module: SuperQuery

A media-query for styled-component

Version:
  • 2.0.0
Author:
License:
  • MIT
See:

Example

Example of use together with `styled-components`

const Title = styled.h1`
  color: #666;
  font-size: 16px;
  // Use with your custom breakpoints directly from `ThemeProvider`
  ${props => SuperQuery(props.theme.breakpoints).minWidth.large.css`
    font-size: 20px;
  `};
  // Or directly from an object
  ${SuperQuery(myCuystombreakpoints).minWidth.large.css`
    font-size: 20px;
  `};
   // Or use the built-in breakpoints instead
  ${SuperQuery().minWidth.lg.and.landscape.css`
    font-size: 26px;
  `};
`;

Requires

  • module:styled-components

Methods

<inner> css(args)

Render the given css syntax

Parameters:
Name Type Description
args String

ES6 Tagged Template Literals containing your CSS syntax
See:
Example
SuperQuery.all.minWidth.md.css`
 background-color: #CCC;
`

<inner> css(args)

Render the given css syntax

Parameters:
Name Type Description
args String

ES6 Tagged Template Literals containing your CSS syntax
See:
Example
SuperQuery.all.minWidth.md.css`
 background-color: #CCC;
`

<inner> of(value)

Media Feature Selector

Parameters:
Name Type Description
value String

Optional value of the Media Feature
See:
Returns:
Type
Object
Example
SuperQuery().width.of('120px');
SuperQuery().minResolution.of('300dpi');
SuperQuery().deviceAspectRatio.of('16/9');

<inner> of(value)

Media Feature Selector

Parameters:
Name Type Description
value String

Optional value of the Media Feature
See:
Returns:
Type
Object
Example
SuperQuery().width.of('120px');
SuperQuery().minResolution.of('300dpi');
SuperQuery().deviceAspectRatio.of('16/9');