├── .stylelintrc ├── LICENSE ├── package.json ├── .gitignore ├── class.css ├── class.scss ├── _container.scss ├── README.zh-tw.md ├── _.scss └── README.md /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-recommended-scss", 3 | "ignoreFiles": [ 4 | "./class.css" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2016 Mango Chen 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-rwd", 3 | "version": "1.0.7", 4 | "description": "Very simple way for making Responsive Web Design.", 5 | "repository": { 6 | "url": "https://github.com/chenzitw/simple-rwd.git", 7 | "type": "git" 8 | }, 9 | "author": "MangoChen ", 10 | "license": "WTFPL", 11 | "scripts": { 12 | "build": "node build.js" 13 | }, 14 | "main": "_.scss", 15 | "sass": "_.scss", 16 | "style": "class.css", 17 | "dependencies": {}, 18 | "devDependencies": { 19 | "node-sass": "^4.5.3", 20 | "stylelint": "^8.1.1", 21 | "stylelint-config-recommended-scss": "^2.0.0", 22 | "stylelint-scss": "^2.1.0" 23 | }, 24 | "bugs": { 25 | "url": "https://github.com/chenzitw/simple-rwd" 26 | }, 27 | "homepage": "https://github.com/chenzitw/simple-rwd" 28 | } 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | # Visual Studio Code configuration 40 | .vscode 41 | 42 | # NPM lock file 43 | package-lock.json 44 | 45 | # Yarn lock file 46 | yarn.lock 47 | -------------------------------------------------------------------------------- /class.css: -------------------------------------------------------------------------------- 1 | @media (max-width: 319px){.simple-rwd:not(.container).hide:not(.show).s,.simple-rwd:not(.container).hide:not(.show).sm,.simple-rwd:not(.container).show:not(.hide):not(.s):not(.sm){display:none}}@media (min-width: 320px) and (max-width: 767px){.simple-rwd:not(.container).hide.m,.simple-rwd:not(.container).hide.sm,.simple-rwd:not(.container).show:not(.hide):not(.m):not(.sm){display:none}}@media (min-width: 768px) and (max-width: 991px){.simple-rwd:not(.container).hide.tb,.simple-rwd:not(.container).show:not(.hide):not(.tb){display:none}}@media (min-width: 992px) and (max-width: 1199px){.simple-rwd:not(.container).hide.pc,.simple-rwd:not(.container).show:not(.hide):not(.pc){display:none}}@media (min-width: 1200px){.simple-rwd:not(.container).hide.hd,.simple-rwd:not(.container).show:not(.hide):not(.hd){display:none}}.simple-rwd.container{display:block;margin-left:auto;margin-right:auto;max-width:100%}.simple-rwd.container::before,.simple-rwd.container::after{display:block;content:'';overflow:auto}@media (min-width: 320px) and (max-width: 767px){.simple-rwd.container.m,.simple-rwd.container:not(.m):not(.tb):not(.pc):not(.hd){width:320px}}@media (min-width: 768px) and (max-width: 991px){.simple-rwd.container.m:not(.tb){width:320px}.simple-rwd.container.tb,.simple-rwd.container:not(.m):not(.tb):not(.pc):not(.hd){width:720px}}@media (min-width: 992px) and (max-width: 1199px){.simple-rwd.container.m:not(.tb):not(.pc){width:320px}.simple-rwd.container.tb:not(.pc){width:720px}.simple-rwd.container.pc,.simple-rwd.container:not(.m):not(.tb):not(.pc):not(.hd){width:960px}}@media (min-width: 1200px){.simple-rwd.container.m:not(.tb):not(.pc):not(.hd){width:320px}.simple-rwd.container.tb:not(.pc):not(.hd){width:720px}.simple-rwd.container.pc:not(.hd){width:960px}.simple-rwd.container.hd,.simple-rwd.container:not(.m):not(.tb):not(.pc):not(.hd){width:1140px}} 2 | -------------------------------------------------------------------------------- /class.scss: -------------------------------------------------------------------------------- 1 | @import './'; 2 | 3 | .simple-rwd { 4 | &:not(.container) { 5 | @include simple-rwd(s) { 6 | &.hide:not(.show).s, 7 | &.hide:not(.show).sm, 8 | &.show:not(.hide):not(.s):not(.sm) { 9 | display: none; 10 | } 11 | } 12 | 13 | @include simple-rwd(m) { 14 | &.hide.m, 15 | &.hide.sm, 16 | &.show:not(.hide):not(.m):not(.sm) { 17 | display: none; 18 | } 19 | } 20 | 21 | @include simple-rwd(tb) { 22 | &.hide.tb, 23 | &.show:not(.hide):not(.tb) { 24 | display: none; 25 | } 26 | } 27 | 28 | @include simple-rwd(pc) { 29 | &.hide.pc, 30 | &.show:not(.hide):not(.pc) { 31 | display: none; 32 | } 33 | } 34 | 35 | @include simple-rwd(hd) { 36 | &.hide.hd, 37 | &.show:not(.hide):not(.hd) { 38 | display: none; 39 | } 40 | } 41 | } 42 | 43 | &.container { 44 | display: block; 45 | margin-left: auto; 46 | margin-right: auto; 47 | max-width: 100%; 48 | 49 | &::before, 50 | &::after { 51 | display: block; 52 | content: ''; 53 | overflow: auto; 54 | } 55 | 56 | @include simple-rwd(m) { 57 | &.m, 58 | &:not(.m):not(.tb):not(.pc):not(.hd) { 59 | width: $simple-rwd-container-m * 1px; 60 | } 61 | } 62 | 63 | @include simple-rwd(tb) { 64 | &.m:not(.tb) { 65 | width: $simple-rwd-container-m * 1px; 66 | } 67 | 68 | &.tb, 69 | &:not(.m):not(.tb):not(.pc):not(.hd) { 70 | width: $simple-rwd-container-tb * 1px; 71 | } 72 | } 73 | 74 | @include simple-rwd(pc) { 75 | &.m:not(.tb):not(.pc) { 76 | width: $simple-rwd-container-m * 1px; 77 | } 78 | 79 | &.tb:not(.pc) { 80 | width: $simple-rwd-container-tb * 1px; 81 | } 82 | 83 | &.pc, 84 | &:not(.m):not(.tb):not(.pc):not(.hd) { 85 | width: $simple-rwd-container-pc * 1px; 86 | } 87 | } 88 | 89 | @include simple-rwd(hd) { 90 | &.m:not(.tb):not(.pc):not(.hd) { 91 | width: $simple-rwd-container-m * 1px; 92 | } 93 | 94 | &.tb:not(.pc):not(.hd) { 95 | width: $simple-rwd-container-tb * 1px; 96 | } 97 | 98 | &.pc:not(.hd) { 99 | width: $simple-rwd-container-pc * 1px; 100 | } 101 | 102 | &.hd, 103 | &:not(.m):not(.tb):not(.pc):not(.hd) { 104 | width: $simple-rwd-container-hd * 1px; 105 | } 106 | } 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /_container.scss: -------------------------------------------------------------------------------- 1 | @import './'; 2 | 3 | @mixin simple-rwd-container($devices...) { 4 | 5 | // # Validation 6 | $validation-error: false; 7 | 8 | // ## Width of container must more than (>) previous device. 9 | @if $simple-rwd-container-m <= 0 { $validation-error: true; } 10 | 11 | @if $simple-rwd-container-tb <= $simple-rwd-container-m { $validation-error: true; } 12 | 13 | @if $simple-rwd-container-pc <= $simple-rwd-container-tb { $validation-error: true; } 14 | 15 | @if $simple-rwd-container-hd <= $simple-rwd-container-pc { $validation-error: true; } 16 | 17 | // ## Width of container must less than (<=) breakpoint. 18 | @if $simple-rwd-container-m > $simple-rwd-breakpoint-m { $validation-error: true; } 19 | 20 | @if $simple-rwd-container-tb > $simple-rwd-breakpoint-tb { $validation-error: true; } 21 | 22 | @if $simple-rwd-container-pc > $simple-rwd-breakpoint-pc { $validation-error: true; } 23 | 24 | @if $simple-rwd-container-hd > $simple-rwd-breakpoint-hd { $validation-error: true; } 25 | 26 | // # Error Exception 27 | @if $validation-error { 28 | /* Simple-RWD-Wide Error: please check the configuration. */ 29 | } 30 | 31 | // # Execution 32 | @else { 33 | // ## Figure out how many devices. 34 | $m: false; 35 | $tb: false; 36 | $pc: false; 37 | $hd: false; 38 | 39 | @each $device in $devices { 40 | @if $device == m { $m: true; } 41 | 42 | @else if $device == tb { $tb: true; } 43 | 44 | @else if $device == pc { $pc: true; } 45 | 46 | @else if $device == hd { $hd: true; } 47 | } 48 | 49 | @if $m == false and $tb == false and $pc == false and $hd == false { 50 | $m: true; 51 | $tb: true; 52 | $pc: true; 53 | $hd: true; 54 | } 55 | 56 | // ## Basic css. 57 | display: block; 58 | margin-left: auto; 59 | margin-right: auto; 60 | max-width: 100%; 61 | 62 | &::before, 63 | &::after { 64 | display: block; 65 | content: ''; 66 | overflow: auto; 67 | } 68 | 69 | // ## Define the width. 70 | @include simple-rwd(m) { 71 | @if $m { 72 | width: $simple-rwd-container-m * 1px; 73 | } 74 | } 75 | 76 | @include simple-rwd(tb) { 77 | @if $tb { 78 | width: $simple-rwd-container-tb * 1px; 79 | } 80 | 81 | @else if $m { 82 | width: $simple-rwd-container-m * 1px; 83 | } 84 | } 85 | 86 | @include simple-rwd(pc) { 87 | @if $pc { 88 | width: $simple-rwd-container-pc * 1px; 89 | } 90 | 91 | @else if $tb { 92 | width: $simple-rwd-container-tb * 1px; 93 | } 94 | 95 | @else if $m { 96 | width: $simple-rwd-container-m * 1px; 97 | } 98 | } 99 | 100 | @include simple-rwd(hd) { 101 | @if $hd { 102 | width: $simple-rwd-container-hd * 1px; 103 | } 104 | 105 | @else if $pc { 106 | width: $simple-rwd-container-pc * 1px; 107 | } 108 | 109 | @else if $tb { 110 | width: $simple-rwd-container-tb * 1px; 111 | } 112 | 113 | @else if $m { 114 | width: $simple-rwd-container-m * 1px; 115 | } 116 | } 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /README.zh-tw.md: -------------------------------------------------------------------------------- 1 | :earth_asia: [**中文**](README.zh-tw.md) [English](README.md) 2 | 3 | # Simple-RWD 4 | 光陰似金；簡明在心。 5 | 因而你需要打造適應網頁設計的簡明之道。 6 | 7 | ## 概觀 8 | 旨在「裝置」、「臨界」與「活匣」如後述。 9 | 10 | ### 裝置 11 | 依畫面寬度形成的裝置： 12 | - s: 小型裝置（罕見） 13 | - m: 行動裝置 14 | - sm: 小型裝置與行動裝置兼具之快捷法（等於 s 及 m） 15 | - tb: 平板電腦 16 | - pc: 普通螢幕之電腦或筆記型電腦 17 | - hd: 高解析螢幕之電腦或筆記型電腦 18 | 19 | ### 臨界 20 | 臨界點決定了各裝置的媒體查詢範圍： 21 | - m: 預設始於 320px。 22 | - tb: 預設始於 768px。 23 | - pc: 預設始於 992px。 24 | - hd: 預設始於 1200px。 25 | 26 | ### 活匣 27 | 水平置中的定寬塊形元素。 28 | - m: 預設為 320px 寬。 29 | - tb: 預設為 720px 寬。 30 | - pc: 預設為 960px 寬。 31 | - hd: 預設為 1140px 寬。 32 | 33 | ## 安裝 34 | [![NPM](https://nodei.co/npm/simple-rwd.png?mini=true)](https://npmjs.org/package/simple-rwd) 35 | 36 | 從 NPM 安裝：`npm install simple-rwd --save` 37 | 38 | 或者直接從原始碼抄錄。 39 | 40 | ## 用法 41 | 42 | ### SASS 集成式 43 | 用這兩個集成式，輕鬆打造適應網頁設計。 44 | 45 | #### simple-rwd() 46 | 使用 CSS 的媒體查詢真的很簡單。 47 | 48 | 首先引入核心集成式：`@import '~simple-rwd';` 49 | 50 | 接著以裝置為參數呼叫集成式。 51 | 52 | ```scss 53 | .image { 54 | @include simple-rwd(s, m) { 55 | max-width: 100%; 56 | } 57 | } 58 | ``` 59 | 60 | 最後你便會得到有媒體查詢的結果。 61 | 62 | ```css 63 | @media (max-width: 767px) { 64 | .image { 65 | max-width: 100%; 66 | } 67 | } 68 | ``` 69 | 70 | #### simple-rwd-container() 71 | 打造水平置中的定寬活匣也是真的很簡單。 72 | 73 | 首先引入活匣集成式：`@import '~simple-rwd/_container.scss';` 74 | 75 | 接著以想要的裝置為參數呼叫集成式。 76 | 77 | ```scss 78 | .wrapper { 79 | @include simple-rwd-container(m, pc) 80 | } 81 | ``` 82 | 83 | 最後你便會得到結果。 84 | 85 | ```css 86 | .wrapper { 87 | display: block; 88 | margin-left: auto; 89 | margin-right: auto; 90 | max-width: 100%; 91 | } 92 | .wrapper::before, .wrapper::after { 93 | display: block; 94 | content: ''; 95 | overflow: auto; 96 | } 97 | 98 | @media (min-width: 320px) and (max-width: 767px) { 99 | .wrapper { width: 320px; } 100 | } 101 | 102 | @media (min-width: 768px) and (max-width: 991px) { 103 | .wrapper { width: 320px; } 104 | } 105 | 106 | @media (min-width: 992px) and (max-width: 1199px) { 107 | .wrapper { width: 960px; } 108 | } 109 | 110 | @media (min-width: 1200px) { 111 | .wrapper { width: 960px; } 112 | } 113 | ``` 114 | 115 | #### 訂製 116 | 你能輕鬆覆寫配置。 117 | 只要在引入核心集成式後更改下列變數的值： 118 | 119 | ```scss 120 | @import '~simple-rwd/_container.scss'; 121 | 122 | $simple-rwd-breakpoint-m: 320; 123 | $simple-rwd-breakpoint-tb: 768; 124 | $simple-rwd-breakpoint-pc: 992; 125 | $simple-rwd-breakpoint-hd: 1200; 126 | 127 | $simple-rwd-container-m: 320; 128 | $simple-rwd-container-tb: 720; 129 | $simple-rwd-container-pc: 960; 130 | $simple-rwd-container-hd: 1140; 131 | 132 | .container { @include simple-rwd-container(m, pc); } 133 | ``` 134 | 135 | ### 純 CSS 類別 136 | 你能使用類別來輕鬆打造適應網頁設計。 137 | 有兩種方法引入： 138 | 139 | 1. 直接連結 CSS 檔：`` 140 | 2. 在 SASS 中引入：`@import '~simple-rwd/class.scss';` 141 | 142 | #### 隱現 143 | 在多重裝置上現形或隱形真的很簡單。 144 | 只要為元素加上類別。 145 | 146 | 現形：`` 147 | 此元素會在裝置 `tb` 與 `hd` 中現形。 148 | 149 | 隱形：`` 150 | 此元素會在裝置 `sm` 與 `pc` 中隱形。 151 | 152 | #### 活匣 153 | 打造水平置中的定寬活匣也是真的很簡單。 154 | 155 | 只要為元素加上類別：`
` 156 | 157 | ## 示範 158 | 瀏覽[示範](https://chenzitw.github.io/simple-rwd/demo/)。 159 | 160 | ## 憑證 161 | [要衝啥小隨你公眾憑證](https://github.com/chenzitw/simple-rwd/blob/master/LICENSE) 162 | 163 |

臺灣製造，舉世之傲！

164 | -------------------------------------------------------------------------------- /_.scss: -------------------------------------------------------------------------------- 1 | // # Configuration 2 | 3 | // ## Breakpoint 4 | $simple-rwd-breakpoint-m: 320 !default; 5 | $simple-rwd-breakpoint-tb: 768 !default; 6 | $simple-rwd-breakpoint-pc: 992 !default; 7 | $simple-rwd-breakpoint-hd: 1200 !default; 8 | 9 | // ## Container 10 | $simple-rwd-container-m: 320 !default; 11 | $simple-rwd-container-tb: 720 !default; 12 | $simple-rwd-container-pc: 960 !default; 13 | $simple-rwd-container-hd: 1140 !default; 14 | 15 | @mixin simple-rwd($devices...) { 16 | 17 | // # Validation 18 | $validation-error: false; 19 | 20 | @if $simple-rwd-breakpoint-m <= 0 { $validation-error: true; } 21 | 22 | @if $simple-rwd-breakpoint-tb <= $simple-rwd-breakpoint-m { $validation-error: true; } 23 | 24 | @if $simple-rwd-breakpoint-pc <= $simple-rwd-breakpoint-tb { $validation-error: true; } 25 | 26 | @if $simple-rwd-breakpoint-hd <= $simple-rwd-breakpoint-pc { $validation-error: true; } 27 | 28 | // # Error Exception 29 | @if $validation-error { 30 | /* Simple-RWD Error: please check the configuration. */ 31 | @content; 32 | } 33 | 34 | // # Execution 35 | @else { 36 | // ## Figure out how many devices. 37 | $s: false; 38 | $m: false; 39 | $tb: false; 40 | $pc: false; 41 | $hd: false; 42 | 43 | @each $device in $devices { 44 | @if $device == s { $s: true; } 45 | 46 | @else if $device == m { $m: true; } 47 | 48 | @else if $device == sm { $s: true; $m: true; } 49 | 50 | @else if $device == tb { $tb: true; } 51 | 52 | @else if $device == pc { $pc: true; } 53 | 54 | @else if $device == hd { $hd: true; } 55 | } 56 | 57 | // ## Arrange the ranges. 58 | $ranges: (); 59 | 60 | @if $s { 61 | $ranges: append($ranges, (min ($simple-rwd-breakpoint-m - 1))); 62 | } 63 | 64 | @if $m { 65 | $ranges: append($ranges, ($simple-rwd-breakpoint-m ($simple-rwd-breakpoint-tb - 1))); 66 | } 67 | 68 | @if $tb { 69 | $ranges: append($ranges, ($simple-rwd-breakpoint-tb ($simple-rwd-breakpoint-pc - 1))); 70 | } 71 | 72 | @if $pc { 73 | $ranges: append($ranges, ($simple-rwd-breakpoint-pc ($simple-rwd-breakpoint-hd - 1))); 74 | } 75 | 76 | @if $hd { 77 | $ranges: append($ranges, ($simple-rwd-breakpoint-hd max)); 78 | } 79 | 80 | // ## Concatenate the media query string 81 | $min: 0; 82 | $max: 0; 83 | $query: ''; 84 | 85 | @each $range in $ranges { 86 | @if $max != (nth($range, 1) - 1) { // 非連續，考慮承認前段 87 | @if $max != 0 { // 前段不為空，須承認前段 88 | @if $min != min { 89 | $query: $query + '(min-width: #{$min * 1px})'; 90 | } 91 | 92 | @if $min != min and $max != max { 93 | $query: $query + ' and '; 94 | } 95 | 96 | @if $max != max { 97 | $query: $query + '(max-width: #{$max * 1px})'; 98 | } 99 | $query: $query + ', '; 100 | } 101 | $min: nth($range, 1); 102 | } 103 | $max: nth($range, 2); 104 | } 105 | 106 | @if $max != 0 { // 前段不為空，須承認前段 107 | @if $min != min { 108 | $query: $query + '(min-width: #{$min * 1px})'; 109 | } 110 | 111 | @if $min != min and $max != max { 112 | $query: $query + ' and '; 113 | } 114 | 115 | @if $max != max { 116 | $query: $query + '(max-width: #{$max * 1px})'; 117 | } 118 | } 119 | 120 | // ## Export sass script 121 | @if $query != '' { 122 | @media #{$query} { 123 | @content; 124 | } 125 | } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :earth_asia: [**English**](README.md) [中文](README.zh-tw.md) 2 | 3 | # Simple-RWD 4 | Time is money; Simple is needed. 5 | So you need a simple way for making Responsive Web Design. 6 | 7 | ## Overview 8 | It's all about "Device", "Breakpoint" and "Container" below. 9 | 10 | ### Device 11 | These are devices defined by screen width: 12 | - s: Small device (unusual) 13 | - m: Mobile device 14 | - sm: Shortcut for small device and mobile device both (equal to s & m) 15 | - tb: Tablet 16 | - pc: Normal screen of computer or notebook 17 | - hd: HD screen of computer or notebook 18 | 19 | ### Breakpoint 20 | These breakpoints determine the range of each device for media query: 21 | - m: Starting at 320px as default. 22 | - tb: Starting at 768px as default. 23 | - pc: Starting at 992px as default. 24 | - hd: Starting at 1200px as default. 25 | 26 | ### Container 27 | A fixed width block element centered horizontally. 28 | - m: Being 320px wide as default. 29 | - tb: Being 720px wide as default. 30 | - pc: Being 960px wide as default. 31 | - hd: Being 1140px wide as default. 32 | 33 | ## Installation 34 | [![NPM](https://nodei.co/npm/simple-rwd.png?mini=true)](https://npmjs.org/package/simple-rwd) 35 | 36 | Install via NPM: `npm install simple-rwd --save` 37 | 38 | Or just copy from the source code. 39 | 40 | ## Usage 41 | 42 | ### SASS mixin 43 | You can use these two mixin for making RWD simply. 44 | 45 | #### simple-rwd() 46 | It is very simple to use CSS media queries. 47 | 48 | First, import the core mixin: `@import '~simple-rwd';` 49 | 50 | Then, call the mixin with devices as arguments. 51 | 52 | ```scss 53 | .image { 54 | @include simple-rwd(s, m) { 55 | max-width: 100%; 56 | } 57 | } 58 | ``` 59 | 60 | Finally, you will get the result with media query. 61 | 62 | ```css 63 | @media (max-width: 767px) { 64 | .image { 65 | max-width: 100%; 66 | } 67 | } 68 | ``` 69 | 70 | #### simple-rwd-container() 71 | It is also very simple to make a fixed width container centered horizontally. 72 | 73 | First, import the container mixin: `@import '~simple-rwd/_container.scss';` 74 | 75 | Then, call the mixin with devices you want as arguments. 76 | 77 | ```scss 78 | .wrapper { 79 | @include simple-rwd-container(m, pc) 80 | } 81 | ``` 82 | 83 | Finally, you will get the result. 84 | 85 | ```css 86 | .wrapper { 87 | display: block; 88 | margin-left: auto; 89 | margin-right: auto; 90 | max-width: 100%; 91 | } 92 | .wrapper::before, .wrapper::after { 93 | display: block; 94 | content: ''; 95 | overflow: auto; 96 | } 97 | 98 | @media (min-width: 320px) and (max-width: 767px) { 99 | .wrapper { width: 320px; } 100 | } 101 | 102 | @media (min-width: 768px) and (max-width: 991px) { 103 | .wrapper { width: 320px; } 104 | } 105 | 106 | @media (min-width: 992px) and (max-width: 1199px) { 107 | .wrapper { width: 960px; } 108 | } 109 | 110 | @media (min-width: 1200px) { 111 | .wrapper { width: 960px; } 112 | } 113 | ``` 114 | 115 | #### Custom 116 | You can override the configuration simply. 117 | Just change the value of variables below after importing core mixin: 118 | 119 | ```scss 120 | @import '~simple-rwd/_container.scss'; 121 | 122 | $simple-rwd-breakpoint-m: 320; 123 | $simple-rwd-breakpoint-tb: 768; 124 | $simple-rwd-breakpoint-pc: 992; 125 | $simple-rwd-breakpoint-hd: 1200; 126 | 127 | $simple-rwd-container-m: 320; 128 | $simple-rwd-container-tb: 720; 129 | $simple-rwd-container-pc: 960; 130 | $simple-rwd-container-hd: 1140; 131 | 132 | .container { @include simple-rwd-container(m, pc); } 133 | ``` 134 | 135 | ### Pure CSS class 136 | You can use class for making RWD simply. 137 | Here are two ways to import: 138 | 139 | 1. Link CSS file directly: `` 140 | 2. Import in SASS: `@import '~simple-rwd/class.scss';` 141 | 142 | #### Visible 143 | It is very simple to show or hide on multiple devices. 144 | Just add the class on the element. 145 | 146 | For showing: `` 147 | The element will be shown in devices `tb` and `hd`. 148 | 149 | 150 | For hiding: `` 151 | The element will be hidden in devices `sm` and `pc`. 152 | 153 | #### Container 154 | It is also very simple to make a fixed width container centered horizontally for wrapping content. 155 | 156 | Just add the class on the element: `
` 157 | 158 | ## Demo 159 | Visit the [Demo](https://chenzitw.github.io/simple-rwd/demo/). 160 | 161 | ## License 162 | [DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE](https://github.com/chenzitw/simple-rwd/blob/master/LICENSE) 163 | 164 |

Made in Taiwan, ray of sunshine!

165 | --------------------------------------------------------------------------------