Simple-RWD
Time is money; Simple is needed.
So you need a simple way for making Responsive Web Design.
Overview
It's all about "Device", "Breakpoint" and "Container" below.
Device
These are devices defined by screen width:
- s: Small device (unusual)
- m: Mobile device
- sm: Shortcut for small device and mobile device both (equal to s & m)
- tb: Tablet
- pc: Normal screen of computer or notebook
- hd: HD screen of computer or notebook
Breakpoint
These breakpoints determine the range of each device for media query:
- m: Starting at 320px as default.
- tb: Starting at 768px as default.
- pc: Starting at 992px as default.
- hd: Starting at 1200px as default.
Container
A fixed width block element centered horizontally.
- m: Being 320px wide as default.
- tb: Being 720px wide as default.
- pc: Being 960px wide as default.
- hd: Being 1140px wide as default.
Installation
Install via NPM: npm install simple-rwd --save
Or just copy from the source code.
Usage
SASS mixin
You can use these two mixin for making RWD simply.
simple-rwd()
It is very simple to use CSS media queries.
First, import the core mixin: @import '~simple-rwd';
Then, call the mixin with devices as arguments.
.image
Finally, you will get the result with media query.
{}
simple-rwd-container()
It is also very simple to make a fixed width container centered horizontally.
First, import the container mixin: @import '~simple-rwd/_container.scss';
Then, call the mixin with devices you want as arguments.
.wrapper
Finally, you will get the result.
{} {} {} {}
Custom
You can override the configuration simply.
Just change the value of variables below after importing core mixin:
; ;;;; ;;;; .container
Pure CSS class
You can use class for making RWD simply.
Here are two ways to import:
- Link CSS file directly:
<link href="simple-rwd-class.css" rel="stylesheet">
- Import in SASS:
@import '~simple-rwd/class.scss';
Visible
It is very simple to show or hide on multiple devices.
Just add the class on the element.
For showing: <el class="simple-rwd show tb hd" />
The element will be shown in devices tb
and hd
.
For hiding: <el class="simple-rwd hide sm pc" />
The element will be hidden in devices sm
and pc
.
Container
It is also very simple to make a fixed width container centered horizontally for wrapping content.
Just add the class on the element: <div class="simple-rwd container tb pc hd">
Demo
Visit the Demo.
License
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Made in Taiwan, ray of sunshine!