Simple-RWD Demo

Visit Github for more information.

Please resize the window to see effects.

SASS mixin - simple-rwd()
SASS mixin - simple-rwd-container()
Pure CSS class - Visible
Pure CSS class - Container

Current screen

Device s - small
Screen width less than 319px.

Device m - mobile
Screen width between 320px to 767px.

Device sm - small & mobile
Screen width less than 767px.

Device tb - tablet
Screen width between 768px to 991px.

Device pc - normal screen of computer or notebook
Screen width between 992px to 1199px.

Device hd - HD screen of computer or notebook
Screen width more than 1200px.

SASS mixin

simple-rwd()

Very simple to make CSS media query.

@include simple-rwd(s) { color: red; }

@include simple-rwd(m) { color: red; }

@include simple-rwd(sm) { color: red; }

@include simple-rwd(tb) { color: red; }

@include simple-rwd(pc) { color: red; }

@include simple-rwd(hd) { color: red; }

@include simple-rwd(s, m) { color: red; }

@include simple-rwd(m, tb) { color: red; }

@include simple-rwd(tb, pc) { color: red; }

@include simple-rwd(pc, hd) { color: red; }

@include simple-rwd(s, pc) { color: red; }

@include simple-rwd(m, hd) { color: red; }

@include simple-rwd(s, m, tb) { color: red; }

@include simple-rwd(m, tb, pc) { color: red; }

@include simple-rwd(tb, pc, hd) { color: red; }

@include simple-rwd(s, tb, hd) { color: red; }

SASS mixin

simple-rwd-container()

Very simple to make RWD container.

none

@include simple-rwd-container()

@include simple-rwd-container(m)

@include simple-rwd-container(tb)

@include simple-rwd-container(pc)

@include simple-rwd-container(hd)

@include simple-rwd-container(m, pc)

@include simple-rwd-container(tb, pc, hd)

Pure CSS class

Visible

Very simple to show and hide with RWD.

<el class="simple-rwd show s" />: show

<el class="simple-rwd show m" />: show

<el class="simple-rwd show sm" />: show

<el class="simple-rwd show tb" />: show

<el class="simple-rwd show pc" />: show

<el class="simple-rwd show hd" />: show

<el class="simple-rwd hide s" />:

<el class="simple-rwd hide m" />:

<el class="simple-rwd hide sm" />:

<el class="simple-rwd hide tb" />:

<el class="simple-rwd hide pc" />:

<el class="simple-rwd hide hd" />:

Pure CSS class

Container

Very simple to use RWD container.

none

Use me now!

Visit Github for more information.