├── .gitignore ├── LICENSE.txt ├── README.md ├── css ├── mnml.css └── mnml.min.css ├── index.html ├── index.js ├── package.json └── src ├── _base.css ├── _debug.css ├── _grid.css ├── _media-queries.css ├── _styles.css ├── _typography.css ├── _variables.css ├── lib └── _normalize.css └── mnml.css /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ 2 | npm-debug.log 3 | node_modules 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | License 2 | 3 | The MIT License (MIT) 4 | 5 | Copyright (c) 2016 @mrmrs 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in 15 | all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 23 | THE SOFTWARE. 24 | 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MNML 2 | 3 | ## What is this? 4 | 5 | View the project page at [http://mn-ml.cc](http://mn-ml.cc "MNML - A light-weight responsive html5 boilerplate.") 6 | 7 | MNML is a highly unopinionated starting point for prototyping responsive HTML5 projects with PostCSS. 8 | Uses browser-sync to create a livereloading server for rapidly prototyping sites. 9 | 10 | ## Features 11 | 12 | * Css compiling with postcss 13 | * Css minification 14 | * Autoprefixer (automatically adds appropriate vendor prefixes) 15 | * Browser reload on filesave using browser-sync 16 | * Local server for serving a static site 17 | * Uses normalize.css 18 | 19 | ## Getting started 20 | 21 | ### Instructions 22 | 23 | * Clone the repo from GitHub and make it your own. 24 | * In terminal run each line as a separate command 25 | 26 | ```https 27 | git clone https://github.com/mrmrs/mnml.git yourNewRepoName 28 | ``` 29 | 30 | ```ssh 31 | git clone git@github.com:mrmrs/mnml.git yourNewRepoName 32 | ``` 33 | 34 | Then 35 | 36 | ```bash 37 | cd yourNewRepoName 38 | rm -rf .git 39 | git init 40 | git remote add origin git@github.com:yourUserName/yourNewRepoName.git 41 | ``` 42 | 43 | * git remote -v will allow you to check that you have changed the remote origin correctly. The output should look like: 44 | ```bash 45 | origin git@github.com:yourUserName/yourNewRepoName.git (fetch) 46 | origin git@github.com:yourUserName/yourNewRepoName.git (push) 47 | ``` 48 | 49 | ## Dev environment 50 | To set up a convenient dev environment run this at the root of mnml 51 | 52 | ```bash 53 | npm install && npm start 54 | ``` 55 | 56 | 57 | ## Directory structure 58 | ``` 59 | mnml/ 60 | ├── README.md 61 | ├── css 62 | │   ├── mnml.css 63 | │   └── mnml.min.css 64 | ├── index.html 65 | ├── index.js 66 | ├── package.json 67 | └── src 68 | ├── _base.css 69 | ├── _debug.css 70 | ├── _grid.css 71 | ├── _media-queries.css 72 | ├── _styles.css 73 | ├── _typography.css 74 | ├── _variables.css 75 | ├── lib 76 | │   └── _normalize.css 77 | └── mnml.css 78 | 79 | ``` 80 | 81 | # Author 82 | 83 | [MRMRS](http://mrmrs.io "Adam Morse - Designer Developer") 84 | 85 | # Contributors 86 | 87 | - @xiaogwu 88 | - @cbracco 89 | - @franciscogo 90 | - @nolastan 91 | - @markphd 92 | - @amirahaile 93 | - @roylodder 94 | - @shakyShane 95 | - @andrew 96 | - @filipelinhares 97 | - @mattcdowning 98 | - @cwonrails 99 | - @mrzool 100 | 101 | # License 102 | 103 | The MIT License (MIT) 104 | 105 | Copyright (c) 2016 @mrmrs 106 | 107 | Permission is hereby granted, free of charge, to any person obtaining a copy 108 | of this software and associated documentation files (the "Software"), to deal 109 | in the Software without restriction, including without limitation the rights 110 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 111 | copies of the Software, and to permit persons to whom the Software is 112 | furnished to do so, subject to the following conditions: 113 | 114 | The above copyright notice and this permission notice shall be included in 115 | all copies or substantial portions of the Software. 116 | 117 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 118 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 119 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 120 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 121 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 122 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 123 | THE SOFTWARE. 124 | 125 | -------------------------------------------------------------------------------- /css/mnml.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | MNML by @mrmrs_ 4 | All these files are pretty much empty! 5 | You get to fill them out all by yourself. 6 | 7 | */ 8 | 9 | /*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ 10 | 11 | /** 12 | * 1. Change the default font family in all browsers (opinionated). 13 | * 2. Correct the line height in all browsers. 14 | * 3. Prevent adjustments of font size after orientation changes in IE and iOS. 15 | */ 16 | 17 | html { 18 | font-family: sans-serif; /* 1 */ 19 | line-height: 1.15; /* 2 */ 20 | -ms-text-size-adjust: 100%; /* 3 */ 21 | -webkit-text-size-adjust: 100%; /* 3 */ 22 | } 23 | 24 | /** 25 | * Remove the margin in all browsers (opinionated). 26 | */ 27 | 28 | body { 29 | margin: 0; 30 | } 31 | 32 | /* HTML5 display definitions 33 | ========================================================================== */ 34 | 35 | /** 36 | * Add the correct display in IE 9-. 37 | * 1. Add the correct display in Edge, IE, and Firefox. 38 | * 2. Add the correct display in IE. 39 | */ 40 | 41 | article, 42 | aside, 43 | details, /* 1 */ 44 | figcaption, 45 | figure, 46 | footer, 47 | header, 48 | main, /* 2 */ 49 | menu, 50 | nav, 51 | section, 52 | summary { /* 1 */ 53 | display: block; 54 | } 55 | 56 | /** 57 | * Add the correct display in IE 9-. 58 | */ 59 | 60 | audio, 61 | canvas, 62 | progress, 63 | video { 64 | display: inline-block; 65 | } 66 | 67 | /** 68 | * Add the correct display in iOS 4-7. 69 | */ 70 | 71 | audio:not([controls]) { 72 | display: none; 73 | height: 0; 74 | } 75 | 76 | /** 77 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 78 | */ 79 | 80 | progress { 81 | vertical-align: baseline; 82 | } 83 | 84 | /** 85 | * Add the correct display in IE 10-. 86 | * 1. Add the correct display in IE. 87 | */ 88 | 89 | template, /* 1 */ 90 | [hidden] { 91 | display: none; 92 | } 93 | 94 | /* Links 95 | ========================================================================== */ 96 | 97 | /** 98 | * 1. Remove the gray background on active links in IE 10. 99 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 100 | */ 101 | 102 | a { 103 | background-color: transparent; /* 1 */ 104 | -webkit-text-decoration-skip: objects; /* 2 */ 105 | } 106 | 107 | /** 108 | * Remove the outline on focused links when they are also active or hovered 109 | * in all browsers (opinionated). 110 | */ 111 | 112 | a:active, 113 | a:hover { 114 | outline-width: 0; 115 | } 116 | 117 | /* Text-level semantics 118 | ========================================================================== */ 119 | 120 | /** 121 | * 1. Remove the bottom border in Firefox 39-. 122 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 123 | */ 124 | 125 | abbr[title] { 126 | border-bottom: none; /* 1 */ 127 | text-decoration: underline; /* 2 */ 128 | text-decoration: underline dotted; /* 2 */ 129 | } 130 | 131 | /** 132 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 133 | */ 134 | 135 | b, 136 | strong { 137 | font-weight: inherit; 138 | } 139 | 140 | /** 141 | * Add the correct font weight in Chrome, Edge, and Safari. 142 | */ 143 | 144 | b, 145 | strong { 146 | font-weight: bolder; 147 | } 148 | 149 | /** 150 | * Add the correct font style in Android 4.3-. 151 | */ 152 | 153 | dfn { 154 | font-style: italic; 155 | } 156 | 157 | /** 158 | * Correct the font size and margin on `h1` elements within `section` and 159 | * `article` contexts in Chrome, Firefox, and Safari. 160 | */ 161 | 162 | h1 { 163 | font-size: 2em; 164 | margin: 0.67em 0; 165 | } 166 | 167 | /** 168 | * Add the correct background and color in IE 9-. 169 | */ 170 | 171 | mark { 172 | background-color: #ff0; 173 | color: #000; 174 | } 175 | 176 | /** 177 | * Add the correct font size in all browsers. 178 | */ 179 | 180 | small { 181 | font-size: 80%; 182 | } 183 | 184 | /** 185 | * Prevent `sub` and `sup` elements from affecting the line height in 186 | * all browsers. 187 | */ 188 | 189 | sub, 190 | sup { 191 | font-size: 75%; 192 | line-height: 0; 193 | position: relative; 194 | vertical-align: baseline; 195 | } 196 | 197 | sub { 198 | bottom: -0.25em; 199 | } 200 | 201 | sup { 202 | top: -0.5em; 203 | } 204 | 205 | /* Embedded content 206 | ========================================================================== */ 207 | 208 | /** 209 | * Remove the border on images inside links in IE 10-. 210 | */ 211 | 212 | img { 213 | border-style: none; 214 | } 215 | 216 | /** 217 | * Hide the overflow in IE. 218 | */ 219 | 220 | svg:not(:root) { 221 | overflow: hidden; 222 | } 223 | 224 | /* Grouping content 225 | ========================================================================== */ 226 | 227 | /** 228 | * 1. Correct the inheritance and scaling of font size in all browsers. 229 | * 2. Correct the odd `em` font sizing in all browsers. 230 | */ 231 | 232 | code, 233 | kbd, 234 | pre, 235 | samp { 236 | font-family: monospace, monospace; /* 1 */ 237 | font-size: 1em; /* 2 */ 238 | } 239 | 240 | /** 241 | * Add the correct margin in IE 8. 242 | */ 243 | 244 | figure { 245 | margin: 1em 40px; 246 | } 247 | 248 | /** 249 | * 1. Add the correct box sizing in Firefox. 250 | * 2. Show the overflow in Edge and IE. 251 | */ 252 | 253 | hr { 254 | box-sizing: content-box; /* 1 */ 255 | height: 0; /* 1 */ 256 | overflow: visible; /* 2 */ 257 | } 258 | 259 | /* Forms 260 | ========================================================================== */ 261 | 262 | /** 263 | * 1. Change font properties to `inherit` in all browsers (opinionated). 264 | * 2. Remove the margin in Firefox and Safari. 265 | */ 266 | 267 | button, 268 | input, 269 | optgroup, 270 | select, 271 | textarea { 272 | font: inherit; /* 1 */ 273 | margin: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Restore the font weight unset by the previous rule. 278 | */ 279 | 280 | optgroup { 281 | font-weight: bold; 282 | } 283 | 284 | /** 285 | * Show the overflow in IE. 286 | * 1. Show the overflow in Edge. 287 | */ 288 | 289 | button, 290 | input { /* 1 */ 291 | overflow: visible; 292 | } 293 | 294 | /** 295 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 296 | * 1. Remove the inheritance of text transform in Firefox. 297 | */ 298 | 299 | button, 300 | select { /* 1 */ 301 | text-transform: none; 302 | } 303 | 304 | /** 305 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 306 | * controls in Android 4. 307 | * 2. Correct the inability to style clickable types in iOS and Safari. 308 | */ 309 | 310 | button, 311 | html [type="button"], /* 1 */ 312 | [type="reset"], 313 | [type="submit"] { 314 | -webkit-appearance: button; /* 2 */ 315 | } 316 | 317 | /** 318 | * Remove the inner border and padding in Firefox. 319 | */ 320 | 321 | button::-moz-focus-inner, 322 | [type="button"]::-moz-focus-inner, 323 | [type="reset"]::-moz-focus-inner, 324 | [type="submit"]::-moz-focus-inner { 325 | border-style: none; 326 | padding: 0; 327 | } 328 | 329 | /** 330 | * Restore the focus styles unset by the previous rule. 331 | */ 332 | 333 | button:-moz-focusring, 334 | [type="button"]:-moz-focusring, 335 | [type="reset"]:-moz-focusring, 336 | [type="submit"]:-moz-focusring { 337 | outline: 1px dotted ButtonText; 338 | } 339 | 340 | /** 341 | * Change the border, margin, and padding in all browsers (opinionated). 342 | */ 343 | 344 | fieldset { 345 | border: 1px solid #c0c0c0; 346 | margin: 0 2px; 347 | padding: 0.35em 0.625em 0.75em; 348 | } 349 | 350 | /** 351 | * 1. Correct the text wrapping in Edge and IE. 352 | * 2. Correct the color inheritance from `fieldset` elements in IE. 353 | * 3. Remove the padding so developers are not caught out when they zero out 354 | * `fieldset` elements in all browsers. 355 | */ 356 | 357 | legend { 358 | box-sizing: border-box; /* 1 */ 359 | color: inherit; /* 2 */ 360 | display: table; /* 1 */ 361 | max-width: 100%; /* 1 */ 362 | padding: 0; /* 3 */ 363 | white-space: normal; /* 1 */ 364 | } 365 | 366 | /** 367 | * Remove the default vertical scrollbar in IE. 368 | */ 369 | 370 | textarea { 371 | overflow: auto; 372 | } 373 | 374 | /** 375 | * 1. Add the correct box sizing in IE 10-. 376 | * 2. Remove the padding in IE 10-. 377 | */ 378 | 379 | [type="checkbox"], 380 | [type="radio"] { 381 | box-sizing: border-box; /* 1 */ 382 | padding: 0; /* 2 */ 383 | } 384 | 385 | /** 386 | * Correct the cursor style of increment and decrement buttons in Chrome. 387 | */ 388 | 389 | [type="number"]::-webkit-inner-spin-button, 390 | [type="number"]::-webkit-outer-spin-button { 391 | height: auto; 392 | } 393 | 394 | /** 395 | * 1. Correct the odd appearance in Chrome and Safari. 396 | * 2. Correct the outline style in Safari. 397 | */ 398 | 399 | [type="search"] { 400 | -webkit-appearance: textfield; /* 1 */ 401 | outline-offset: -2px; /* 2 */ 402 | } 403 | 404 | /** 405 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. 406 | */ 407 | 408 | [type="search"]::-webkit-search-cancel-button, 409 | [type="search"]::-webkit-search-decoration { 410 | -webkit-appearance: none; 411 | } 412 | 413 | /** 414 | * Correct the text style of placeholders in Chrome, Edge, and Safari. 415 | */ 416 | 417 | ::-webkit-input-placeholder { 418 | color: inherit; 419 | opacity: 0.54; 420 | } 421 | 422 | /** 423 | * 1. Correct the inability to style clickable types in iOS and Safari. 424 | * 2. Change font properties to `inherit` in Safari. 425 | */ 426 | 427 | ::-webkit-file-upload-button { 428 | -webkit-appearance: button; /* 1 */ 429 | font: inherit; /* 2 */ 430 | } 431 | 432 | /* 433 | VARIABLES 434 | Add your variables to the :root selector. 435 | Then reference them in your other css modules like so 436 | 437 | :root { 438 | --spacing-small: 32px; 439 | } 440 | 441 | .someClass { 442 | padding: var(--spacing-small) 443 | } 444 | 445 | */ 446 | 447 | :root { 448 | 449 | } 450 | /* ========================================================================== 451 | MEDIA QUERIES 452 | ========================================================================== */ 453 | 454 | /* 455 | 456 | These breakpoints can be extended or modified to your hearts content 457 | 458 | You can use like this: 459 | 460 | @media (--breakpoint-medium-and-up) { 461 | Your breakpoint styles here. 462 | Don't forget to make them mobile first :) 463 | } 464 | 465 | You can also use media queries to target more than just a devices window width. 466 | Checkout the css4 spec for more info. 467 | 468 | 469 | */ 470 | 471 | html, body { height: 100%; } 472 | 473 | /* ========================================================================== 474 | SITE STYLES 475 | 476 | - Mobile first 477 | - Medium and Large 478 | - Medium 479 | - Large 480 | ========================================================================== */ 481 | 482 | 483 | 484 | 485 | /* Mobile-first classes here (No media query needed, these styles are global) 486 | ========================================================================== */ 487 | 488 | 489 | 490 | 491 | /* Medium and Up - Targets everything larger than mobile 492 | ========================================================================== */ 493 | 494 | @media screen and (min-width: 32em) { 495 | 496 | } 497 | 498 | 499 | 500 | 501 | /* Medium - only targets 1st breakpoint. Styles 502 | ========================================================================== */ 503 | 504 | @media screen and (min-width: 32em) and (max-width: 64em) { 505 | 506 | } 507 | 508 | 509 | 510 | 511 | /* Large - only targets 2nd breakpoint. 512 | ========================================================================== */ 513 | 514 | @media screen and (min-width: 64em) { 515 | 516 | } 517 | 518 | /* 519 | 520 | DEBUGGING 521 | If you want to debug your layout you can uncomment the following 522 | partial to apply an outline of a different color 523 | to every element on the page 524 | 525 | */ 526 | 527 | /* @import "./_debug"; */ 528 | -------------------------------------------------------------------------------- /css/mnml.min.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */progress,sub,sup{vertical-align:baseline}button,hr,input{overflow:visible}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}body,html{height:100%} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MNML 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

MNML

18 |

It's website building time!

19 |
20 |
21 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // dependencies for mnml 2 | 3 | var fs = require("fs") 4 | var autoprefixer = require("autoprefixer") 5 | var postcss = require("postcss") 6 | var atImport = require("postcss-import") 7 | var cssvariables = require('postcss-css-variables') 8 | var compressor = require('node-minify') 9 | var conditionals = require('postcss-conditionals') 10 | var customMedia = require("postcss-custom-media") 11 | 12 | // css to be processed 13 | var css = fs.readFileSync("src/mnml.css", "utf8") 14 | 15 | // process css 16 | output = postcss() 17 | .use(atImport()) 18 | .use(cssvariables()) 19 | .use(conditionals()) 20 | .use(customMedia()) 21 | .use(autoprefixer()) 22 | .process(css, { 23 | from: "./src/mnml.css", 24 | to: "./css/mnml.css" 25 | }).then(function(output) { 26 | fs.writeFile("css/mnml.css", output, 'utf-8') 27 | }); 28 | 29 | 30 | // Using Clean-css for CSS 31 | new compressor.minify({ 32 | type: 'clean-css', 33 | fileIn: './css/mnml.css', 34 | fileOut: './css/mnml.min.css' 35 | }); 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mn-ml", 3 | "version": "3.0.6", 4 | "description": "Minimal template for building responsive prototypes with html5 and postcss.", 5 | "homepage": "http://mn-ml.cc", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/mrmrs/mnml.git" 9 | }, 10 | "keywords": [ 11 | "html5", 12 | "css", 13 | "readability", 14 | "responsive design", 15 | "rwd", 16 | "postcss" 17 | ], 18 | "author": "mrmrs", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/mrmrs/mnml/issues", 22 | "email": "hi@mrmrs.cc" 23 | }, 24 | "devDependencies": { 25 | "autoprefixer": "^9.1.5", 26 | "browser-sync": "^2.24.7", 27 | "clean-css": "^4.2.1", 28 | "node-minify": "^3.5.0", 29 | "parallelshell": "^3.0.2", 30 | "postcss": "^7.0.5", 31 | "postcss-browser-reporter": "^0.5.0", 32 | "postcss-conditionals": "^2.1.0", 33 | "postcss-css-variables": "^0.10.0", 34 | "postcss-custom-media": "^7.0.4", 35 | "postcss-import": "^12.0.0", 36 | "watch": "^1.0.2" 37 | }, 38 | "scripts": { 39 | "start": "parallelshell 'npm run build:css' 'npm run server'", 40 | "build:css": "watch 'node index.js' src/", 41 | "server": "browser-sync start --server --files 'css/*.css, *.html'" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/_base.css: -------------------------------------------------------------------------------- 1 | html, body { height: 100%; } 2 | -------------------------------------------------------------------------------- /src/_debug.css: -------------------------------------------------------------------------------- 1 | body { outline: 1px solid #2980B9!important; } 2 | article { outline: 1px solid #3498DB!important; } 3 | nav { outline: 1px solid #0088C3!important; } 4 | aside { outline: 1px solid #33A0CE!important; } 5 | section { outline: 1px solid #66B8DA!important; } 6 | header { outline: 1px solid #99CFE7!important; } 7 | footer { outline: 1px solid #CCE7F3!important; } 8 | h1 { outline: 1px solid #162544!important; } 9 | h2 { outline: 1px solid #314E6E!important; } 10 | h3 { outline: 1px solid #3E5E85!important; } 11 | h4 { outline: 1px solid #449BAF!important; } 12 | h5 { outline: 1px solid #C7D1CB!important; } 13 | h6 { outline: 1px solid #4371D0!important; } 14 | main { outline: 1px solid #2F4F90!important; } 15 | address { outline: 1px solid #1A2C51!important; } 16 | div { outline: 1px solid #036CDB!important; } 17 | 18 | 19 | p { outline: 1px solid #AC050B!important; } 20 | hr { outline: 1px solid #FF063F!important; } 21 | pre { outline: 1px solid #850440!important; } 22 | blockquote { outline: 1px solid #F1B8E7!important; } 23 | ol { outline: 1px solid #FF050C!important; } 24 | ul { outline: 1px solid #D90416!important; } 25 | li { outline: 1px solid #D90416!important; } 26 | dl { outline: 1px solid #FD3427!important; } 27 | dt { outline: 1px solid #FF0043!important; } 28 | dd { outline: 1px solid #E80174!important; } 29 | figure { outline: 1px solid #FF00BB!important; } 30 | figcaption { outline: 1px solid #BF0032!important; } 31 | 32 | 33 | 34 | table { outline: 1px solid #00CC99!important; } 35 | caption { outline: 1px solid #37FFC4!important; } 36 | thead { outline: 1px solid #98DACA!important; } 37 | tbody { outline: 1px solid #64A7A0!important; } 38 | tfoot { outline: 1px solid #22746B!important; } 39 | tr { outline: 1px solid #86C0B2!important; } 40 | th { outline: 1px solid #A1E7D6!important; } 41 | td { outline: 1px solid #3F5A54!important; } 42 | col { outline: 1px solid #6C9A8F!important; } 43 | colgroup { outline: 1px solid #6C9A9D!important; } 44 | 45 | 46 | button { outline: 1px solid #DA8301!important; } 47 | datalist { outline: 1px solid #C06000!important; } 48 | fieldset { outline: 1px solid #D95100!important; } 49 | form { outline: 1px solid #D23600!important; } 50 | input { outline: 1px solid #FCA600!important; } 51 | keygen { outline: 1px solid #B31E00!important; } 52 | label { outline: 1px solid #EE8900!important; } 53 | legend { outline: 1px solid #DE6D00!important; } 54 | meter { outline: 1px solid #E8630C!important; } 55 | optgroup { outline: 1px solid #B33600!important; } 56 | option { outline: 1px solid #FF8A00!important; } 57 | output { outline: 1px solid #FF9619!important; } 58 | progress { outline: 1px solid #E57C00!important; } 59 | select { outline: 1px solid #E26E0F!important; } 60 | textarea { outline: 1px solid #CC5400!important; } 61 | 62 | 63 | 64 | details { outline: 1px solid #33848F!important; } 65 | summary { outline: 1px solid #60A1A6!important; } 66 | command { outline: 1px solid #438DA1!important; } 67 | menu { outline: 1px solid #449DA6!important; } 68 | 69 | 70 | 71 | del { outline: 1px solid #BF0000!important; } 72 | ins { outline: 1px solid #400000!important; } 73 | 74 | 75 | 76 | img { outline: 1px solid #22746B!important; } 77 | iframe { outline: 1px solid #64A7A0!important; } 78 | embed { outline: 1px solid #98DACA!important; } 79 | object { outline: 1px solid #00CC99!important; } 80 | param { outline: 1px solid #37FFC4!important; } 81 | video { outline: 1px solid #6EE866!important; } 82 | audio { outline: 1px solid #027353!important; } 83 | source { outline: 1px solid #012426!important; } 84 | canvas { outline: 1px solid #A2F570!important; } 85 | track { outline: 1px solid #59A600!important; } 86 | map { outline: 1px solid #7BE500!important; } 87 | area { outline: 1px solid #305900!important; } 88 | 89 | 90 | 91 | a { outline: 1px solid #FF62AB!important; } 92 | em { outline: 1px solid #800B41!important; } 93 | strong { outline: 1px solid #FF1583!important; } 94 | i { outline: 1px solid #803156!important; } 95 | b { outline: 1px solid #CC1169!important; } 96 | u { outline: 1px solid #FF0430!important; } 97 | s { outline: 1px solid #F805E3!important; } 98 | small { outline: 1px solid #D107B2!important; } 99 | abbr { outline: 1px solid #4A0263!important; } 100 | q { outline: 1px solid #240018!important; } 101 | cite { outline: 1px solid #64003C!important; } 102 | dfn { outline: 1px solid #B4005A!important; } 103 | sub { outline: 1px solid #DBA0C8!important; } 104 | sup { outline: 1px solid #CC0256!important; } 105 | time { outline: 1px solid #D6606D!important; } 106 | code { outline: 1px solid #E04251!important; } 107 | kbd { outline: 1px solid #5E001F!important; } 108 | samp { outline: 1px solid #9C0033!important; } 109 | var { outline: 1px solid #D90047!important; } 110 | mark { outline: 1px solid #FF0053!important; } 111 | bdi { outline: 1px solid #BF3668!important; } 112 | bdo { outline: 1px solid #6F1400!important; } 113 | ruby { outline: 1px solid #FF7B93!important; } 114 | rt { outline: 1px solid #FF2F54!important; } 115 | rp { outline: 1px solid #803E49!important; } 116 | span { outline: 1px solid #CC2643!important; } 117 | br { outline: 1px solid #DB687D!important; } 118 | wbr { outline: 1px solid #DB175B!important; } 119 | *:hover, 120 | *:focus { 121 | outline: 2px solid; 122 | } 123 | -------------------------------------------------------------------------------- /src/_grid.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/mnml/b19c368cbf35f5ee480e1acf5bece539d36d4948/src/_grid.css -------------------------------------------------------------------------------- /src/_media-queries.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | MEDIA QUERIES 3 | ========================================================================== */ 4 | 5 | /* 6 | 7 | These breakpoints can be extended or modified to your hearts content 8 | 9 | You can use like this: 10 | 11 | @media (--breakpoint-medium-and-up) { 12 | Your breakpoint styles here. 13 | Don't forget to make them mobile first :) 14 | } 15 | 16 | You can also use media queries to target more than just a devices window width. 17 | Checkout the css4 spec for more info. 18 | 19 | 20 | */ 21 | 22 | 23 | @custom-media --breakpoint-medium-and-up screen and (min-width: 32em); 24 | @custom-media --breakpoint-medium screen and (min-width: 32em) and (max-width: 64em); 25 | @custom-media --breakpoint-large screen and (min-width: 64em); 26 | -------------------------------------------------------------------------------- /src/_styles.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | SITE STYLES 3 | 4 | - Mobile first 5 | - Medium and Large 6 | - Medium 7 | - Large 8 | ========================================================================== */ 9 | 10 | 11 | 12 | 13 | /* Mobile-first classes here (No media query needed, these styles are global) 14 | ========================================================================== */ 15 | 16 | 17 | 18 | 19 | /* Medium and Up - Targets everything larger than mobile 20 | ========================================================================== */ 21 | 22 | @media (--breakpoint-medium-and-up) { 23 | 24 | } 25 | 26 | 27 | 28 | 29 | /* Medium - only targets 1st breakpoint. Styles 30 | ========================================================================== */ 31 | 32 | @media (--breakpoint-medium) { 33 | 34 | } 35 | 36 | 37 | 38 | 39 | /* Large - only targets 2nd breakpoint. 40 | ========================================================================== */ 41 | 42 | @media (--breakpoint-large) { 43 | 44 | } 45 | -------------------------------------------------------------------------------- /src/_typography.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/mnml/b19c368cbf35f5ee480e1acf5bece539d36d4948/src/_typography.css -------------------------------------------------------------------------------- /src/_variables.css: -------------------------------------------------------------------------------- 1 | /* 2 | VARIABLES 3 | Add your variables to the :root selector. 4 | Then reference them in your other css modules like so 5 | 6 | :root { 7 | --spacing-small: 32px; 8 | } 9 | 10 | .someClass { 11 | padding: var(--spacing-small) 12 | } 13 | 14 | */ 15 | 16 | :root { 17 | 18 | } 19 | -------------------------------------------------------------------------------- /src/lib/_normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Correct the line height in all browsers. 6 | * 3. Prevent adjustments of font size after orientation changes in IE and iOS. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | line-height: 1.15; /* 2 */ 12 | -ms-text-size-adjust: 100%; /* 3 */ 13 | -webkit-text-size-adjust: 100%; /* 3 */ 14 | } 15 | 16 | /** 17 | * Remove the margin in all browsers (opinionated). 18 | */ 19 | 20 | body { 21 | margin: 0; 22 | } 23 | 24 | /* HTML5 display definitions 25 | ========================================================================== */ 26 | 27 | /** 28 | * Add the correct display in IE 9-. 29 | * 1. Add the correct display in Edge, IE, and Firefox. 30 | * 2. Add the correct display in IE. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, /* 1 */ 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | main, /* 2 */ 41 | menu, 42 | nav, 43 | section, 44 | summary { /* 1 */ 45 | display: block; 46 | } 47 | 48 | /** 49 | * Add the correct display in IE 9-. 50 | */ 51 | 52 | audio, 53 | canvas, 54 | progress, 55 | video { 56 | display: inline-block; 57 | } 58 | 59 | /** 60 | * Add the correct display in iOS 4-7. 61 | */ 62 | 63 | audio:not([controls]) { 64 | display: none; 65 | height: 0; 66 | } 67 | 68 | /** 69 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 70 | */ 71 | 72 | progress { 73 | vertical-align: baseline; 74 | } 75 | 76 | /** 77 | * Add the correct display in IE 10-. 78 | * 1. Add the correct display in IE. 79 | */ 80 | 81 | template, /* 1 */ 82 | [hidden] { 83 | display: none; 84 | } 85 | 86 | /* Links 87 | ========================================================================== */ 88 | 89 | /** 90 | * 1. Remove the gray background on active links in IE 10. 91 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 92 | */ 93 | 94 | a { 95 | background-color: transparent; /* 1 */ 96 | -webkit-text-decoration-skip: objects; /* 2 */ 97 | } 98 | 99 | /** 100 | * Remove the outline on focused links when they are also active or hovered 101 | * in all browsers (opinionated). 102 | */ 103 | 104 | a:active, 105 | a:hover { 106 | outline-width: 0; 107 | } 108 | 109 | /* Text-level semantics 110 | ========================================================================== */ 111 | 112 | /** 113 | * 1. Remove the bottom border in Firefox 39-. 114 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 115 | */ 116 | 117 | abbr[title] { 118 | border-bottom: none; /* 1 */ 119 | text-decoration: underline; /* 2 */ 120 | text-decoration: underline dotted; /* 2 */ 121 | } 122 | 123 | /** 124 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 125 | */ 126 | 127 | b, 128 | strong { 129 | font-weight: inherit; 130 | } 131 | 132 | /** 133 | * Add the correct font weight in Chrome, Edge, and Safari. 134 | */ 135 | 136 | b, 137 | strong { 138 | font-weight: bolder; 139 | } 140 | 141 | /** 142 | * Add the correct font style in Android 4.3-. 143 | */ 144 | 145 | dfn { 146 | font-style: italic; 147 | } 148 | 149 | /** 150 | * Correct the font size and margin on `h1` elements within `section` and 151 | * `article` contexts in Chrome, Firefox, and Safari. 152 | */ 153 | 154 | h1 { 155 | font-size: 2em; 156 | margin: 0.67em 0; 157 | } 158 | 159 | /** 160 | * Add the correct background and color in IE 9-. 161 | */ 162 | 163 | mark { 164 | background-color: #ff0; 165 | color: #000; 166 | } 167 | 168 | /** 169 | * Add the correct font size in all browsers. 170 | */ 171 | 172 | small { 173 | font-size: 80%; 174 | } 175 | 176 | /** 177 | * Prevent `sub` and `sup` elements from affecting the line height in 178 | * all browsers. 179 | */ 180 | 181 | sub, 182 | sup { 183 | font-size: 75%; 184 | line-height: 0; 185 | position: relative; 186 | vertical-align: baseline; 187 | } 188 | 189 | sub { 190 | bottom: -0.25em; 191 | } 192 | 193 | sup { 194 | top: -0.5em; 195 | } 196 | 197 | /* Embedded content 198 | ========================================================================== */ 199 | 200 | /** 201 | * Remove the border on images inside links in IE 10-. 202 | */ 203 | 204 | img { 205 | border-style: none; 206 | } 207 | 208 | /** 209 | * Hide the overflow in IE. 210 | */ 211 | 212 | svg:not(:root) { 213 | overflow: hidden; 214 | } 215 | 216 | /* Grouping content 217 | ========================================================================== */ 218 | 219 | /** 220 | * 1. Correct the inheritance and scaling of font size in all browsers. 221 | * 2. Correct the odd `em` font sizing in all browsers. 222 | */ 223 | 224 | code, 225 | kbd, 226 | pre, 227 | samp { 228 | font-family: monospace, monospace; /* 1 */ 229 | font-size: 1em; /* 2 */ 230 | } 231 | 232 | /** 233 | * Add the correct margin in IE 8. 234 | */ 235 | 236 | figure { 237 | margin: 1em 40px; 238 | } 239 | 240 | /** 241 | * 1. Add the correct box sizing in Firefox. 242 | * 2. Show the overflow in Edge and IE. 243 | */ 244 | 245 | hr { 246 | box-sizing: content-box; /* 1 */ 247 | height: 0; /* 1 */ 248 | overflow: visible; /* 2 */ 249 | } 250 | 251 | /* Forms 252 | ========================================================================== */ 253 | 254 | /** 255 | * 1. Change font properties to `inherit` in all browsers (opinionated). 256 | * 2. Remove the margin in Firefox and Safari. 257 | */ 258 | 259 | button, 260 | input, 261 | optgroup, 262 | select, 263 | textarea { 264 | font: inherit; /* 1 */ 265 | margin: 0; /* 2 */ 266 | } 267 | 268 | /** 269 | * Restore the font weight unset by the previous rule. 270 | */ 271 | 272 | optgroup { 273 | font-weight: bold; 274 | } 275 | 276 | /** 277 | * Show the overflow in IE. 278 | * 1. Show the overflow in Edge. 279 | */ 280 | 281 | button, 282 | input { /* 1 */ 283 | overflow: visible; 284 | } 285 | 286 | /** 287 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 288 | * 1. Remove the inheritance of text transform in Firefox. 289 | */ 290 | 291 | button, 292 | select { /* 1 */ 293 | text-transform: none; 294 | } 295 | 296 | /** 297 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 298 | * controls in Android 4. 299 | * 2. Correct the inability to style clickable types in iOS and Safari. 300 | */ 301 | 302 | button, 303 | html [type="button"], /* 1 */ 304 | [type="reset"], 305 | [type="submit"] { 306 | -webkit-appearance: button; /* 2 */ 307 | } 308 | 309 | /** 310 | * Remove the inner border and padding in Firefox. 311 | */ 312 | 313 | button::-moz-focus-inner, 314 | [type="button"]::-moz-focus-inner, 315 | [type="reset"]::-moz-focus-inner, 316 | [type="submit"]::-moz-focus-inner { 317 | border-style: none; 318 | padding: 0; 319 | } 320 | 321 | /** 322 | * Restore the focus styles unset by the previous rule. 323 | */ 324 | 325 | button:-moz-focusring, 326 | [type="button"]:-moz-focusring, 327 | [type="reset"]:-moz-focusring, 328 | [type="submit"]:-moz-focusring { 329 | outline: 1px dotted ButtonText; 330 | } 331 | 332 | /** 333 | * Change the border, margin, and padding in all browsers (opinionated). 334 | */ 335 | 336 | fieldset { 337 | border: 1px solid #c0c0c0; 338 | margin: 0 2px; 339 | padding: 0.35em 0.625em 0.75em; 340 | } 341 | 342 | /** 343 | * 1. Correct the text wrapping in Edge and IE. 344 | * 2. Correct the color inheritance from `fieldset` elements in IE. 345 | * 3. Remove the padding so developers are not caught out when they zero out 346 | * `fieldset` elements in all browsers. 347 | */ 348 | 349 | legend { 350 | box-sizing: border-box; /* 1 */ 351 | color: inherit; /* 2 */ 352 | display: table; /* 1 */ 353 | max-width: 100%; /* 1 */ 354 | padding: 0; /* 3 */ 355 | white-space: normal; /* 1 */ 356 | } 357 | 358 | /** 359 | * Remove the default vertical scrollbar in IE. 360 | */ 361 | 362 | textarea { 363 | overflow: auto; 364 | } 365 | 366 | /** 367 | * 1. Add the correct box sizing in IE 10-. 368 | * 2. Remove the padding in IE 10-. 369 | */ 370 | 371 | [type="checkbox"], 372 | [type="radio"] { 373 | box-sizing: border-box; /* 1 */ 374 | padding: 0; /* 2 */ 375 | } 376 | 377 | /** 378 | * Correct the cursor style of increment and decrement buttons in Chrome. 379 | */ 380 | 381 | [type="number"]::-webkit-inner-spin-button, 382 | [type="number"]::-webkit-outer-spin-button { 383 | height: auto; 384 | } 385 | 386 | /** 387 | * 1. Correct the odd appearance in Chrome and Safari. 388 | * 2. Correct the outline style in Safari. 389 | */ 390 | 391 | [type="search"] { 392 | -webkit-appearance: textfield; /* 1 */ 393 | outline-offset: -2px; /* 2 */ 394 | } 395 | 396 | /** 397 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. 398 | */ 399 | 400 | [type="search"]::-webkit-search-cancel-button, 401 | [type="search"]::-webkit-search-decoration { 402 | -webkit-appearance: none; 403 | } 404 | 405 | /** 406 | * Correct the text style of placeholders in Chrome, Edge, and Safari. 407 | */ 408 | 409 | ::-webkit-input-placeholder { 410 | color: inherit; 411 | opacity: 0.54; 412 | } 413 | 414 | /** 415 | * 1. Correct the inability to style clickable types in iOS and Safari. 416 | * 2. Change font properties to `inherit` in Safari. 417 | */ 418 | 419 | ::-webkit-file-upload-button { 420 | -webkit-appearance: button; /* 1 */ 421 | font: inherit; /* 2 */ 422 | } 423 | -------------------------------------------------------------------------------- /src/mnml.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | MNML by @mrmrs_ 4 | All these files are pretty much empty! 5 | You get to fill them out all by yourself. 6 | 7 | */ 8 | 9 | @import "./lib/_normalize"; 10 | 11 | @import "./_variables"; 12 | @import "./_media-queries"; 13 | 14 | @import "./_base"; 15 | @import "./_typography"; 16 | 17 | @import "./_styles"; 18 | 19 | /* 20 | 21 | DEBUGGING 22 | If you want to debug your layout you can uncomment the following 23 | partial to apply an outline of a different color 24 | to every element on the page 25 | 26 | */ 27 | 28 | /* @import "./_debug"; */ 29 | --------------------------------------------------------------------------------