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