├── images
└── milo.png
├── example
├── main.js
├── style.css
├── index.html
└── bundle.js
├── .gitignore
├── package.json
├── lib
└── debounce.js
├── README.md
├── .jshintrc
├── milo.min.js
└── milo.js
/images/milo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidchase/milo/master/images/milo.png
--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | var Milo = require('../milo');
3 |
4 | var milo = new Milo({
5 | container: '.grid'
6 | });
7 |
8 | window.addEventListener('load', milo.buildGrid);
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | ### Node ###
2 | # Logs
3 | logs
4 | *.log
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | node_modules
18 |
19 | *.DS_Store
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "milo-grid",
3 | "version": "1.0.1",
4 | "description": "Javascript Grid fallback for browsers that dont support column-count",
5 | "main": "milo.js",
6 | "directories": {
7 | "example": "example"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/davidchase/milo.git"
12 | },
13 | "keywords": [
14 | "grid",
15 | "columns",
16 | "grid-support"
17 | ],
18 | "author": "David Chase",
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/davidchase/milo/issues"
22 | },
23 | "homepage": "https://github.com/davidchase/milo#readme"
24 | }
25 |
--------------------------------------------------------------------------------
/lib/debounce.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | module.exports = function debounce(fn, threshold, isAsap) {
3 | var timeout, result;
4 |
5 | var debounced = function() {
6 | var args = arguments;
7 | var context = this;
8 |
9 | var delayed = function() {
10 | if (!isAsap) {
11 | result = fn.apply(context, args);
12 | }
13 | timeout = null;
14 | };
15 | if (timeout) {
16 | clearTimeout(timeout);
17 | } else if (isAsap) {
18 | result = fn.apply(context, args);
19 | }
20 | timeout = setTimeout(delayed, threshold);
21 | return result;
22 | };
23 | debounced.cancel = function() {
24 | clearTimeout(timeout);
25 | };
26 | return debounced;
27 | };
--------------------------------------------------------------------------------
/example/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | body {
7 | background: #f6f4f2;
8 | font-family:'Helvetica Neue', Helvetica, sans-serif;
9 | margin: 13px;
10 | }
11 | h1 {
12 | text-align: center;
13 | margin-bottom: 26px;
14 | color: #3e3e3e;
15 | }
16 | .grid {
17 | margin: 0 auto;
18 | position: relative;
19 | width: 100%;
20 | }
21 | .grid-item {
22 | font-size: 13px;
23 | padding: 0px 0px 32px 0px;
24 | position: absolute;
25 | background: #fff;
26 | box-sizing: border-box;
27 | box-shadow: 0px 2px 5px 1px #ccc;
28 | width:auto;
29 | height: auto;
30 | }
31 |
32 | img {
33 | max-width: 100%;
34 | height:auto;
35 | display: inline-block;
36 | vertical-align: middle;
37 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Milo
2 | ======
3 |
4 | 
5 |
6 | A small pure javascript grid that provides as a nice fallback to browsers
7 | that don't currently support column-count such as IE8, IE9
8 |
9 | Simple usage:
10 | -------------
11 |
12 | Check out the [**demo**](https://rawgit.com/davidchase/milo/master/example/index.html)
13 |
14 | Use [browserify](http://browserify.org) for client commonjs `require`
15 |
16 | `npm install -g browserify`
17 |
18 | ```js
19 | var Milo = require('./milo');
20 |
21 | var milo = new Milo({
22 | container: '.grid'
23 | });
24 |
25 | window.addEventListener('load', milo.buildGrid);
26 | ```
27 |
28 | HTML can be formatted like so:
29 |
30 | ```html
31 |
32 |
...
33 |
...
34 |
...
35 |
...
36 | ...
37 |
The Milo Project
9 | with special guest Bill Murray
10 | Images courtesy of http://fillmurray.com
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 |