├── docs ├── CNAME ├── favico.png ├── img │ ├── waffle-logo.png │ ├── waffle-logo@2x.png │ ├── waffle-grid-avatar.jpg │ ├── waffle-grid-example.jpg │ ├── waffle-grid-avatar@2x.jpg │ ├── waffle-grid-avatar@3x.jpg │ ├── waffle-grid-marketing.jpg │ ├── waffle-grid-example@2x.jpg │ ├── waffle-grid-example@3x.jpg │ ├── waffle-grid-marketing@2x.jpg │ ├── waffle-grid-marketing@3x.jpg │ ├── icon-menu.svg │ ├── npm-logo.svg │ ├── twitter-logo.svg │ ├── github-logo.svg │ ├── built-with-waffle.svg │ ├── icon-sliders.svg │ ├── icon-phone.svg │ ├── icon-feather.svg │ ├── waffle-logo.svg │ ├── waffle-logo-white.svg │ └── gh-corner-link.svg ├── apple-touch-icon.png ├── 404.html ├── stats.html ├── js │ └── functions.js ├── _includes │ ├── nav.html │ ├── footer.html │ ├── head.html │ └── example.html ├── _config.yml ├── _layouts │ └── html.html ├── index.html └── css │ ├── main.scss │ ├── reset.css │ └── normalize.css ├── .github ├── FUNDING.yml └── CONTRIBUTING.md ├── .travis.yml ├── bower.json ├── package.json ├── LICENSE ├── ISSUE_TEMPLATE.md ├── .gitignore ├── gulpfile.js ├── CODE_OF_CONDUCT.md ├── src └── waffle-grid.scss ├── README.md └── dist ├── waffle-grid.min.css └── waffle-grid.css /docs/CNAME: -------------------------------------------------------------------------------- 1 | waffle.pr1mer.tech -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | custom: https://paypal.me/lucasgruwez 2 | -------------------------------------------------------------------------------- /docs/favico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/favico.png -------------------------------------------------------------------------------- /docs/img/waffle-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/img/waffle-logo.png -------------------------------------------------------------------------------- /docs/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/img/waffle-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/img/waffle-logo@2x.png -------------------------------------------------------------------------------- /docs/img/waffle-grid-avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/img/waffle-grid-avatar.jpg -------------------------------------------------------------------------------- /docs/img/waffle-grid-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/img/waffle-grid-example.jpg -------------------------------------------------------------------------------- /docs/img/waffle-grid-avatar@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/img/waffle-grid-avatar@2x.jpg -------------------------------------------------------------------------------- /docs/img/waffle-grid-avatar@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/img/waffle-grid-avatar@3x.jpg -------------------------------------------------------------------------------- /docs/img/waffle-grid-marketing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/img/waffle-grid-marketing.jpg -------------------------------------------------------------------------------- /docs/img/waffle-grid-example@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/img/waffle-grid-example@2x.jpg -------------------------------------------------------------------------------- /docs/img/waffle-grid-example@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/img/waffle-grid-example@3x.jpg -------------------------------------------------------------------------------- /docs/img/waffle-grid-marketing@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/img/waffle-grid-marketing@2x.jpg -------------------------------------------------------------------------------- /docs/img/waffle-grid-marketing@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pr1mer-tech/waffle-grid/HEAD/docs/img/waffle-grid-marketing@3x.jpg -------------------------------------------------------------------------------- /docs/img/icon-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/img/npm-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "node" 4 | 5 | before_install: 6 | - npm install -g npm@4.3.0 7 | 8 | install: 9 | - npm install 10 | 11 | before_script: 12 | - npm install -g gulp 13 | 14 | script: 15 | - gulp build 16 | 17 | notifications: 18 | email: false 19 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | --- 2 | canonical: 404.html 3 | layout: html 4 | titl: Error 404 5 | --- 6 |
7 |
8 | Waffle logo 9 |

404

10 |

Something didn't quite go as planned...

11 |

Back to the homepage

12 |
13 |
14 | -------------------------------------------------------------------------------- /docs/img/twitter-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "waffle-grid", 3 | "description": "An easy to use flexbox grid system", 4 | "main": "dist/waffle-grid.min.css", 5 | "authors": [ 6 | "Lucas Gruwez " 7 | ], 8 | "license": "MIT", 9 | "keywords": [ 10 | "flexbox", 11 | "grid", 12 | "css" 13 | ], 14 | "homepage": "https://github.com/lucasgruwez/waffle-grid", 15 | "ignore": [ 16 | "**/.*", 17 | "node_modules", 18 | "bower_components", 19 | "test", 20 | "tests" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /docs/stats.html: -------------------------------------------------------------------------------- 1 | --- 2 | canonical: stats 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | Page Redirection 14 | 15 | 16 | 17 | If you are not redirected automatically, follow this link. 18 | 19 | 20 | -------------------------------------------------------------------------------- /docs/img/github-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/js/functions.js: -------------------------------------------------------------------------------- 1 | $(window).scroll(function() { 2 | var wScroll = $(this).scrollTop(); 3 | var jumpIn = $('header').height(); 4 | var jumpOut = $('#docs-cta').offset().top - wScroll - $(this).height(); 5 | if (wScroll >= jumpIn && jumpOut > 0) { 6 | $('.gist.js-activated').addClass('visible') 7 | } else { 8 | $('.gist.js-activated').removeClass('visible') 9 | } 10 | }) 11 | 12 | $('nav .hamburger').click(function () { 13 | $('.js-toggled').toggleClass('visible') 14 | }) 15 | 16 | $(document).ready(function () { 17 | $.getJSON("https://unpkg.com/waffle-grid?json", function (data) { 18 | var size = Math.round(data.size / 1000); 19 | $(".kb").text(size); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /docs/_includes/nav.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "waffle-grid", 3 | "version": "1.3.6", 4 | "description": "An easy to use flexbox grid system", 5 | "main": "dist/waffle-grid.min.css", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/lucasgruwez/waffle-grid" 9 | }, 10 | "scripts": { 11 | "start": "gulp", 12 | "test": "gulp build" 13 | }, 14 | "keywords": [ 15 | "flexbox", 16 | "grid", 17 | "css" 18 | ], 19 | "author": "Lucas Gruwez ", 20 | "license": "MIT", 21 | "devDependencies": { 22 | "gulp": "^3.9.1", 23 | "gulp-autoprefixer": "^4.0.0", 24 | "gulp-clean-css": "^3.0.3", 25 | "gulp-cssbeautify": "^0.1.3", 26 | "gulp-rename": "^1.2.2", 27 | "gulp-sass": "^3.1.0", 28 | "run-sequence": "^2.1.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /docs/img/built-with-waffle.svg: -------------------------------------------------------------------------------- 1 | built withbuilt withWaffle gridWaffle grid -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | # markdown adn highlighter 2 | markdown: kramdown 3 | highlighter: rouge 4 | 5 | # permalinks 6 | permalink: pretty 7 | 8 | # Server 9 | url: waffle.pr1mer.tech 10 | baseurl: / 11 | 12 | # Custom variables 13 | version: v1.3.6 14 | cdn: https://unpkg.com/waffle-grid 15 | repo: https://github.com/pr1mer-tech/waffle-grid 16 | download: https://github.com/pr1mer-tech/waffle-grid/releases/download/v1.3.6/waffle-grid.min.css 17 | docs: https://github.com/pr1mer-tech/waffle-grid/wiki 18 | stargazers: https://github.com/pr1mer-tech/waffle-grid/stargazers 19 | 20 | npm: https://npmjs.com/package/waffle-grid 21 | author: 22 | github: https://github.com/pr1mer-tech 23 | twitter: https://twitter.com/lucasgruwez 24 | 25 | donate: https://paypal.me/lucasgruwez 26 | -------------------------------------------------------------------------------- /docs/img/icon-sliders.svg: -------------------------------------------------------------------------------- 1 | 2 | icon-sliders 3 | Created using Figma 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/_includes/footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 22 |
23 |
24 |
25 |
26 | Made with ❤ by @lucasgruwez 27 |
28 | Copyright © lucasgruwez All Rights Reserved. 29 |
30 |
31 |
32 |
33 | -------------------------------------------------------------------------------- /docs/_layouts/html.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 10 | {% include nav.html %} 11 | {{content}} 12 | {% include footer.html %} 13 | 14 | 15 | 16 | 17 | 21 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/img/icon-phone.svg: -------------------------------------------------------------------------------- 1 | 2 | icon-phone 3 | Created using Figma 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Lucas Gruwez 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/img/icon-feather.svg: -------------------------------------------------------------------------------- 1 | 2 | icon-feather 3 | Created using Figma 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | **Note: for support questions, please use stackoverflow**. This repository's issues are reserved for feature requests and bug reports. 2 | 3 | * **I'm submitting a ... ** 4 | - [ ] bug report 5 | - [ ] feature request 6 | - [ ] support request => Please do not submit support request here, see note at the top of this template. 7 | 8 | 9 | * **Do you want to request a *feature* or report a *bug*?** 10 | 11 | 12 | 13 | * **What is the current behavior?** 14 | 15 | 16 | 17 | * **If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** via 18 | https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5). 19 | 20 | 21 | 22 | * **What is the expected behavior?** 23 | 24 | 25 | 26 | * **What is the motivation / use case for changing the behavior?** 27 | 28 | 29 | 30 | * **Please tell us about your environment:** 31 | 32 | - version: 2.0.0-beta.X 33 | - Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] 34 | - Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart] 35 | 36 | 37 | 38 | * **Other information** (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc) 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/node,jekyll 3 | 4 | ### Jekyll ### 5 | _site/ 6 | .sass-cache/ 7 | .jekyll-metadata 8 | 9 | ### Node ### 10 | # Logs 11 | logs 12 | *.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | 29 | # nyc test coverage 30 | .nyc_output 31 | 32 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 33 | .grunt 34 | 35 | # Bower dependency directory (https://bower.io/) 36 | bower_components 37 | 38 | # node-waf configuration 39 | .lock-wscript 40 | 41 | # Compiled binary addons (http://nodejs.org/api/addons.html) 42 | build/Release 43 | 44 | # Dependency directories 45 | node_modules/ 46 | jspm_packages/ 47 | 48 | # Typescript v1 declaration files 49 | typings/ 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional REPL history 58 | .node_repl_history 59 | 60 | # Output of 'npm pack' 61 | *.tgz 62 | 63 | # Yarn Integrity file 64 | .yarn-integrity 65 | 66 | # dotenv environment variables file 67 | .env 68 | 69 | 70 | # End of https://www.gitignore.io/api/node,jekyll 71 | 72 | # custom gitignored folders 73 | 74 | package-lock.json 75 | -------------------------------------------------------------------------------- /docs/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{page.title}} 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const sass = require('gulp-sass'); 3 | const rename = require('gulp-rename'); 4 | const cleanCSS = require('gulp-clean-css'); 5 | const runSequence = require('run-sequence'); 6 | const cssbeautify = require('gulp-cssbeautify'); 7 | const autoprefixer = require('gulp-autoprefixer'); 8 | 9 | gulp.task('sass:compile', function () { 10 | return gulp.src('./src/**/*.scss') 11 | .pipe(sass().on('error', sass.logError)) 12 | .pipe(cleanCSS({ 13 | level: { 14 | 1: { 15 | all: true 16 | }, 17 | 2: { 18 | all: true, 19 | } 20 | } 21 | })) // This moight seem counter intuitive at first, that we first uglify then beautify, but the uglification drastically reduces file size by merging col-1-of-4, col-2-of-8 and col-3-of-12 ito one same rule. The beautyfication makes the code readable. This reduces the non-minified file size by ~200 lines. 22 | .pipe(cssbeautify({ 23 | indent: ' ', 24 | autosemicolon: true 25 | })) 26 | .pipe(autoprefixer({ 27 | browsers: ['last 2 versions'], 28 | })) 29 | .pipe(gulp.dest('./dist')); 30 | }); 31 | 32 | gulp.task('css:minify', function() { 33 | return gulp.src('dist/waffle-grid.css') 34 | .pipe(cleanCSS({compatibility: 'ie8'})) 35 | .pipe(rename('waffle-grid.min.css')) 36 | .pipe(gulp.dest('dist')); 37 | }); 38 | 39 | gulp.task('build', function () { 40 | runSequence('sass:compile', 'css:minify'); 41 | }); 42 | 43 | gulp.task('watch', ['build'], function () { 44 | gulp.watch('./src/**/*.scss', function () { 45 | runSequence('sass:compile', 'css:minify'); 46 | }); 47 | }); 48 | 49 | gulp.task('default', ['build']); 50 | -------------------------------------------------------------------------------- /docs/_includes/example.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
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 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | -------------------------------------------------------------------------------- /docs/img/waffle-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | waffle-logo 3 | Created using Figma 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/img/waffle-logo-white.svg: -------------------------------------------------------------------------------- 1 | 2 | waffle-logo 3 | Created using Figma 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/img/gh-corner-link.svg: -------------------------------------------------------------------------------- 1 | 2 | gh-corner-link 3 | Created using Figma 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the the creator of this poject at gruwez.lucas@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: html 3 | title: Waffle Grid System 4 | description: An easy to use flexbox grid system. Made by Lucas Gruwez 5 | --- 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | Waffle logo 17 | 18 |

Waffle grid

19 | 20 |

An easy to use flexbox grid system.

21 |

Made by @lucasgruwez

22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 | 32 | 33 |
34 | 35 |
36 |
37 |
38 | 39 | Feather icon 40 |

Light weight

41 |

The waffle grid system is super lightweight, weighing in at only ~7kb minified using the default settings.

42 | 43 |
44 |
45 | 46 | Phone icon 47 |

Responsive

48 |

With classes for medium and small devices, the waffle grid can make your layouts fully responsive.

49 | 50 |
51 |
52 | 53 | Sliders icon 54 |

Customisable

55 |

The waffle grid system was written entirely in sass, so that you can easily change or customize the grid to suit your needs.

56 | 57 |
58 |
59 |
60 | 61 |
62 | 63 | 64 | 65 |
66 | 67 |
68 |
69 |
70 |
71 | 72 | Download {{site.version}} 73 | 74 |
75 | 76 |
77 | 78 |
79 | 80 | Star on GitHub 81 | 82 |
83 |
84 |
85 |
86 | 87 |
88 | 89 | 90 | 91 |
92 | {% include example.html %} 93 |
94 | 95 | 96 | 97 |
98 | 99 |
100 | 101 |
102 | 103 |
104 | 105 | 106 | 107 |
108 | Read the docs 109 |
110 | 111 |
112 | 113 | 114 | 115 |
116 |
All code hosted with ❤ by GitHub
117 |
118 | -------------------------------------------------------------------------------- /src/waffle-grid.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * waffle-grid - v1.3.6 - (https://lucasgruwez.github.io/waffle-grid) 3 | * Copyright 2017 Lucas Gruwez. 4 | * Licensed under MIT 5 | * https://lucasgruwez.github.io/waffle-grid 6 | */ 7 | 8 | // Class names 9 | // Change them to whatever you're used to 10 | $grid-classname: "grid" !default; 11 | $row-classname: "row" !default; 12 | $column-classname: "col" !default; 13 | $container-classname: "container" !default; 14 | $helper-prefix: "" !default; 15 | 16 | // Column amounts, results in: 17 | // .col-n-of-4, or .col-n-of-8 18 | $grid-columns: (4, 8, 12) !default; 19 | 20 | // Gutter width 21 | $gutter-width: 20px !default; 22 | 23 | // Grid width and max-width. 24 | // It is automatically centered on the page. 25 | $grid-width: 960px !default; 26 | $grid-max-width: 80% !default; 27 | 28 | // Pushes and Pulls 29 | $pushes: true !default; 30 | $pulls: true !default; 31 | 32 | // Breakpoints. Structure: 33 | // name: (screen-width, column-amounts) 34 | $breakpoints: ( 35 | m: (840px, (4, 6, 8)), 36 | s: (480px, (4, 6)), 37 | ) !default; 38 | 39 | // Actual css, change this at your own risk 40 | 41 | .#{$container-classname} { 42 | width: $grid-width; 43 | max-width: $grid-max-width; 44 | margin: 0 auto; 45 | } 46 | 47 | .#{$grid-classname} { 48 | display: flex; 49 | flex-direction: column; 50 | width: $grid-width; 51 | max-width: $grid-max-width; 52 | margin: 0 auto; 53 | &.full-width { 54 | width: 100%; 55 | max-width: 100%; 56 | } 57 | } 58 | 59 | .#{$row-classname} { 60 | display: flex; 61 | flex-direction: row; 62 | width: 100%; 63 | flex-wrap: wrap; 64 | } 65 | 66 | .#{$column-classname} { 67 | box-sizing: border-box; 68 | margin: $gutter-width / 2; 69 | vertical-align: top; 70 | } 71 | 72 | .#{$helper-prefix}center {margin-left: auto; margin-right: auto;} 73 | .#{$helper-prefix}left {margin-right: auto;} 74 | .#{$helper-prefix}right {margin-left: auto;} 75 | .#{$helper-prefix}w-auto {flex: 1} 76 | 77 | @each $col-am in $grid-columns { 78 | @for $i from 1 through $col-am { 79 | 80 | .#{$column-classname}-#{$i}-of-#{$col-am} { 81 | width: calc(#{percentage($i/$col-am)} - #{$gutter-width}); 82 | } // end width 83 | 84 | @if ($pushes) { 85 | .push-#{$i}-of-#{$col-am} { 86 | margin-left: calc(#{percentage($i/$col-am)} + #{$gutter-width} / 2); 87 | } 88 | } // end pushes 89 | 90 | @if ($pulls) { 91 | .pull-#{$i}-of-#{$col-am} { 92 | margin-right: calc(#{percentage($i/$col-am)} + #{$gutter-width} / 2); 93 | } 94 | } // end pulls 95 | } // end for 96 | } // end each 97 | 98 | @each $bp in $breakpoints { 99 | $bp-name: nth($bp, 1); 100 | $bp-width: nth(nth($bp, 2), 1); 101 | $bp-col-ams: nth(nth($bp, 2), 2); 102 | 103 | @media (max-width: $bp-width) { 104 | .#{$bp-name}-hide {display: none;} 105 | .w-#{$bp-name}-auto {flex: 1} 106 | .#{$bp-name}-un-push {margin-left: $gutter-width / 2;} 107 | .#{$bp-name}-un-pull {margin-right: $gutter-width / 2;} 108 | 109 | @each $col-am in $bp-col-ams { 110 | @for $i from 1 through $col-am { 111 | 112 | .#{$column-classname}-#{$bp-name}-#{$i}-of-#{$col-am} { 113 | width: calc(#{percentage($i/$col-am)} - #{$gutter-width}); 114 | } // end width 115 | 116 | @if ($pushes) { 117 | .push-#{$bp-name}-#{$i}-of-#{$col-am} { 118 | margin-left: calc(#{percentage($i/$col-am)} + #{$gutter-width} / 2); 119 | } 120 | } // end pushes 121 | 122 | @if ($pulls) { 123 | .pull-#{$bp-name}-#{$i}-of-#{$col-am} { 124 | margin-right: calc(#{percentage($i/$col-am)} + #{$gutter-width} / 2); 125 | } 126 | } // end pulls 127 | } // end for 128 | } // end each 129 | } 130 | } 131 | 132 | @function reverse($list, $recursive: false) { 133 | $result: (); 134 | @for $i from length($list)*-1 through -1 { 135 | @if type-of(nth($list, abs($i))) == list and $recursive { 136 | $result: append($result, reverse(nth($list, abs($i)), $recursive)); 137 | } 138 | @else { 139 | $result: append($result, nth($list, abs($i))); 140 | } 141 | } 142 | @return $result; 143 | } 144 | 145 | @each $bp in reverse($breakpoints) { 146 | $bp-name: nth($bp, 1); 147 | $bp-width: nth(nth($bp, 2), 1); 148 | 149 | @media (min-width: $bp-width) { 150 | .#{$bp-name}-and-lower {display: none;} 151 | } 152 | } 153 | 154 | // under 160 lines !! 155 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via an issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure that the `gulp` command has been run. 11 | 2. Make sure all code adheres to our [styleguide](https://github.com/lucasgruwez/css) 12 | 3. Update the README.md` with details of changes to the interface, this includes new environment 13 | variables, exposed ports, useful file locations and container parameters. 14 | 4. Increase the version numbers in the `src/waffle-grid.scss`, `config.yml` and `package.json` files 15 | to the new version. Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). 16 | 5. You may merge the Pull Request in once you have the sign-off of one other developers, or if you 17 | do not have permission to do that, you may request the reviewer to merge it for you. 18 | 19 | ## Code of Conduct 20 | 21 | ### Our Pledge 22 | 23 | In the interest of fostering an open and welcoming environment, we as 24 | contributors and maintainers pledge to making participation in our project and 25 | our community a harassment-free experience for everyone, regardless of age, body 26 | size, disability, ethnicity, gender identity and expression, level of experience, 27 | nationality, personal appearance, race, religion, or sexual identity and 28 | orientation. 29 | 30 | ### Our Standards 31 | 32 | Examples of behavior that contributes to creating a positive environment 33 | include: 34 | 35 | * Using welcoming and inclusive language 36 | * Being respectful of differing viewpoints and experiences 37 | * Gracefully accepting constructive criticism 38 | * Focusing on what is best for the community 39 | * Showing empathy towards other community members 40 | 41 | Examples of unacceptable behavior by participants include: 42 | 43 | * The use of sexualized language or imagery and unwelcome sexual attention or 44 | advances 45 | * Trolling, insulting/derogatory comments, and personal or political attacks 46 | * Public or private harassment 47 | * Publishing others' private information, such as a physical or electronic 48 | address, without explicit permission 49 | * Other conduct which could reasonably be considered inappropriate in a 50 | professional setting 51 | 52 | ### Our Responsibilities 53 | 54 | Project maintainers are responsible for clarifying the standards of acceptable 55 | behavior and are expected to take appropriate and fair corrective action in 56 | response to any instances of unacceptable behavior. 57 | 58 | Project maintainers have the right and responsibility to remove, edit, or 59 | reject comments, commits, code, wiki edits, issues, and other contributions 60 | that are not aligned to this Code of Conduct, or to ban temporarily or 61 | permanently any contributor for other behaviors that they deem inappropriate, 62 | threatening, offensive, or harmful. 63 | 64 | ### Scope 65 | 66 | This Code of Conduct applies both within project spaces and in public spaces 67 | when an individual is representing the project or its community. Examples of 68 | representing a project or community include using an official project e-mail 69 | address, posting via an official social media account, or acting as an appointed 70 | representative at an online or offline event. Representation of a project may be 71 | further defined and clarified by project maintainers. 72 | 73 | ### Enforcement 74 | 75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 76 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All 77 | complaints will be reviewed and investigated and will result in a response that 78 | is deemed necessary and appropriate to the circumstances. The project team is 79 | obligated to maintain confidentiality with regard to the reporter of an incident. 80 | Further details of specific enforcement policies may be posted separately. 81 | 82 | Project maintainers who do not follow or enforce the Code of Conduct in good 83 | faith may face temporary or permanent repercussions as determined by other 84 | members of the project's leadership. 85 | 86 | ### Attribution 87 | 88 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 89 | available at [http://contributor-covenant.org/version/1/4][version] 90 | 91 | [homepage]: http://contributor-covenant.org 92 | [version]: http://contributor-covenant.org/version/1/4/ 93 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Waffle grid

2 |

3 | 4 |

5 |

6 | An easy to use flexbox grid system. 7 |

8 | 9 |

10 | 11 | GitHub release 12 | 13 | 14 | Github All Releases 15 | 16 | 17 | License 18 | 19 | 20 | David 21 | 22 | 23 | Travis 24 | 25 | 26 | Built with Gulp 27 | 28 |

29 | 30 | 31 | ## Getting Started 32 | 33 | To get the waffle grid system in your web page, simply paste this code into the `head` of your document, 34 | ```html 35 | 36 | 37 | 38 | ``` 39 | or you can install the waffle grid system using a package manager like [npm](https://npmjs.com/package/waffle-grid) 40 | ```bash 41 | $ npm install waffle-grid 42 | # or 43 | $ bower install waffle-grid 44 | ``` 45 | If you want you can still download the waffle grid [here](https://github.com/lucasgruwez/waffle-grid/releases). 46 | 47 | ## Docs 48 | 49 | ```html 50 |
51 |
52 | 53 |
54 |
55 |
56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | 76 |
77 |
78 |
79 |
80 |
81 | ``` 82 | 83 | The full docs can be found [here](https://github.com/lucasgruwez/waffle-grid/wiki) 84 | 85 | ## Like this project? 86 | 87 | Please feel free to give the waffle-grid repo a star, and if you want to help support my work, please consider [donating](https://paypal.me/lucasgruwez). 88 | 89 | ## Built With 90 | 91 | * [Gulp](http://gulpjs.com/) - Build system 92 | * [Sass](https://sass-lang.com/) - Language 93 | * [Jekyll](https://jekyllrb.com/) - Used for the website 94 | 95 | ## Contributing 96 | 97 | Please read [CONTRIBUTING.md](./.github/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us. 98 | 99 | #### Made a website using the Waffle grid? 100 | 101 | Add the built with waffle-grid badge to your `README.md` 102 | 103 | [![Built with Waffle Grid](https://lucasgruwez.github.io/waffle-grid/img/built-with-waffle.svg)](https://lucasgruwez.github.io/waffle-grid/img/built-with-waffle.svg) 104 | 105 | 106 | Feel free to send me an email at [gruwez.lucas@gmail.com](mailto:gruwez.lucas@gmail.com), and I might add your site to an examples section I'm currently working on. 107 | 108 | ## Versioning 109 | 110 | We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/lucasgruwez/waffle-grid/tags). 111 | 112 | ## Authors 113 | 114 | - **Lucas Gruwez** - *Initial work* - [@lucasgruwez](https://github.com/lucasgruwez) 115 | - **Jack McNicol** - *Helped out a lot* - [@jackmcpickle](https://github.com/jackmcpickle) 116 | - **Arthur Guiot** - *Added js function* - [@arguiot](https://gothub.com/arguiot) 117 | 118 | See also the list of [contributors](https://github.com/lucasgruwez/waffle-grid/contributors) who participated in this project. 119 | 120 | ## License 121 | 122 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details 123 | 124 | Copyright © 2017 lucasgruwez All Rights Reserved. 125 | -------------------------------------------------------------------------------- /dist/waffle-grid.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * waffle-grid - v1.3.6 - (https://lucasgruwez.github.io/waffle-grid) 3 | * Copyright 2017 Lucas Gruwez. 4 | * Licensed under MIT 5 | * https://lucasgruwez.github.io/waffle-grid 6 | */.container,.grid{width:960px;max-width:80%;margin:0 auto}.grid,.row{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.grid.full-width{width:100%;max-width:100%}.row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap}.col{-webkit-box-sizing:border-box;box-sizing:border-box;margin:10px;vertical-align:top}.center,.left{margin-right:auto}.center,.right{margin-left:auto}.w-auto{-webkit-box-flex:1;-ms-flex:1;flex:1}.col-1-of-4,.col-2-of-8,.col-3-of-12{width:calc(25% - 20px)}.push-1-of-4,.push-2-of-8,.push-3-of-12{margin-left:calc(25% + 20px / 2)}.pull-1-of-4,.pull-2-of-8,.pull-3-of-12{margin-right:calc(25% + 20px / 2)}.col-2-of-4,.col-4-of-8,.col-6-of-12{width:calc(50% - 20px)}.push-2-of-4,.push-4-of-8,.push-6-of-12{margin-left:calc(50% + 20px / 2)}.pull-2-of-4,.pull-4-of-8,.pull-6-of-12{margin-right:calc(50% + 20px / 2)}.col-3-of-4,.col-6-of-8,.col-9-of-12{width:calc(75% - 20px)}.push-3-of-4,.push-6-of-8,.push-9-of-12{margin-left:calc(75% + 20px / 2)}.pull-3-of-4,.pull-6-of-8,.pull-9-of-12{margin-right:calc(75% + 20px / 2)}.col-12-of-12,.col-4-of-4,.col-8-of-8{width:calc(100% - 20px)}.push-12-of-12,.push-4-of-4,.push-8-of-8{margin-left:calc(100% + 20px / 2)}.pull-12-of-12,.pull-4-of-4,.pull-8-of-8{margin-right:calc(100% + 20px / 2)}.col-1-of-8{width:calc(12.5% - 20px)}.push-1-of-8{margin-left:calc(12.5% + 20px / 2)}.pull-1-of-8{margin-right:calc(12.5% + 20px / 2)}.col-3-of-8{width:calc(37.5% - 20px)}.push-3-of-8{margin-left:calc(37.5% + 20px / 2)}.pull-3-of-8{margin-right:calc(37.5% + 20px / 2)}.col-5-of-8{width:calc(62.5% - 20px)}.push-5-of-8{margin-left:calc(62.5% + 20px / 2)}.pull-5-of-8{margin-right:calc(62.5% + 20px / 2)}.col-7-of-8{width:calc(87.5% - 20px)}.push-7-of-8{margin-left:calc(87.5% + 20px / 2)}.pull-7-of-8{margin-right:calc(87.5% + 20px / 2)}.col-1-of-12{width:calc(8.33333% - 20px)}.push-1-of-12{margin-left:calc(8.33333% + 20px / 2)}.pull-1-of-12{margin-right:calc(8.33333% + 20px / 2)}.col-2-of-12{width:calc(16.66667% - 20px)}.push-2-of-12{margin-left:calc(16.66667% + 20px / 2)}.pull-2-of-12{margin-right:calc(16.66667% + 20px / 2)}.col-4-of-12{width:calc(33.33333% - 20px)}.push-4-of-12{margin-left:calc(33.33333% + 20px / 2)}.pull-4-of-12{margin-right:calc(33.33333% + 20px / 2)}.col-5-of-12{width:calc(41.66667% - 20px)}.push-5-of-12{margin-left:calc(41.66667% + 20px / 2)}.pull-5-of-12{margin-right:calc(41.66667% + 20px / 2)}.col-7-of-12{width:calc(58.33333% - 20px)}.push-7-of-12{margin-left:calc(58.33333% + 20px / 2)}.pull-7-of-12{margin-right:calc(58.33333% + 20px / 2)}.col-8-of-12{width:calc(66.66667% - 20px)}.push-8-of-12{margin-left:calc(66.66667% + 20px / 2)}.pull-8-of-12{margin-right:calc(66.66667% + 20px / 2)}.col-10-of-12{width:calc(83.33333% - 20px)}.push-10-of-12{margin-left:calc(83.33333% + 20px / 2)}.pull-10-of-12{margin-right:calc(83.33333% + 20px / 2)}.col-11-of-12{width:calc(91.66667% - 20px)}.push-11-of-12{margin-left:calc(91.66667% + 20px / 2)}.pull-11-of-12{margin-right:calc(91.66667% + 20px / 2)}@media (max-width:840px){.m-hide{display:none}.w-m-auto{-webkit-box-flex:1;-ms-flex:1;flex:1}.m-un-push{margin-left:10px}.m-un-pull{margin-right:10px}.col-m-1-of-4,.col-m-2-of-8{width:calc(25% - 20px)}.push-m-1-of-4,.push-m-2-of-8{margin-left:calc(25% + 20px / 2)}.pull-m-1-of-4,.pull-m-2-of-8{margin-right:calc(25% + 20px / 2)}.col-m-2-of-4,.col-m-3-of-6,.col-m-4-of-8{width:calc(50% - 20px)}.push-m-2-of-4,.push-m-3-of-6,.push-m-4-of-8{margin-left:calc(50% + 20px / 2)}.pull-m-2-of-4,.pull-m-3-of-6,.pull-m-4-of-8{margin-right:calc(50% + 20px / 2)}.col-m-3-of-4,.col-m-6-of-8{width:calc(75% - 20px)}.push-m-3-of-4,.push-m-6-of-8{margin-left:calc(75% + 20px / 2)}.pull-m-3-of-4,.pull-m-6-of-8{margin-right:calc(75% + 20px / 2)}.col-m-4-of-4,.col-m-6-of-6,.col-m-8-of-8{width:calc(100% - 20px)}.push-m-4-of-4,.push-m-6-of-6,.push-m-8-of-8{margin-left:calc(100% + 20px / 2)}.pull-m-4-of-4,.pull-m-6-of-6,.pull-m-8-of-8{margin-right:calc(100% + 20px / 2)}.col-m-1-of-6{width:calc(16.66667% - 20px)}.push-m-1-of-6{margin-left:calc(16.66667% + 20px / 2)}.pull-m-1-of-6{margin-right:calc(16.66667% + 20px / 2)}.col-m-2-of-6{width:calc(33.33333% - 20px)}.push-m-2-of-6{margin-left:calc(33.33333% + 20px / 2)}.pull-m-2-of-6{margin-right:calc(33.33333% + 20px / 2)}.col-m-4-of-6{width:calc(66.66667% - 20px)}.push-m-4-of-6{margin-left:calc(66.66667% + 20px / 2)}.pull-m-4-of-6{margin-right:calc(66.66667% + 20px / 2)}.col-m-5-of-6{width:calc(83.33333% - 20px)}.push-m-5-of-6{margin-left:calc(83.33333% + 20px / 2)}.pull-m-5-of-6{margin-right:calc(83.33333% + 20px / 2)}.col-m-1-of-8{width:calc(12.5% - 20px)}.push-m-1-of-8{margin-left:calc(12.5% + 20px / 2)}.pull-m-1-of-8{margin-right:calc(12.5% + 20px / 2)}.col-m-3-of-8{width:calc(37.5% - 20px)}.push-m-3-of-8{margin-left:calc(37.5% + 20px / 2)}.pull-m-3-of-8{margin-right:calc(37.5% + 20px / 2)}.col-m-5-of-8{width:calc(62.5% - 20px)}.push-m-5-of-8{margin-left:calc(62.5% + 20px / 2)}.pull-m-5-of-8{margin-right:calc(62.5% + 20px / 2)}.col-m-7-of-8{width:calc(87.5% - 20px)}.push-m-7-of-8{margin-left:calc(87.5% + 20px / 2)}.pull-m-7-of-8{margin-right:calc(87.5% + 20px / 2)}}@media (max-width:480px){.s-hide{display:none}.w-s-auto{-webkit-box-flex:1;-ms-flex:1;flex:1}.s-un-push{margin-left:10px}.s-un-pull{margin-right:10px}.col-s-1-of-4{width:calc(25% - 20px)}.push-s-1-of-4{margin-left:calc(25% + 20px / 2)}.pull-s-1-of-4{margin-right:calc(25% + 20px / 2)}.col-s-2-of-4,.col-s-3-of-6{width:calc(50% - 20px)}.push-s-2-of-4,.push-s-3-of-6{margin-left:calc(50% + 20px / 2)}.pull-s-2-of-4,.pull-s-3-of-6{margin-right:calc(50% + 20px / 2)}.col-s-3-of-4{width:calc(75% - 20px)}.push-s-3-of-4{margin-left:calc(75% + 20px / 2)}.pull-s-3-of-4{margin-right:calc(75% + 20px / 2)}.col-s-4-of-4,.col-s-6-of-6{width:calc(100% - 20px)}.push-s-4-of-4,.push-s-6-of-6{margin-left:calc(100% + 20px / 2)}.pull-s-4-of-4,.pull-s-6-of-6{margin-right:calc(100% + 20px / 2)}.col-s-1-of-6{width:calc(16.66667% - 20px)}.push-s-1-of-6{margin-left:calc(16.66667% + 20px / 2)}.pull-s-1-of-6{margin-right:calc(16.66667% + 20px / 2)}.col-s-2-of-6{width:calc(33.33333% - 20px)}.push-s-2-of-6{margin-left:calc(33.33333% + 20px / 2)}.pull-s-2-of-6{margin-right:calc(33.33333% + 20px / 2)}.col-s-4-of-6{width:calc(66.66667% - 20px)}.push-s-4-of-6{margin-left:calc(66.66667% + 20px / 2)}.pull-s-4-of-6{margin-right:calc(66.66667% + 20px / 2)}.col-s-5-of-6{width:calc(83.33333% - 20px)}.push-s-5-of-6{margin-left:calc(83.33333% + 20px / 2)}.pull-s-5-of-6{margin-right:calc(83.33333% + 20px / 2)}}@media (min-width:480px){.s-and-lower{display:none}}@media (min-width:840px){.m-and-lower{display:none}} -------------------------------------------------------------------------------- /docs/css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | $brand-color: #ffb448; 5 | 6 | body { 7 | margin-bottom: 600px; 8 | background-color: $brand-color; 9 | } 10 | 11 | * { 12 | -webkit-box-sizing: border-box; 13 | box-sizing: border-box; 14 | } 15 | 16 | .wrapper { 17 | width: 960px; 18 | max-width: 80%; 19 | margin: 0 auto; 20 | } 21 | .fw-grid { 22 | width: 960px; 23 | max-width: 100%; 24 | } 25 | 26 | a { 27 | color: inherit; 28 | } 29 | 30 | nav { 31 | height: 100px; 32 | background-color: #ffffff; 33 | padding: 30px 24px; 34 | color: $brand-color; 35 | position: fixed; 36 | top: 0; 37 | left: 0; 38 | right: 0; 39 | z-index: 100; 40 | img { 41 | height: 40px; 42 | } 43 | span { 44 | font-weight: bold; 45 | font-size: 24px; 46 | position: absolute; 47 | left: 82px; 48 | top: 50%; 49 | -webkit-transform: translateY(-50%); 50 | -ms-transform: translateY(-50%); 51 | transform: translateY(-50%); 52 | } 53 | ul { 54 | position: absolute; 55 | right: 25px; 56 | top: 50%; 57 | color: #000000; 58 | -webkit-transform: translateY(-50%); 59 | -ms-transform: translateY(-50%); 60 | transform: translateY(-50%); 61 | margin: 0; 62 | padding: 0; 63 | li { 64 | display: inline-block; 65 | margin-left: 20px; 66 | a { 67 | padding: 5px 20px; 68 | text-decoration: none; 69 | position: relative; 70 | } 71 | } 72 | } 73 | .hamburger { 74 | position: absolute; 75 | right: 25px; 76 | top: 50%; 77 | cursor: pointer; 78 | -webkit-transform: translateY(-50%); 79 | -ms-transform: translateY(-50%); 80 | transform: translateY(-50%); 81 | } 82 | ul.js-toggled { 83 | position: absolute; 84 | top: 100%; 85 | left: 0; 86 | right: 0; 87 | transform: none; 88 | background-color: #fff; 89 | border-bottom: 1px solid #ddd; 90 | height: 0; 91 | transition: 200ms all cubic-bezier(0.4, 0.0, 1, 1);; 92 | overflow: hidden; 93 | &.visible { 94 | height: 248px; 95 | transition: 200ms all cubic-bezier(0.0, 0.0, 0.2, 1);; 96 | } 97 | li { 98 | border-top: 1px solid #ddd; 99 | display: block; 100 | padding: 30px; 101 | text-align: center; 102 | margin: 0; 103 | a { 104 | padding: 30px; 105 | } 106 | } 107 | } 108 | } 109 | 110 | header { 111 | background-color: $brand-color; 112 | height: 100vh; 113 | min-height: 600px; 114 | position: relative; 115 | &.inverted { 116 | background-color: #ffffff; 117 | .header-content { 118 | color: #000000; 119 | .title { 120 | color: $brand-color; 121 | } 122 | } 123 | } 124 | .header-content { 125 | color: #ffffff; 126 | padding: 100px 0; 127 | text-align: center; 128 | position: absolute; 129 | top: 50%; 130 | left: 0; 131 | right: 0; 132 | -webkit-transform: translateY(-50%); 133 | -ms-transform: translateY(-50%); 134 | transform: translateY(-50%); 135 | img { 136 | height: 200px; 137 | } 138 | h1 { 139 | font-size: 48px; 140 | margin: 32px 0 16px; 141 | } 142 | p { 143 | font-size: 20px; 144 | margin-top: 0; 145 | margin-bottom: 10px; 146 | &.small { 147 | font-size: 16px; 148 | } 149 | } 150 | } 151 | } 152 | 153 | section { 154 | background-color: #ffffff; 155 | &#features { 156 | padding: 100px 0; 157 | a { 158 | color: $brand-color; 159 | } 160 | .col { 161 | text-align: center; 162 | img { 163 | height: 100px; 164 | } 165 | } 166 | } 167 | &#download-cta { 168 | background-color: $brand-color; 169 | padding: 75px 0; 170 | text-align: center; 171 | a.btn { 172 | background-color: #ffffff; 173 | color: $brand-color; 174 | font-size: 24px; 175 | padding: 15px 35px; 176 | text-decoration: none; 177 | border: 2px solid #ffffff; 178 | &.inverted { 179 | color: #ffffff; 180 | background-color: transparent; 181 | } 182 | } 183 | } 184 | &#docs-cta { 185 | background-color: #ffffff; 186 | padding: 75px; 187 | text-align: center; 188 | a.btn { 189 | background-color: $brand-color; 190 | color: #ffffff; 191 | font-size: 24px; 192 | padding: 15px 35px; 193 | text-decoration: none; 194 | } 195 | } 196 | &#getting-started { 197 | padding: 100px 0; 198 | } 199 | &#grid-example { 200 | background-color: $brand-color; 201 | padding: 100px 0; 202 | } 203 | &#docs-preview { 204 | padding: 75px 0; 205 | } 206 | } 207 | 208 | 209 | .box { 210 | height: 25px; 211 | background-color: #ffffff; 212 | } 213 | 214 | .gist { 215 | .gist-file { 216 | border-bottom-color: #dddddd !important; 217 | .gist-meta { 218 | display: none !important; 219 | } 220 | .gist-data { 221 | border-bottom: none !important; 222 | } 223 | } 224 | .gist-meta { 225 | position: fixed; 226 | left: 0; 227 | right: 0; 228 | bottom: 0; 229 | top: 100vh; 230 | transition: 500ms all cubic-bezier(0.68, -0.55, 0.27, 1.55); 231 | } 232 | &.visible .gist-meta { 233 | bottom: 0; 234 | top: calc(100vh - 36px); 235 | } 236 | } 237 | 238 | footer { 239 | color: #ffffff; 240 | background-color: $brand-color; 241 | text-align: center; 242 | padding: 75px 35px; 243 | position: fixed; 244 | left: 0; 245 | right: 0; 246 | bottom: 0; 247 | z-index: -100; 248 | ul { 249 | padding: 0; 250 | li { 251 | display: inline-block; 252 | img { 253 | width: 45px; 254 | } 255 | &:not(:first-child) { 256 | margin-left: 50px; 257 | } 258 | } 259 | } 260 | } 261 | h1:not(.title) { 262 | position: relative; 263 | display: inline-block; 264 | &:after { 265 | content: ""; 266 | position: absolute; 267 | left: 0; 268 | right: 0; 269 | bottom: 0; 270 | height: 8px; 271 | background-color: $brand-color; 272 | z-index: -10; 273 | } 274 | } 275 | 276 | @media (max-width: 480px) { 277 | header .header-content { 278 | img { 279 | height: 150px; 280 | } 281 | h1 { 282 | font-size: 32px; 283 | } 284 | p { 285 | font-size: 18px; 286 | &.small {font-size: 14px;} 287 | } 288 | } 289 | 290 | .box { 291 | height: 20px; 292 | } 293 | 294 | section#download-cta, section#docs-cta { 295 | a.btn { 296 | font-size: 18px; 297 | padding: 12px 24px; 298 | } 299 | } 300 | 301 | footer ul { 302 | img { 303 | width: 35px; 304 | } 305 | li:not(:first-child) { 306 | margin-left: 35px; 307 | } 308 | } 309 | } 310 | -------------------------------------------------------------------------------- /docs/css/reset.css: -------------------------------------------------------------------------------- 1 | /*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */ 2 | 3 | /* 4 | * What follows is the result of much research on cross-browser styling. 5 | * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 6 | * Kroc Camen, and the H5BP dev community and team. 7 | */ 8 | 9 | /* ========================================================================== 10 | Base styles: opinionated defaults 11 | ========================================================================== */ 12 | 13 | html { 14 | color: #222; 15 | font-size: 1em; 16 | line-height: 1.4; 17 | } 18 | 19 | /* 20 | * Remove text-shadow in selection highlight: 21 | * https://twitter.com/miketaylr/status/12228805301 22 | * 23 | * These selection rule sets have to be separate. 24 | * Customize the background color to match your design. 25 | */ 26 | 27 | ::-moz-selection { 28 | background: #b3d4fc; 29 | text-shadow: none; 30 | } 31 | 32 | ::selection { 33 | background: #b3d4fc; 34 | text-shadow: none; 35 | } 36 | 37 | /* 38 | * A better looking default horizontal rule 39 | */ 40 | 41 | hr { 42 | display: block; 43 | height: 1px; 44 | border: 0; 45 | border-top: 1.5px solid #ccc; 46 | margin: 1em 0; 47 | padding: 0; 48 | } 49 | 50 | /* 51 | * Remove the gap between audio, canvas, iframes, 52 | * images, videos and the bottom of their containers: 53 | * https://github.com/h5bp/html5-boilerplate/issues/440 54 | */ 55 | 56 | audio, 57 | canvas, 58 | iframe, 59 | img, 60 | svg, 61 | video { 62 | vertical-align: middle; 63 | } 64 | 65 | /* 66 | * Remove default fieldset styles. 67 | */ 68 | 69 | fieldset { 70 | border: 0; 71 | margin: 0; 72 | padding: 0; 73 | } 74 | 75 | /* 76 | * Allow only vertical resizing of textareas. 77 | */ 78 | 79 | textarea { 80 | resize: vertical; 81 | } 82 | 83 | /* ========================================================================== 84 | Browser Upgrade Prompt 85 | ========================================================================== */ 86 | 87 | .browserupgrade { 88 | margin: 0.2em 0; 89 | background: #ccc; 90 | color: #000; 91 | padding: 0.2em 0; 92 | } 93 | 94 | /* ========================================================================== 95 | Author's custom styles 96 | ========================================================================== */ 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | /* ========================================================================== 115 | Helper classes 116 | ========================================================================== */ 117 | 118 | /* 119 | * Hide visually and from screen readers 120 | */ 121 | 122 | .hidden { 123 | display: none !important; 124 | } 125 | 126 | /* 127 | * Hide only visually, but have it available for screen readers: 128 | * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility 129 | * 130 | * 1. For long content, line feeds are not interpreted as spaces and small width 131 | * causes content to wrap 1 word per line: 132 | * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe 133 | */ 134 | 135 | .visuallyhidden { 136 | border: 0; 137 | clip: rect(0 0 0 0); 138 | height: 1px; 139 | margin: -1px; 140 | overflow: hidden; 141 | padding: 0; 142 | position: absolute; 143 | width: 1px; 144 | white-space: nowrap; /* 1 */ 145 | } 146 | 147 | /* 148 | * Extends the .visuallyhidden class to allow the element 149 | * to be focusable when navigated to via the keyboard: 150 | * https://www.drupal.org/node/897638 151 | */ 152 | 153 | .visuallyhidden.focusable:active, 154 | .visuallyhidden.focusable:focus { 155 | clip: auto; 156 | height: auto; 157 | margin: 0; 158 | overflow: visible; 159 | position: static; 160 | width: auto; 161 | white-space: inherit; 162 | } 163 | 164 | /* 165 | * Hide visually and from screen readers, but maintain layout 166 | */ 167 | 168 | .invisible { 169 | visibility: hidden; 170 | } 171 | 172 | /* 173 | * Clearfix: contain floats 174 | * 175 | * For modern browsers 176 | * 1. The space content is one way to avoid an Opera bug when the 177 | * `contenteditable` attribute is included anywhere else in the document. 178 | * Otherwise it causes space to appear at the top and bottom of elements 179 | * that receive the `clearfix` class. 180 | * 2. The use of `table` rather than `block` is only necessary if using 181 | * `:before` to contain the top-margins of child elements. 182 | */ 183 | 184 | .clearfix:before, 185 | .clearfix:after { 186 | content: " "; /* 1 */ 187 | display: table; /* 2 */ 188 | } 189 | 190 | .clearfix:after { 191 | clear: both; 192 | } 193 | 194 | /* ========================================================================== 195 | EXAMPLE Media Queries for Responsive Design. 196 | These examples override the primary ('mobile first') styles. 197 | Modify as content requires. 198 | ========================================================================== */ 199 | 200 | @media only screen and (min-width: 35em) { 201 | /* Style adjustments for viewports that meet the condition */ 202 | } 203 | 204 | @media print, 205 | (-webkit-min-device-pixel-ratio: 1.25), 206 | (min-resolution: 1.25dppx), 207 | (min-resolution: 120dpi) { 208 | /* Style adjustments for high resolution devices */ 209 | } 210 | 211 | /* ========================================================================== 212 | Print styles. 213 | Inlined to avoid the additional HTTP request: 214 | http://www.phpied.com/delay-loading-your-print-css/ 215 | ========================================================================== */ 216 | 217 | @media print { 218 | *, 219 | *:before, 220 | *:after, 221 | p:first-letter, 222 | div:first-letter, 223 | blockquote:first-letter, 224 | li:first-letter, 225 | p:first-line, 226 | div:first-line, 227 | blockquote:first-line, 228 | li:first-line { 229 | background: transparent !important; 230 | color: #000 !important; /* Black prints faster: 231 | http://www.sanbeiji.com/archives/953 */ 232 | box-shadow: none !important; 233 | text-shadow: none !important; 234 | } 235 | 236 | a, 237 | a:visited { 238 | text-decoration: underline; 239 | } 240 | 241 | a[href]:after { 242 | content: " (" attr(href) ")"; 243 | } 244 | 245 | abbr[title]:after { 246 | content: " (" attr(title) ")"; 247 | } 248 | 249 | /* 250 | * Don't show links that are fragment identifiers, 251 | * or use the `javascript:` pseudo protocol 252 | */ 253 | 254 | a[href^="#"]:after, 255 | a[href^="javascript:"]:after { 256 | content: ""; 257 | } 258 | 259 | pre { 260 | white-space: pre-wrap !important; 261 | } 262 | pre, 263 | blockquote { 264 | border: 1px solid #999; 265 | page-break-inside: avoid; 266 | } 267 | 268 | /* 269 | * Printing Tables: 270 | * http://css-discuss.incutio.com/wiki/Printing_Tables 271 | */ 272 | 273 | thead { 274 | display: table-header-group; 275 | } 276 | 277 | tr, 278 | img { 279 | page-break-inside: avoid; 280 | } 281 | 282 | p, 283 | h2, 284 | h3 { 285 | orphans: 3; 286 | widows: 3; 287 | } 288 | 289 | h2, 290 | h3 { 291 | page-break-after: avoid; 292 | } 293 | } 294 | -------------------------------------------------------------------------------- /docs/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v5.0.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 7 | * IE on Windows Phone and in iOS. 8 | */ 9 | 10 | /* Document 11 | ========================================================================== */ 12 | 13 | html { 14 | font-family: sans-serif; /* 1 */ 15 | line-height: 1.15; /* 2 */ 16 | -ms-text-size-adjust: 100%; /* 3 */ 17 | -webkit-text-size-adjust: 100%; /* 3 */ 18 | } 19 | 20 | /* Sections 21 | ========================================================================== */ 22 | 23 | /** 24 | * Remove the margin in all browsers (opinionated). 25 | */ 26 | 27 | body { 28 | margin: 0; 29 | } 30 | 31 | /** 32 | * Add the correct display in IE 9-. 33 | */ 34 | 35 | article, 36 | aside, 37 | footer, 38 | header, 39 | nav, 40 | section { 41 | display: block; 42 | } 43 | 44 | /** 45 | * Correct the font size and margin on `h1` elements within `section` and 46 | * `article` contexts in Chrome, Firefox, and Safari. 47 | */ 48 | 49 | h1 { 50 | font-size: 2em; 51 | margin: 0.67em 0; 52 | } 53 | 54 | /* Grouping content 55 | ========================================================================== */ 56 | 57 | /** 58 | * Add the correct display in IE 9-. 59 | * 1. Add the correct display in IE. 60 | */ 61 | 62 | figcaption, 63 | figure, 64 | main { /* 1 */ 65 | display: block; 66 | } 67 | 68 | /** 69 | * Add the correct margin in IE 8. 70 | */ 71 | 72 | figure { 73 | margin: 1em 40px; 74 | } 75 | 76 | /** 77 | * 1. Add the correct box sizing in Firefox. 78 | * 2. Show the overflow in Edge and IE. 79 | */ 80 | 81 | hr { 82 | box-sizing: content-box; /* 1 */ 83 | height: 0; /* 1 */ 84 | overflow: visible; /* 2 */ 85 | } 86 | 87 | /** 88 | * 1. Correct the inheritance and scaling of font size in all browsers. 89 | * 2. Correct the odd `em` font sizing in all browsers. 90 | */ 91 | 92 | pre { 93 | font-family: monospace, monospace; /* 1 */ 94 | font-size: 1em; /* 2 */ 95 | } 96 | 97 | /* Text-level semantics 98 | ========================================================================== */ 99 | 100 | /** 101 | * 1. Remove the gray background on active links in IE 10. 102 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 103 | */ 104 | 105 | a { 106 | background-color: transparent; /* 1 */ 107 | -webkit-text-decoration-skip: objects; /* 2 */ 108 | } 109 | 110 | /** 111 | * Remove the outline on focused links when they are also active or hovered 112 | * in all browsers (opinionated). 113 | */ 114 | 115 | a:active, 116 | a:hover { 117 | outline-width: 0; 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 | * 1. Correct the inheritance and scaling of font size in all browsers. 151 | * 2. Correct the odd `em` font sizing in all browsers. 152 | */ 153 | 154 | code, 155 | kbd, 156 | samp { 157 | font-family: monospace, monospace; /* 1 */ 158 | font-size: 1em; /* 2 */ 159 | } 160 | 161 | /** 162 | * Add the correct font style in Android 4.3-. 163 | */ 164 | 165 | dfn { 166 | font-style: italic; 167 | } 168 | 169 | /** 170 | * Add the correct background and color in IE 9-. 171 | */ 172 | 173 | mark { 174 | background-color: #ff0; 175 | color: #000; 176 | } 177 | 178 | /** 179 | * Add the correct font size in all browsers. 180 | */ 181 | 182 | small { 183 | font-size: 80%; 184 | } 185 | 186 | /** 187 | * Prevent `sub` and `sup` elements from affecting the line height in 188 | * all browsers. 189 | */ 190 | 191 | sub, 192 | sup { 193 | font-size: 75%; 194 | line-height: 0; 195 | position: relative; 196 | vertical-align: baseline; 197 | } 198 | 199 | sub { 200 | bottom: -0.25em; 201 | } 202 | 203 | sup { 204 | top: -0.5em; 205 | } 206 | 207 | /* Embedded content 208 | ========================================================================== */ 209 | 210 | /** 211 | * Add the correct display in IE 9-. 212 | */ 213 | 214 | audio, 215 | video { 216 | display: inline-block; 217 | } 218 | 219 | /** 220 | * Add the correct display in iOS 4-7. 221 | */ 222 | 223 | audio:not([controls]) { 224 | display: none; 225 | height: 0; 226 | } 227 | 228 | /** 229 | * Remove the border on images inside links in IE 10-. 230 | */ 231 | 232 | img { 233 | border-style: none; 234 | } 235 | 236 | /** 237 | * Hide the overflow in IE. 238 | */ 239 | 240 | svg:not(:root) { 241 | overflow: hidden; 242 | } 243 | 244 | /* Forms 245 | ========================================================================== */ 246 | 247 | /** 248 | * 1. Change the font styles in all browsers (opinionated). 249 | * 2. Remove the margin in Firefox and Safari. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | font-family: sans-serif; /* 1 */ 258 | font-size: 100%; /* 1 */ 259 | line-height: 1.15; /* 1 */ 260 | margin: 0; /* 2 */ 261 | } 262 | 263 | /** 264 | * Show the overflow in IE. 265 | * 1. Show the overflow in Edge. 266 | */ 267 | 268 | button, 269 | input { /* 1 */ 270 | overflow: visible; 271 | } 272 | 273 | /** 274 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 275 | * 1. Remove the inheritance of text transform in Firefox. 276 | */ 277 | 278 | button, 279 | select { /* 1 */ 280 | text-transform: none; 281 | } 282 | 283 | /** 284 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 285 | * controls in Android 4. 286 | * 2. Correct the inability to style clickable types in iOS and Safari. 287 | */ 288 | 289 | button, 290 | html [type="button"], /* 1 */ 291 | [type="reset"], 292 | [type="submit"] { 293 | -webkit-appearance: button; /* 2 */ 294 | } 295 | 296 | /** 297 | * Remove the inner border and padding in Firefox. 298 | */ 299 | 300 | button::-moz-focus-inner, 301 | [type="button"]::-moz-focus-inner, 302 | [type="reset"]::-moz-focus-inner, 303 | [type="submit"]::-moz-focus-inner { 304 | border-style: none; 305 | padding: 0; 306 | } 307 | 308 | /** 309 | * Restore the focus styles unset by the previous rule. 310 | */ 311 | 312 | button:-moz-focusring, 313 | [type="button"]:-moz-focusring, 314 | [type="reset"]:-moz-focusring, 315 | [type="submit"]:-moz-focusring { 316 | outline: 1px dotted ButtonText; 317 | } 318 | 319 | /** 320 | * Change the border, margin, and padding in all browsers (opinionated). 321 | */ 322 | 323 | fieldset { 324 | border: 1px solid #c0c0c0; 325 | margin: 0 2px; 326 | padding: 0.35em 0.625em 0.75em; 327 | } 328 | 329 | /** 330 | * 1. Correct the text wrapping in Edge and IE. 331 | * 2. Correct the color inheritance from `fieldset` elements in IE. 332 | * 3. Remove the padding so developers are not caught out when they zero out 333 | * `fieldset` elements in all browsers. 334 | */ 335 | 336 | legend { 337 | box-sizing: border-box; /* 1 */ 338 | color: inherit; /* 2 */ 339 | display: table; /* 1 */ 340 | max-width: 100%; /* 1 */ 341 | padding: 0; /* 3 */ 342 | white-space: normal; /* 1 */ 343 | } 344 | 345 | /** 346 | * 1. Add the correct display in IE 9-. 347 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 348 | */ 349 | 350 | progress { 351 | display: inline-block; /* 1 */ 352 | vertical-align: baseline; /* 2 */ 353 | } 354 | 355 | /** 356 | * Remove the default vertical scrollbar in IE. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; 361 | } 362 | 363 | /** 364 | * 1. Add the correct box sizing in IE 10-. 365 | * 2. Remove the padding in IE 10-. 366 | */ 367 | 368 | [type="checkbox"], 369 | [type="radio"] { 370 | box-sizing: border-box; /* 1 */ 371 | padding: 0; /* 2 */ 372 | } 373 | 374 | /** 375 | * Correct the cursor style of increment and decrement buttons in Chrome. 376 | */ 377 | 378 | [type="number"]::-webkit-inner-spin-button, 379 | [type="number"]::-webkit-outer-spin-button { 380 | height: auto; 381 | } 382 | 383 | /** 384 | * 1. Correct the odd appearance in Chrome and Safari. 385 | * 2. Correct the outline style in Safari. 386 | */ 387 | 388 | [type="search"] { 389 | -webkit-appearance: textfield; /* 1 */ 390 | outline-offset: -2px; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 395 | */ 396 | 397 | [type="search"]::-webkit-search-cancel-button, 398 | [type="search"]::-webkit-search-decoration { 399 | -webkit-appearance: none; 400 | } 401 | 402 | /** 403 | * 1. Correct the inability to style clickable types in iOS and Safari. 404 | * 2. Change font properties to `inherit` in Safari. 405 | */ 406 | 407 | ::-webkit-file-upload-button { 408 | -webkit-appearance: button; /* 1 */ 409 | font: inherit; /* 2 */ 410 | } 411 | 412 | /* Interactive 413 | ========================================================================== */ 414 | 415 | /* 416 | * Add the correct display in IE 9-. 417 | * 1. Add the correct display in Edge, IE, and Firefox. 418 | */ 419 | 420 | details, /* 1 */ 421 | menu { 422 | display: block; 423 | } 424 | 425 | /* 426 | * Add the correct display in all browsers. 427 | */ 428 | 429 | summary { 430 | display: list-item; 431 | } 432 | 433 | /* Scripting 434 | ========================================================================== */ 435 | 436 | /** 437 | * Add the correct display in IE 9-. 438 | */ 439 | 440 | canvas { 441 | display: inline-block; 442 | } 443 | 444 | /** 445 | * Add the correct display in IE. 446 | */ 447 | 448 | template { 449 | display: none; 450 | } 451 | 452 | /* Hidden 453 | ========================================================================== */ 454 | 455 | /** 456 | * Add the correct display in IE 10-. 457 | */ 458 | 459 | [hidden] { 460 | display: none; 461 | } 462 | -------------------------------------------------------------------------------- /dist/waffle-grid.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * waffle-grid - v1.3.6 - (https://lucasgruwez.github.io/waffle-grid) 3 | * Copyright 2017 Lucas Gruwez. 4 | * Licensed under MIT 5 | * https://lucasgruwez.github.io/waffle-grid 6 | */.container,.grid { 7 | width: 960px; 8 | max-width: 80%; 9 | margin: 0 auto; 10 | } 11 | 12 | .grid,.row { 13 | display: -webkit-box; 14 | display: -ms-flexbox; 15 | display: flex; 16 | } 17 | 18 | .grid { 19 | -webkit-box-orient: vertical; 20 | -webkit-box-direction: normal; 21 | -ms-flex-direction: column; 22 | flex-direction: column; 23 | } 24 | 25 | .grid.full-width { 26 | width: 100%; 27 | max-width: 100%; 28 | } 29 | 30 | .row { 31 | -webkit-box-orient: horizontal; 32 | -webkit-box-direction: normal; 33 | -ms-flex-direction: row; 34 | flex-direction: row; 35 | width: 100%; 36 | -ms-flex-wrap: wrap; 37 | flex-wrap: wrap; 38 | } 39 | 40 | .col { 41 | -webkit-box-sizing: border-box; 42 | box-sizing: border-box; 43 | margin: 10px; 44 | vertical-align: top; 45 | } 46 | 47 | .center,.left { 48 | margin-right: auto; 49 | } 50 | 51 | .center,.right { 52 | margin-left: auto; 53 | } 54 | 55 | .w-auto { 56 | -webkit-box-flex: 1; 57 | -ms-flex: 1; 58 | flex: 1; 59 | } 60 | 61 | .col-1-of-4,.col-2-of-8,.col-3-of-12 { 62 | width: calc(25% - 20px); 63 | } 64 | 65 | .push-1-of-4,.push-2-of-8,.push-3-of-12 { 66 | margin-left: calc(25% + 20px / 2); 67 | } 68 | 69 | .pull-1-of-4,.pull-2-of-8,.pull-3-of-12 { 70 | margin-right: calc(25% + 20px / 2); 71 | } 72 | 73 | .col-2-of-4,.col-4-of-8,.col-6-of-12 { 74 | width: calc(50% - 20px); 75 | } 76 | 77 | .push-2-of-4,.push-4-of-8,.push-6-of-12 { 78 | margin-left: calc(50% + 20px / 2); 79 | } 80 | 81 | .pull-2-of-4,.pull-4-of-8,.pull-6-of-12 { 82 | margin-right: calc(50% + 20px / 2); 83 | } 84 | 85 | .col-3-of-4,.col-6-of-8,.col-9-of-12 { 86 | width: calc(75% - 20px); 87 | } 88 | 89 | .push-3-of-4,.push-6-of-8,.push-9-of-12 { 90 | margin-left: calc(75% + 20px / 2); 91 | } 92 | 93 | .pull-3-of-4,.pull-6-of-8,.pull-9-of-12 { 94 | margin-right: calc(75% + 20px / 2); 95 | } 96 | 97 | .col-12-of-12,.col-4-of-4,.col-8-of-8 { 98 | width: calc(100% - 20px); 99 | } 100 | 101 | .push-12-of-12,.push-4-of-4,.push-8-of-8 { 102 | margin-left: calc(100% + 20px / 2); 103 | } 104 | 105 | .pull-12-of-12,.pull-4-of-4,.pull-8-of-8 { 106 | margin-right: calc(100% + 20px / 2); 107 | } 108 | 109 | .col-1-of-8 { 110 | width: calc(12.5% - 20px); 111 | } 112 | 113 | .push-1-of-8 { 114 | margin-left: calc(12.5% + 20px / 2); 115 | } 116 | 117 | .pull-1-of-8 { 118 | margin-right: calc(12.5% + 20px / 2); 119 | } 120 | 121 | .col-3-of-8 { 122 | width: calc(37.5% - 20px); 123 | } 124 | 125 | .push-3-of-8 { 126 | margin-left: calc(37.5% + 20px / 2); 127 | } 128 | 129 | .pull-3-of-8 { 130 | margin-right: calc(37.5% + 20px / 2); 131 | } 132 | 133 | .col-5-of-8 { 134 | width: calc(62.5% - 20px); 135 | } 136 | 137 | .push-5-of-8 { 138 | margin-left: calc(62.5% + 20px / 2); 139 | } 140 | 141 | .pull-5-of-8 { 142 | margin-right: calc(62.5% + 20px / 2); 143 | } 144 | 145 | .col-7-of-8 { 146 | width: calc(87.5% - 20px); 147 | } 148 | 149 | .push-7-of-8 { 150 | margin-left: calc(87.5% + 20px / 2); 151 | } 152 | 153 | .pull-7-of-8 { 154 | margin-right: calc(87.5% + 20px / 2); 155 | } 156 | 157 | .col-1-of-12 { 158 | width: calc(8.33333% - 20px); 159 | } 160 | 161 | .push-1-of-12 { 162 | margin-left: calc(8.33333% + 20px / 2); 163 | } 164 | 165 | .pull-1-of-12 { 166 | margin-right: calc(8.33333% + 20px / 2); 167 | } 168 | 169 | .col-2-of-12 { 170 | width: calc(16.66667% - 20px); 171 | } 172 | 173 | .push-2-of-12 { 174 | margin-left: calc(16.66667% + 20px / 2); 175 | } 176 | 177 | .pull-2-of-12 { 178 | margin-right: calc(16.66667% + 20px / 2); 179 | } 180 | 181 | .col-4-of-12 { 182 | width: calc(33.33333% - 20px); 183 | } 184 | 185 | .push-4-of-12 { 186 | margin-left: calc(33.33333% + 20px / 2); 187 | } 188 | 189 | .pull-4-of-12 { 190 | margin-right: calc(33.33333% + 20px / 2); 191 | } 192 | 193 | .col-5-of-12 { 194 | width: calc(41.66667% - 20px); 195 | } 196 | 197 | .push-5-of-12 { 198 | margin-left: calc(41.66667% + 20px / 2); 199 | } 200 | 201 | .pull-5-of-12 { 202 | margin-right: calc(41.66667% + 20px / 2); 203 | } 204 | 205 | .col-7-of-12 { 206 | width: calc(58.33333% - 20px); 207 | } 208 | 209 | .push-7-of-12 { 210 | margin-left: calc(58.33333% + 20px / 2); 211 | } 212 | 213 | .pull-7-of-12 { 214 | margin-right: calc(58.33333% + 20px / 2); 215 | } 216 | 217 | .col-8-of-12 { 218 | width: calc(66.66667% - 20px); 219 | } 220 | 221 | .push-8-of-12 { 222 | margin-left: calc(66.66667% + 20px / 2); 223 | } 224 | 225 | .pull-8-of-12 { 226 | margin-right: calc(66.66667% + 20px / 2); 227 | } 228 | 229 | .col-10-of-12 { 230 | width: calc(83.33333% - 20px); 231 | } 232 | 233 | .push-10-of-12 { 234 | margin-left: calc(83.33333% + 20px / 2); 235 | } 236 | 237 | .pull-10-of-12 { 238 | margin-right: calc(83.33333% + 20px / 2); 239 | } 240 | 241 | .col-11-of-12 { 242 | width: calc(91.66667% - 20px); 243 | } 244 | 245 | .push-11-of-12 { 246 | margin-left: calc(91.66667% + 20px / 2); 247 | } 248 | 249 | .pull-11-of-12 { 250 | margin-right: calc(91.66667% + 20px / 2); 251 | } 252 | 253 | @media (max-width:840px) { 254 | .m-hide { 255 | display: none; 256 | } 257 | 258 | .w-m-auto { 259 | -webkit-box-flex: 1; 260 | -ms-flex: 1; 261 | flex: 1; 262 | } 263 | 264 | .m-un-push { 265 | margin-left: 10px; 266 | } 267 | 268 | .m-un-pull { 269 | margin-right: 10px; 270 | } 271 | 272 | .col-m-1-of-4,.col-m-2-of-8 { 273 | width: calc(25% - 20px); 274 | } 275 | 276 | .push-m-1-of-4,.push-m-2-of-8 { 277 | margin-left: calc(25% + 20px / 2); 278 | } 279 | 280 | .pull-m-1-of-4,.pull-m-2-of-8 { 281 | margin-right: calc(25% + 20px / 2); 282 | } 283 | 284 | .col-m-2-of-4,.col-m-3-of-6,.col-m-4-of-8 { 285 | width: calc(50% - 20px); 286 | } 287 | 288 | .push-m-2-of-4,.push-m-3-of-6,.push-m-4-of-8 { 289 | margin-left: calc(50% + 20px / 2); 290 | } 291 | 292 | .pull-m-2-of-4,.pull-m-3-of-6,.pull-m-4-of-8 { 293 | margin-right: calc(50% + 20px / 2); 294 | } 295 | 296 | .col-m-3-of-4,.col-m-6-of-8 { 297 | width: calc(75% - 20px); 298 | } 299 | 300 | .push-m-3-of-4,.push-m-6-of-8 { 301 | margin-left: calc(75% + 20px / 2); 302 | } 303 | 304 | .pull-m-3-of-4,.pull-m-6-of-8 { 305 | margin-right: calc(75% + 20px / 2); 306 | } 307 | 308 | .col-m-4-of-4,.col-m-6-of-6,.col-m-8-of-8 { 309 | width: calc(100% - 20px); 310 | } 311 | 312 | .push-m-4-of-4,.push-m-6-of-6,.push-m-8-of-8 { 313 | margin-left: calc(100% + 20px / 2); 314 | } 315 | 316 | .pull-m-4-of-4,.pull-m-6-of-6,.pull-m-8-of-8 { 317 | margin-right: calc(100% + 20px / 2); 318 | } 319 | 320 | .col-m-1-of-6 { 321 | width: calc(16.66667% - 20px); 322 | } 323 | 324 | .push-m-1-of-6 { 325 | margin-left: calc(16.66667% + 20px / 2); 326 | } 327 | 328 | .pull-m-1-of-6 { 329 | margin-right: calc(16.66667% + 20px / 2); 330 | } 331 | 332 | .col-m-2-of-6 { 333 | width: calc(33.33333% - 20px); 334 | } 335 | 336 | .push-m-2-of-6 { 337 | margin-left: calc(33.33333% + 20px / 2); 338 | } 339 | 340 | .pull-m-2-of-6 { 341 | margin-right: calc(33.33333% + 20px / 2); 342 | } 343 | 344 | .col-m-4-of-6 { 345 | width: calc(66.66667% - 20px); 346 | } 347 | 348 | .push-m-4-of-6 { 349 | margin-left: calc(66.66667% + 20px / 2); 350 | } 351 | 352 | .pull-m-4-of-6 { 353 | margin-right: calc(66.66667% + 20px / 2); 354 | } 355 | 356 | .col-m-5-of-6 { 357 | width: calc(83.33333% - 20px); 358 | } 359 | 360 | .push-m-5-of-6 { 361 | margin-left: calc(83.33333% + 20px / 2); 362 | } 363 | 364 | .pull-m-5-of-6 { 365 | margin-right: calc(83.33333% + 20px / 2); 366 | } 367 | 368 | .col-m-1-of-8 { 369 | width: calc(12.5% - 20px); 370 | } 371 | 372 | .push-m-1-of-8 { 373 | margin-left: calc(12.5% + 20px / 2); 374 | } 375 | 376 | .pull-m-1-of-8 { 377 | margin-right: calc(12.5% + 20px / 2); 378 | } 379 | 380 | .col-m-3-of-8 { 381 | width: calc(37.5% - 20px); 382 | } 383 | 384 | .push-m-3-of-8 { 385 | margin-left: calc(37.5% + 20px / 2); 386 | } 387 | 388 | .pull-m-3-of-8 { 389 | margin-right: calc(37.5% + 20px / 2); 390 | } 391 | 392 | .col-m-5-of-8 { 393 | width: calc(62.5% - 20px); 394 | } 395 | 396 | .push-m-5-of-8 { 397 | margin-left: calc(62.5% + 20px / 2); 398 | } 399 | 400 | .pull-m-5-of-8 { 401 | margin-right: calc(62.5% + 20px / 2); 402 | } 403 | 404 | .col-m-7-of-8 { 405 | width: calc(87.5% - 20px); 406 | } 407 | 408 | .push-m-7-of-8 { 409 | margin-left: calc(87.5% + 20px / 2); 410 | } 411 | 412 | .pull-m-7-of-8 { 413 | margin-right: calc(87.5% + 20px / 2); 414 | } 415 | } 416 | 417 | @media (max-width:480px) { 418 | .s-hide { 419 | display: none; 420 | } 421 | 422 | .w-s-auto { 423 | -webkit-box-flex: 1; 424 | -ms-flex: 1; 425 | flex: 1; 426 | } 427 | 428 | .s-un-push { 429 | margin-left: 10px; 430 | } 431 | 432 | .s-un-pull { 433 | margin-right: 10px; 434 | } 435 | 436 | .col-s-1-of-4 { 437 | width: calc(25% - 20px); 438 | } 439 | 440 | .push-s-1-of-4 { 441 | margin-left: calc(25% + 20px / 2); 442 | } 443 | 444 | .pull-s-1-of-4 { 445 | margin-right: calc(25% + 20px / 2); 446 | } 447 | 448 | .col-s-2-of-4,.col-s-3-of-6 { 449 | width: calc(50% - 20px); 450 | } 451 | 452 | .push-s-2-of-4,.push-s-3-of-6 { 453 | margin-left: calc(50% + 20px / 2); 454 | } 455 | 456 | .pull-s-2-of-4,.pull-s-3-of-6 { 457 | margin-right: calc(50% + 20px / 2); 458 | } 459 | 460 | .col-s-3-of-4 { 461 | width: calc(75% - 20px); 462 | } 463 | 464 | .push-s-3-of-4 { 465 | margin-left: calc(75% + 20px / 2); 466 | } 467 | 468 | .pull-s-3-of-4 { 469 | margin-right: calc(75% + 20px / 2); 470 | } 471 | 472 | .col-s-4-of-4,.col-s-6-of-6 { 473 | width: calc(100% - 20px); 474 | } 475 | 476 | .push-s-4-of-4,.push-s-6-of-6 { 477 | margin-left: calc(100% + 20px / 2); 478 | } 479 | 480 | .pull-s-4-of-4,.pull-s-6-of-6 { 481 | margin-right: calc(100% + 20px / 2); 482 | } 483 | 484 | .col-s-1-of-6 { 485 | width: calc(16.66667% - 20px); 486 | } 487 | 488 | .push-s-1-of-6 { 489 | margin-left: calc(16.66667% + 20px / 2); 490 | } 491 | 492 | .pull-s-1-of-6 { 493 | margin-right: calc(16.66667% + 20px / 2); 494 | } 495 | 496 | .col-s-2-of-6 { 497 | width: calc(33.33333% - 20px); 498 | } 499 | 500 | .push-s-2-of-6 { 501 | margin-left: calc(33.33333% + 20px / 2); 502 | } 503 | 504 | .pull-s-2-of-6 { 505 | margin-right: calc(33.33333% + 20px / 2); 506 | } 507 | 508 | .col-s-4-of-6 { 509 | width: calc(66.66667% - 20px); 510 | } 511 | 512 | .push-s-4-of-6 { 513 | margin-left: calc(66.66667% + 20px / 2); 514 | } 515 | 516 | .pull-s-4-of-6 { 517 | margin-right: calc(66.66667% + 20px / 2); 518 | } 519 | 520 | .col-s-5-of-6 { 521 | width: calc(83.33333% - 20px); 522 | } 523 | 524 | .push-s-5-of-6 { 525 | margin-left: calc(83.33333% + 20px / 2); 526 | } 527 | 528 | .pull-s-5-of-6 { 529 | margin-right: calc(83.33333% + 20px / 2); 530 | } 531 | } 532 | 533 | @media (min-width:480px) { 534 | .s-and-lower { 535 | display: none; 536 | } 537 | } 538 | 539 | @media (min-width:840px) { 540 | .m-and-lower { 541 | display: none; 542 | } 543 | } --------------------------------------------------------------------------------