├── README ├── robots.txt ├── js └── mqframework.js ├── .DS_Store ├── css ├── .DS_Store ├── master.css ├── custom.css ├── test.css ├── typography.css ├── reset.css └── base.css ├── images ├── bg.png ├── .DS_Store ├── fabric.gif └── mqframework-showcase.png ├── humans.txt └── index.html /README: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | DEMO -------------------------------------------------------------------------------- /js/mqframework.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | }); 4 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmjio/MQFramework/HEAD/.DS_Store -------------------------------------------------------------------------------- /css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmjio/MQFramework/HEAD/css/.DS_Store -------------------------------------------------------------------------------- /images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmjio/MQFramework/HEAD/images/bg.png -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmjio/MQFramework/HEAD/images/.DS_Store -------------------------------------------------------------------------------- /images/fabric.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmjio/MQFramework/HEAD/images/fabric.gif -------------------------------------------------------------------------------- /images/mqframework-showcase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmjio/MQFramework/HEAD/images/mqframework-showcase.png -------------------------------------------------------------------------------- /css/master.css: -------------------------------------------------------------------------------- 1 | /* 2 | —————————————————————————————————————————–––––– 3 | MQFramework by Chris Johnson 4 | —————————————————————————————————————————–––––– 5 | */ 6 | 7 | @import url('reset.css'); 8 | @import url('base.css'); 9 | @import url('typography.css'); 10 | @import url('custom.css'); 11 | @import url('test.css'); 12 | -------------------------------------------------------------------------------- /humans.txt: -------------------------------------------------------------------------------- 1 | /* TEAM */ 2 | Your title: Your name. 3 | Site: email, link to a contact form, etc. 4 | Twitter: your Twitter username. 5 | Location: City, Country. 6 | 7 | /* THANKS */ 8 | Name: name or url 9 | 10 | /* SITE */ 11 | Last update: YYYY/MM/DD 12 | Standards: HTML5, CSS3,.. 13 | Components: Modernizr, jQuery, etc. 14 | Software: Software used for the development -------------------------------------------------------------------------------- /css/custom.css: -------------------------------------------------------------------------------- 1 | /* 2 | —————————————————————————————————————————–––––– 3 | Custom: MQFramework by Chris Johnson 4 | —————————————————————————————————————————–––––– 5 | */ 6 | 7 | img{width:100%;} 8 | @media only screen and (min-width: 960px) and (max-width: 1139px) { 9 | 10 | } 11 | @media only screen and (min-width: 768px) and (max-width: 959px) { 12 | 13 | } 14 | @media only screen and (min-width: 480px) and (max-width: 767px) { 15 | 16 | } 17 | @media only screen and (min-width: 320px) and (max-width: 479px) { 18 | 19 | } 20 | @media print{} 21 | -------------------------------------------------------------------------------- /css/test.css: -------------------------------------------------------------------------------- 1 | /* 2 | —————————————————————————————————————————–––––– 3 | Testing Purposes Only 4 | —————————————————————————————————————————–––––– 5 | */ 6 | .test { border:1px solid #cc0000;background:rgba(204,0,0,0.2); } 7 | .test .grid_1,.test .grid_2,.test .grid_3,.test .grid_4,.test .grid_5,.test .grid_6,.test .grid_7,.test .grid_8,.test .grid_9,.test .grid_10,.test .grid_11,.test .grid_12 { border-bottom:1px solid #cc0000;background:rgba(204,0,0,0.2); } 8 | .test .row{border-bottom:1px solid #ffffff;} 9 | 10 | .test .row:last-child{border-bottom:0;} 11 | 12 | .test p{border:1px solid #cc0000;background:rgba(204,0,0,0.2);} -------------------------------------------------------------------------------- /css/typography.css: -------------------------------------------------------------------------------- 1 | /* 2 | —————————————————————————————————————————–––––– 3 | Typography: MQFramework by Chris Johnson 4 | —————————————————————————————————————————–––––– 5 | */ 6 | 7 | body{font:0.9em 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;line-height:1.6em;} 8 | 9 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } 10 | h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} 11 | h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } 12 | h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } 13 | h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } 14 | h5 { font-size: 17px; line-height: 24px; } 15 | h6 { font-size: 14px; line-height: 21px; } 16 | 17 | /* @font-face { 18 | font-family: 'FontName'; 19 | src: url('../fonts/FontName.eot'); 20 | src: url('../fonts/FontName.eot?iefix') format('eot'), 21 | url('../fonts/FontName.woff') format('woff'), 22 | url('../fonts/FontName.ttf') format('truetype'), 23 | url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); 24 | font-weight: normal; 25 | font-style: normal; } 26 | */ -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MQFramework 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 | 37 | 46 |
47 |
48 | 49 |
50 | 51 | 52 | 53 | 54 | 55 | 56 |
57 |
58 |

A responsive CSS framework, MQFramework utilises the @media property to allow you to design your sites for browsers of all sizes. Based on a 12 column grid, MQFramework degrades perfectly down to mobile screen sizes.

59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |

Default Grid

69 |
70 |
71 |

Grid 12

72 |
73 |
74 |

Grid 1

75 |

Grid 11

76 |
77 |
78 |

Grid 2

79 |

Grid 10

80 |
81 |
82 |

Grid 3

83 |

Grid 9

84 |
85 |
86 |

Grid 4

87 |

Grid 8

88 |
89 |
90 |

Grid 5

91 |

Grid 7

92 |
93 |
94 |

Grid 6

95 |

Grid 6

96 |
97 |
98 |
99 |
100 |

Push

101 |
102 |
103 |

Grid 1

104 |
105 |
106 |

Grid 1

107 |
108 |
109 |

Grid 1

110 |
111 |
112 |

Grid 1

113 |
114 |
115 |

Grid 1

116 |
117 |
118 |

Grid 1

119 |
120 |
121 |
122 |
123 |

Prefix

124 |
125 |
126 |

Grid 1

Grid 1

127 |
128 |
129 |

Grid 1

Grid 1

130 |
131 |
132 |

Grid 1

Grid 1

133 |
134 |
135 |

Grid 1

Grid 1

136 |
137 |
138 |

Grid 1

Grid 1

139 |
140 |
141 |

Grid 1

Grid 1

142 |
143 |
144 |
145 |
146 |

© 2011 Chris Johnson · HTML5 · CSS3 147 |

148 |
149 |
150 | 151 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | /* 2 | —————————————————————————————————————————–––––––– 3 | Base:MQFramework by Chris Johnson 4 | —————————————————————————————————————————–––––––– 5 | MQFramework is a responsive "snap" web framework 6 | that will degrade from wide-screen monitors all 7 | the way down to mobile devices. It uses 8 | "media-queries" which can be found within the 9 | CSS3 specification. 10 | 11 | ///////////////////////////////////////////////// 12 | Grid Sizes 13 | ///////////////////////////////////////////////// 14 | —————————————————————————————————————————–––––––– 15 | Grid - 1140px - Wide 16 | ------------------------------------------------- 17 | 1 2 3 4 5 6 7 8 9 10 11 12 18 | 75 170 265 360 455 550 646 749 835 930 1025 1120 19 | ------------------------------------------------- 20 | —————————————————————————————————————————–––––––– 21 | Grid - 960px - Normal 22 | ------------------------------------------------- 23 | 1 2 3 4 5 6 7 8 9 10 11 12 24 | 60 140 220 300 380 460 540 620 700 780 860 940 25 | ------------------------------------------------- 26 | —————————————————————————————————————————–––––––– 27 | Grid - 768px - iPad 28 | ------------------------------------------------- 29 | 1 2 3 4 5 6 7 8 9 10 11 12 30 | 44 108 172 236 300 364 428 492 556 620 684 748 31 | ------------------------------------------------- 32 | —————————————————————————————————————————–––––––– 33 | Grid - 480px - iPhone Wide 34 | —————————————————————————————————————————–––––––– 35 | —————————————————————————————————————————–––––––– 36 | Grid - 300px - iPhone 37 | —————————————————————————————————————————–––––––– 38 | —————————————————————————————————————————–––––––– 39 | Print 40 | —————————————————————————————————————————–––––––– 41 | 42 | */ 43 | 44 | .container { width:1140px;margin:0px auto;padding:0px;position:relative; } 45 | .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12 { display:inline;float:left;position:relative;margin-left:10px;margin-right:10px;-webkit-transition: all 1s ease-in; 46 | -moz-transition: all 1s ease-in; 47 | -o-transition: all 1s ease-in; 48 | -ms-transition: all 1s ease-in; } 49 | 50 | .container .grid_1 { width:75px; } 51 | .container .grid_2 { width:170px; } 52 | .container .grid_3 { width:265px; } 53 | .container .grid_4 { width:360px; } 54 | .container .grid_5 { width:455px; } 55 | .container .grid_6 { width:550px; } 56 | .container .grid_7 { width:645px; } 57 | .container .grid_8 { width:740px; } 58 | .container .grid_9 { width:835px; } 59 | .container .grid_10 { width:930px; } 60 | .container .grid_11 { width:1025px; } 61 | .container .grid_12 { width:1120px; } 62 | 63 | .mobile-only{display:none;} 64 | .ipad-only{display:none;} 65 | .desktop-only{display:inline;} 66 | .desktop-only-alt{display:block;} 67 | 68 | .push_1, .pull_1, 69 | .push_2, .pull_2, 70 | .push_3, .pull_3, 71 | .push_4, .pull_4, 72 | .push_5, .pull_5, 73 | .push_6, .pull_6, 74 | .push_7, .pull_7, 75 | .push_8, .pull_8, 76 | .push_9, .pull_9, 77 | .push_10, .pull_10, 78 | .push_11, .pull_11, 79 | .push_12, .pull_12 { 80 | position:relative; 81 | } 82 | 83 | .container .prefix_1 { padding-left:95px; } 84 | .container .prefix_2 { padding-left:190px; } 85 | .container .prefix_3 { padding-left:285px; } 86 | .container .prefix_4 { padding-left:380px; } 87 | .container .prefix_5 { padding-left:475px; } 88 | .container .prefix_6 { padding-left:570px; } 89 | .container .prefix_7 { padding-left:665px; } 90 | .container .prefix_8 { padding-left:760px; } 91 | .container .prefix_9 { padding-left:855px; } 92 | .container .prefix_10 { padding-left:950px; } 93 | .container .prefix_11 { padding-left:1045px; } 94 | 95 | .container .push_1 { left:95px; } 96 | .container .push_2 { left:190px; } 97 | .container .push_3 { left:285px; } 98 | .container .push_4 { left:380px; } 99 | .container .push_5 { left:475px; } 100 | .container .push_6 { left:570px; } 101 | .container .push_7 { left:665px; } 102 | .container .push_8 { left:760px; } 103 | .container .push_9 { left:855px; } 104 | .container .push_10 { left:950px; } 105 | .container .push_11 { left:1045px; } 106 | 107 | 108 | @media only screen and (min-width: 960px) and (max-width: 1139px) { 109 | .container{width:960px;} 110 | .container .grid_1 { width:60px; } 111 | .container .grid_2 { width:140px; } 112 | .container .grid_3 { width:220px; } 113 | .container .grid_4 { width:300px; } 114 | .container .grid_5 { width:380px; } 115 | .container .grid_6 { width:460px; } 116 | .container .grid_7 { width:540px; } 117 | .container .grid_8 { width:620px; } 118 | .container .grid_9 { width:700px; } 119 | .container .grid_10 { width:780px; } 120 | .container .grid_11 { width:860px; } 121 | .container .grid_12 { width:940px; } 122 | 123 | .container .prefix_1 { padding-left:80px; } 124 | .container .prefix_2 { padding-left:160px; } 125 | .container .prefix_3 { padding-left:240px; } 126 | .container .prefix_4 { padding-left:320px; } 127 | .container .prefix_5 { padding-left:400px; } 128 | .container .prefix_6 { padding-left:480px; } 129 | .container .prefix_7 { padding-left:560px; } 130 | .container .prefix_8 { padding-left:640px; } 131 | .container .prefix_9 { padding-left:720px; } 132 | .container .prefix_10 { padding-left:800px; } 133 | .container .prefix_11 { padding-left:880px; } 134 | 135 | .container .push_1 { left:80px; } 136 | .container .push_2 { left:160px; } 137 | .container .push_3 { left:240px; } 138 | .container .push_4 { left:320px; } 139 | .container .push_5 { left:400px; } 140 | .container .push_6 { left:480px; } 141 | .container .push_7 { left:560px; } 142 | .container .push_8 { left:640px; } 143 | .container .push_9 { left:720px; } 144 | .container .push_10 { left:800px; } 145 | .container .push_11 { left:880px; } 146 | } 147 | @media only screen and (min-width: 768px) and (max-width: 959px) { 148 | .container{width:768px;} 149 | .container .grid_1 {width:44px;} 150 | .container .grid_2 {width:108px;} 151 | .container .grid_3 {width:172px;} 152 | .container .grid_4 {width:236px;} 153 | .container .grid_5 {width:300px;} 154 | .container .grid_6 {width:364px;} 155 | .container .grid_7 {width:428px;} 156 | .container .grid_8 {width:492px;} 157 | .container .grid_9 {width:556px;} 158 | .container .grid_10 {width:620px;} 159 | .container .grid_11 {width:684px;} 160 | .container .grid_12 {width:748px;} 161 | 162 | .container .prefix_1 { padding-left:64px; } 163 | .container .prefix_2 { padding-left:128px; } 164 | .container .prefix_3 { padding-left:192px; } 165 | .container .prefix_4 { padding-left:256px; } 166 | .container .prefix_5 { padding-left:320px; } 167 | .container .prefix_6 { padding-left:384px; } 168 | .container .prefix_7 { padding-left:448px; } 169 | .container .prefix_8 { padding-left:512px; } 170 | .container .prefix_9 { padding-left:576px; } 171 | .container .prefix_10 { padding-left:640px; } 172 | .container .prefix_11 { padding-left:704px; } 173 | 174 | .container .push_1 { left:64px; } 175 | .container .push_2 { left:128px; } 176 | .container .push_3 { left:192px; } 177 | .container .push_4 { left:256px; } 178 | .container .push_5 { left:320px; } 179 | .container .push_6 { left:384px; } 180 | .container .push_7 { left:448px; } 181 | .container .push_8 { left:512px; } 182 | .container .push_9 { left:576px; } 183 | .container .push_10 { left:640px; } 184 | .container .push_11 { left:704px; } 185 | } 186 | @media only screen and (min-width: 480px) and (max-width: 767px) { 187 | .container{width:460px;} 188 | .container .grid_1,.container .grid_2,.container .grid_3,.container .grid_4,.container .grid_5,.container .grid_6,.container .grid_7,.container .grid_8,.container .grid_9,.container .grid_10,.container .grid_11,.container .grid_12 { width:100%;display:block;float:none;position:relative;margin-left:0px;margin-right:0px; } 189 | .ipad-only{display:block;} 190 | .desktop-only{display:none;} 191 | 192 | .container .prefix_1 { padding-left:0; } 193 | .container .prefix_2 { padding-left:0; } 194 | .container .prefix_3 { padding-left:0; } 195 | .container .prefix_4 { padding-left:0; } 196 | .container .prefix_5 { padding-left:0; } 197 | .container .prefix_6 { padding-left:0; } 198 | .container .prefix_7 { padding-left:0; } 199 | .container .prefix_8 { padding-left:0; } 200 | .container .prefix_9 { padding-left:0; } 201 | .container .prefix_10 { padding-left:0; } 202 | .container .prefix_11 { padding-left:0; } 203 | .container .push_1 { left:0; } 204 | .container .push_2 { left:0; } 205 | .container .push_3 { left:0; } 206 | .container .push_4 { left:0; } 207 | .container .push_5 { left:0; } 208 | .container .push_6 { left:0; } 209 | .container .push_7 { left:0; } 210 | .container .push_8 { left:0; } 211 | .container .push_9 { left:0; } 212 | .container .push_10 { left:0; } 213 | .container .push_11 { left:0; } 214 | 215 | } 216 | @media only screen and (min-width: 320px) and (max-width: 479px) { 217 | .container{width:280px;} 218 | .container .grid_1,.container .grid_2,.container .grid_3,.container .grid_4,.container .grid_5,.container .grid_6,.container .grid_7,.container .grid_8,.container .grid_9,.container .grid_10,.container .grid_11,.container .grid_12 { width:100%;display:block;float:none;position:relative;margin-left:0px;margin-right:0px; } 219 | .mobile-only{display:block;} 220 | .desktop-only{display:none;} 221 | 222 | .container .prefix_1 { padding-left:0; } 223 | .container .prefix_2 { padding-left:0; } 224 | .container .prefix_3 { padding-left:0; } 225 | .container .prefix_4 { padding-left:0; } 226 | .container .prefix_5 { padding-left:0; } 227 | .container .prefix_6 { padding-left:0; } 228 | .container .prefix_7 { padding-left:0; } 229 | .container .prefix_8 { padding-left:0; } 230 | .container .prefix_9 { padding-left:0; } 231 | .container .prefix_10 { padding-left:0; } 232 | .container .prefix_11 { padding-left:0; } 233 | 234 | .container .push_1 { left:0; } 235 | .container .push_2 { left:0; } 236 | .container .push_3 { left:0; } 237 | .container .push_4 { left:0; } 238 | .container .push_5 { left:0; } 239 | .container .push_6 { left:0; } 240 | .container .push_7 { left:0; } 241 | .container .push_8 { left:0; } 242 | .container .push_9 { left:0; } 243 | .container .push_10 { left:0; } 244 | .container .push_11 { left:0; } 245 | } 246 | @media print{ 247 | body{width:95%;} 248 | } 249 | 250 | .margin_top_5 { margin-top:5px !important; } 251 | .margin_top_15 { margin-top:15px !important; } 252 | .margin_top_25 { margin-top:25px !important; } 253 | .margin_top_30 { margin-top:30px !important; } 254 | .margin_top_35 { margin-top:35px !important; } 255 | .margin_top_45 { margin-top:45px !important; } 256 | .margin_top_60 { margin-top:60px !important; } 257 | .margin_top_90 { margin-top:90px !important; } 258 | .margin_top_120 { margin-top:120px !important; } 259 | 260 | .margin_bottom_5 { margin-bottom:5px !important; } 261 | .margin_bottom_15 { margin-bottom:15px !important; } 262 | .margin_bottom_25 { margin-bottom:25px !important; } 263 | .margin_bottom_30 { margin-bottom:30px !important; } 264 | .margin_bottom_35 { margin-bottom:35px !important; } 265 | .margin_bottom_45 { margin-bottom:45px !important; } 266 | .margin_bottom_60 { margin-bottom:60px !important; } 267 | .margin_bottom_90 { margin-bottom:90px !important; } 268 | .margin_bottom_120 { margin-bottom:120px !important; } 269 | 270 | .padding_top_15 { padding-top:15px !important; } 271 | .padding_top_30 { padding-top:30px !important; } 272 | .padding_top_45 { padding-top:45px !important; } 273 | .padding_top_60 { padding-top:60px !important; } 274 | .padding_top_90 { padding-top:90px !important; } 275 | .padding_top_120 { padding-top:120px !important; } 276 | .padding_top_130 { padding-top:130px !important; } 277 | 278 | .padding_bottom_15 { padding-bottom:15px !important; } 279 | .padding_bottom_30 { padding-bottom:30px !important; } 280 | .padding_bottom_45 { padding-bottom:45px !important; } 281 | .padding_bottom_60 { padding-bottom:60px !important; } 282 | .padding_bottom_90 { padding-bottom:90px !important; } 283 | .padding_bottom_120 { padding-bottom:120px !important; } 284 | .padding_bottom_130 { padding-bottom:130px !important; } 285 | 286 | .clear { clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0; } 287 | .clearfix:before, 288 | .clearfix:after { content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0; } 289 | .clearfix:after { clear:both; } 290 | .clearfix { zoom:1; } 291 | 292 | --------------------------------------------------------------------------------