super-query-api-documentation.md

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`	✔

Media Type

Type	How to Use	Comes after of	Following options	Can set `css` after?
all	`.all()`	`SuperQuery()`, `Logical Operator`	`Logical Operator`, `Media Feature`	✖
aural	`.aural()`	`SuperQuery()`, `Logical Operator`	`Logical Operator`, `Media Feature`	✖
braille	`.braille()`	`SuperQuery()`, `Logical Operator`	`Logical Operator`, `Media Feature`	✖
handheld	`.handheld()`	`SuperQuery()`, `Logical Operator`	`Logical Operator`, `Media Feature`	✖
print	`.print()`	`SuperQuery()`, `Logical Operator`	`Logical Operator`, `Media Feature`	✖
projection	`.projection()`	`SuperQuery()`, `Logical Operator`	`Logical Operator`, `Media Feature`	✖
screen	`.screen()`	`SuperQuery()`, `Logical Operator`	`Logical Operator`, `Media Feature`	✖
tty	`.tty()`	`SuperQuery()`, `Logical Operator`	`Logical Operator`, `Media Feature`	✖
tv	`.tv()`	`SuperQuery()`, `Logical Operator`	`Logical Operator`, `Media Feature`	✖
embossed	`.embossed()`	`SuperQuery()`, `Logical Operator`	`Logical Operator`, `Media Feature`	✖

Media Feature

Type	How to Use	Optional Argument Example	Comes after of	Following options	Can set `css` after?
width	`.width()`	`.width('100px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
min-width	`.minWidth()`	`.minWidth('100px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
max-width	`.maxWidth()`	`.maxWidth('100px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
height	`.height()`	`.height('340px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
min-height	`.minHeight()`	`.minHeight('340px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
max-height	`.maxHeight()`	`.maxHeight('340px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
device-width	`.deviceWidth()`	`.deviceWidth('960px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
min-device-width	`.minDeviceWidth()`	`.minDeviceWidth('960px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
max-device-width	`.maxDeviceWidth()`	`.maxDeviceWidth('960px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
device-height	`.height()`	`.height('320px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
min-device-height	`.minDeviceHeight()`	`.minDeviceHeight('340px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
max-device-height	`.maxDeviceHeight()`	`.maxDeviceHeight('340px')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
aspect-ratio	`.aspectRatio()`	`.aspectRatio('1/1')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
min-aspect-ratio	`.minAspectRatio()`	`.minAspectRatio('1/1')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
max-aspect-ratio	`.maxAspectRatio()`	`.maxAspectRatio('1/1')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
device-aspect-ratio	`.deviceAspectRatio()`	`.deviceAspectRatio('16/9')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
min-device-aspect-ratio	`.minDeviceAspectRatio()`	`.minDeviceAspectRatio('16/9')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
max-device-aspect-ratio	`.maxDeviceAspectRatio()`	`.maxDeviceAspectRatio('16/9')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
color	`.color()`	`n/a`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
min-color	`.minColor()`	`.minColor('4')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
max-color	`.maxColor()`	`.maxColor('4')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
color-index	`.colorIndex()`	`.colorIndex('256')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
min-color-index	`.minColorIndex()`	`.minColorIndex('256')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
max-color-index	`.maxColorIndex()`	`.maxColorIndex('256')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
monochrome	`.monochrome()`	`n/a`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
min-monochrome	`.minMonochrome()`	`.minMonochrome('8')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
max-monochrome	`.maxMonochrome()`	`.maxMonochrome('8')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
resolution	`.resolution()`	`.resolution('300dpi')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
min-resolution	`.minResolution()`	`.minResolution('300dpi')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
max-resolution	`.maxResolution()`	`.maxResolution('300dpi')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
scan	`.scan()`	`.scan('progressive')`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔
grid	`.grid()`	`n/a`	`SuperQuery()`, `Logical Operator`, `Media Type`	`Logical Operator`, `Breakpoints`	✔

Screen Orientation

Type	How to Use	Comes after of	Following options	Can set `css` after?
landscape	`.landscape()`	`Logical Operator`	`Logical Operator`	✔
portrait	`.portrait()`	`Logical Operator`	`Logical Operator`	✔

Logical Operator

Type	How to Use	Comes after of	Following options	Can set `css` after?
and	`.and()`	`Media Feature`, `Screen Orientation`, `Breakpoints`	`Media Type`, `Media Feature`, `Screen Orientation`	✖
or	`.or()`	`Media Feature`, `Screen Orientation`, `Breakpoints`	`Media Type`, `Media Feature`, `Screen Orientation`	✖
not	`.not()`	`SuperQuery()`	`Media Type`	✖
only	`.only()`	`SuperQuery()`	`Media Type`	✖

Render CSS

Simply call the css function as the last iteration and pass the css syntax throw ES6 Tagged Template Literals:

SuperQuery().minWidth().md().css`
  color: white;
  font-size: 14px;
  text-decoration: none;
`

themgoncalves/super-query-api-documentation.md

Built-in Breakpoints

Media Type

Media Feature

Screen Orientation

Logical Operator

Render CSS