Permalink
Browse files

Refactor API big commit 🏭

  • Loading branch information...
1 parent acd22ff commit 8d2b08d905a341dbae2a2278a60499404eef6c14 @henriquea committed Apr 19, 2016
Showing with 312 additions and 2,069 deletions.
  1. +20 βˆ’0 CHANGELOG.md
  2. +1 βˆ’4 CONTRIBUTING.md
  3. +0 βˆ’5 README.md
  4. +2 βˆ’2 dist/minigrid.min.js
  5. +0 βˆ’158 examples/basic.html
  6. +0 βˆ’39 examples/styles.css
  7. +1 βˆ’9 package.json
  8. +2 βˆ’1 site/.gitignore
  9. +58 βˆ’0 site/README.md
  10. +28 βˆ’0 site/build.js
  11. +0 βˆ’169 site/demo.js
  12. +14 βˆ’37 site/index.html
  13. +0 βˆ’266 site/index.js
  14. +6 βˆ’20 site/package.json
  15. +0 βˆ’23 site/server.js
  16. +0 βˆ’5 site/ship.example.conf
  17. BIN site/static/twitter-card.jpg
  18. +109 βˆ’0 site/styles.css
  19. +0 βˆ’87 site/styles/demo.css
  20. +0 βˆ’113 site/styles/index.css
  21. +0 βˆ’427 site/styles/normalize.css
  22. +0 βˆ’418 site/styles/skeleton.css
  23. +0 βˆ’149 site/styles/syntax.css
  24. +17 βˆ’0 site/template.ejs
  25. +0 βˆ’29 site/webpack.config.dist.js
  26. +0 βˆ’57 site/webpack.config.js
  27. +21 βˆ’28 src/index.js
  28. +33 βˆ’23 tests/index.js
View
@@ -2,6 +2,26 @@
### v3.0.0
+The major change is the API. We took one step back to its core principle of "keep it simple".
+
+```js
+var props = {
+ container: '.cards',
+ item: '.card',
+ guter: 8
+};
+var grid = new Minigrid(props);
+grid.mount();
+```
+
+– Back to 2kb πŸŽ‰
+- `mount()` method to initialize Minigrid
+- Animation was removed due to issues when dealing with many items which is the most of the user cases
+- Remove the custom loading causing issues when loaded with require
+- Round `posX`, `poxY` values #48
+- Fixes the issue when working with multiple grids/selectors #43
+- Works when loaded via module #40
+
### v2.2.0
- Add containerLoaded and itemLoaded options #37
View
@@ -1,9 +1,6 @@
**Be nice** 😎
-Bare in mind that minigrid's main concept is simplicity. The goal is to keep
-the API always at 2kb. Bug fixes are more than welcome! For any new feature
-please [submit an issue](https://github.com/henriquea/minigrid/issues) first
-before send any pull request.
+Bare in mind that minigrid's main concept is simplicity. The goal is to keep the API always at 2kb. Bug fixes are more than welcome! For any new feature please [submit an issue](https://github.com/henriquea/minigrid/issues) first before send any pull request.
🍺
View
@@ -4,11 +4,6 @@ Minigrid is a minimal 2kb zero dependency cascading grid layout.
Website & Documentation: [http://alves.im/minigrid](http://alves.im/minigrid/).
-## Limitations
-
-Minigrid was built having in mind "cards" with same width and different heights.
-If your cards have different width sizes or you need more control I'd recommend [Isotope](http://isotope.metafizzy.co).
-
## Contributing
Plese see [CONTRIBUTING](CONTRIBUTING.md).
@@ -1,2 +1,2 @@
-/* @license minigrid v2.2.0 – minimal cascading grid layout http://alves.im/minigrid */
-!function(e){"use strict";function t(e){var t=e.container instanceof Node?e.container:document.querySelector(e.container);if(!t)return!1;var n=e.item instanceof NodeList?e.item:t.querySelectorAll(e.item);return n&&0!==n.length?(e.containerLoaded&&"string"==typeof e.containerLoaded||(e.containerLoaded=!1),e.containerLoaded&&"string"==typeof e.itemLoaded||(e.itemLoaded=!1),o||e.skipWindowOnLoad?void i(t,n,e):void(/webkit/.test(navigator.userAgent.toLowerCase())?window.addEventListener("load",function(){i(t,n,e)}):window.onload=function(){i(t,n,e)})):!1}function i(e,t,i){i.containerLoaded?e.classList.add(i.containerLoaded):/loaded/.test(e.className)||e.classList.add(e.className.split(" ")[0]+"--loaded"),o=!0;var a="number"==typeof i.gutter&&isFinite(i.gutter)&&Math.floor(i.gutter)===i.gutter?i.gutter:0,d=i.done;e.style.width="";var r=Array.prototype.forEach,s=e.getBoundingClientRect().width,c=t[0].getBoundingClientRect().width+a,l=Math.max(Math.floor((s-a)/c),1),u=0;s=c*l+a+"px",e.style.width=s,e.style.position="relative";for(var f=[],m=[],p=0;l>p;++p)m.push(p*c+a),f.push(a);r.call(t,function(e){var t=f.slice(0).sort(function(e,t){return e-t}).shift();t=f.indexOf(t);var o=m[t],d=f[t];return e.style.position="absolute",e.style.webkitBackfaceVisibility=e.style.backfaceVisibility="hidden",i.itemLoaded?e.classList.add(i.itemLoaded):/loaded/.test(e.className)||e.classList.add(e.className.split(" ")[0]+"--loaded"),!i.animate&&n&&(e.style[n]="translate3D("+o+"px,"+d+"px, 0)"),f[t]+=e.getBoundingClientRect().height+a,u+=1,i.animate?i.animate(e,o,d,u):void 0});var y=f.slice(0).sort(function(e,t){return e-t}).pop();e.style.height=y+"px","function"==typeof d&&d(t)}var n,o;!function(){var e,t=document.createElement("a").style;void 0!==t[e="webkitTransform"]&&(n=e),void 0!==t[e="msTransform"]&&(n=e),void 0!==t[e="transform"]&&(n=e)}(),"function"==typeof define&&define.amd?define(function(){return t}):"undefined"!=typeof module&&module.exports?module.exports=t:e.minigrid=t}(this);
+/* @license Minigrid v3.0.0 – minimal cascading grid layout http://alves.im/Minigrid */
+!function(t,e){"function"==typeof define&&define.amd?define(e):"object"==typeof exports?module.exports=e():t.Minigrid=e()}(this,function(t){"use strict";function e(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return t}var i=function(t){var i=t.container instanceof Node?t.container:document.querySelector(t.container),n=t.item instanceof NodeList?t.item:i.querySelectorAll(t.item);this.props=e(t,{container:i,nodeList:n})};return i.prototype.mount=function(){if(!this.props.container)return!1;if(!this.props.nodeList||0===this.props.nodeList.length)return!1;var t="number"==typeof this.props.gutter&&isFinite(this.props.gutter)&&Math.floor(this.props.gutter)===this.props.gutter?this.props.gutter:0,e=this.props.done,i=this.props.container,n=this.props.nodeList;i.style.width="";var r=Array.prototype.forEach,o=i.getBoundingClientRect().width,s=n[0].getBoundingClientRect().width+t,p=Math.max(Math.floor((o-t)/s),1),a=0;o=s*p+t+"px",i.style.width=o,i.style.position="relative";for(var c=[],u=[],f=0;p>f;++f)u.push(f*s+t),c.push(t);r.call(n,function(e){var i=c.slice(0).sort(function(t,e){return t-e}).shift();i=c.indexOf(i);var n=parseInt(u[i]),r=parseInt(c[i]);e.style.position="absolute",e.style.overflow="hidden",e.style.webkitBackfaceVisibility=e.style.backfaceVisibility="hidden",e.style.transformStyle="preserve-3d",e.style.transform="translate3D("+n+"px,"+r+"px, 0)",c[i]+=e.getBoundingClientRect().height+t,a+=1});var h=c.slice(0).sort(function(t,e){return t-e}).pop();i.style.height=h+"px","function"==typeof e&&e(n)},i});
View
@@ -1,158 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
-
- <meta charSet="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
-
- <title>Minigrid basic example</title>
-
- <link rel="stylesheet" type="text/css" href="styles.css">
-
- <style type="text/css">
- .cards {
- margin: auto; /* keep grid in the center */
- }
-
- .card {
- width: 200px;
- overflow: hidden;
- }
- </style>
-
- </head>
-
- <body>
-
- <div class="demo">
-
- <div class="cards">
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/2a/30/13/2a3013448eb806e51da5de96eb38cf36.jpg" />
- </div>
- <div class="card-info">
- Villetta Barrea and Scanno, Abruzzo, Italy
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/fa/a2/41/faa24120c4689443e2169366972cb194.jpg" />
- </div>
- <div class="card-info">
- VΓΈringfossen, Norway
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/f9/06/4c/f9064c91a4f63705e5a4408cda6739de.jpg" />
- </div>
- <div class="card-info">
- Theogefiro, Zitsa, Greece
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/ab/e2/1b/abe21b2f3a5be204cb2436d0b9cc6a1d.jpg" />
- </div>
- <div class="card-info">
- Los Andes, Argentina
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/7f/20/c5/7f20c589a41bffc8c0b8960fc8001160.jpg" />
- </div>
- <div class="card-info">
- Moon Mountain, Yangshuo, Guangxi, China
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/54/a0/e0/54a0e0acf60f33f9b64528bd364ce5d6.jpg" />
- </div>
- <div class="card-info">
- Valley of the Ten Peaks, Moraine Lake, Canada
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/d2/d5/aa/d2d5aa40108038f92d4cb0edca78ec26.jpg" />
- </div>
- <div class="card-info">
- Hawaii
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/f7/e2/c0/f7e2c018f5ec39a83df831495ed9cad5.jpg" />
- </div>
- <div class="card-info">
- ChichimilΓ‘, Yucatan, Mexico
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/a7/51/a9/a751a9a163c76ea37eba4747c35d1940.jpg" />
- </div>
- <div class="card-info">
- Basalt Pinnacles, Scotland
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/d9/86/6b/d9866b911c08387bc8ab17a6c9897e85.jpg" />
- </div>
- <div class="card-info">
- Somewhere, Iceland
- </div>
- </div>
- </div>
-
- </div>
-
- </div>
-
- <script src="../src/index.js"></script>
- <script>
- window.onload = function(){
- var grid = new minigrid({
- container: '.cards',
- item: '.card',
- gutter: 6
- });
- grid.mount();
- };
- </script>
-
- </body>
-
-</html>
View
@@ -1,39 +0,0 @@
-/* anything here is optional only being used for styling the cards */
-body {
- color: #212121;
- font-size: 13px;
- font-family: 'Helvetica Neue', sans-serif;
- background: #ECEFF1;
-}
-
-.demo {
- margin: 0 auto;
- padding: 60px 0;
- max-width: 890px;
-}
-
-.card {
- background: #fff;
- -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
- box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
- border-radius: 4px;
-}
-
-.card-wrapper {
- border-radius: 4px;
-}
-
-.card-image {
- width: 100%;
-}
-
-.card-image img {
- width: 100%;
- border-radius: 4px 4px 0 0;
-}
-
-.card-info {
- padding: 10px 16px;
- color: rgb(33, 25, 34);
- text-align: left;
-}
View
@@ -36,18 +36,10 @@
},
"homepage": "http://alves.im/minigrid",
"devDependencies": {
- "babel-core": "^5.8.24",
- "babel-loader": "^5.3.2",
"browserify": "^11.0.1",
"eslint": "^1.4.3",
- "eslint-loader": "^1.0.0",
- "extract-text-webpack-plugin": "^0.8.2",
- "file-loader": "^0.8.4",
- "html-loader": "^0.3.0",
- "json-loader": "^0.5.3",
"phantomjs": "1.9.2-6",
"tape": "^4.0.2",
- "tape-run": "^1.1.0",
- "url-loader": "^0.5.6"
+ "tape-run": "^1.1.0"
}
}
View
@@ -1 +1,2 @@
-dist
+.DS_Store
+node_modules
View
@@ -0,0 +1,58 @@
+- [GitHub](https://github.com/henriquea/minigrid)
+- [npm](https://www.npmjs.com/package/minigrid)
+
+# Minigrid
+
+Minimal 2kb zero dependency cascading grid layout without pain.
+
+## Usage
+
+It works on a grid container with a group of grid items.
+
+```
+<div class="cards">
+ <div class="card"></div>
+ <div class="card"></div>
+ <div class="card"></div>
+</div>
+```
+
+Then:
+
+```
+var grid = new Minigrid({
+ container: '.cards',
+ item: '.card',
+ gutter: 6
+});
+grid.mount();
+```
+
+## Installation
+
+Get it from <strong>npm</strong>.
+
+```
+npm install minigrid
+```
+
+Or 1998 script include tag from **npmcdn**.
+
+```
+npm install minigrid
+```
+
+## Upgrade
+
+Upgrading from v1.x or v2.x?
+
+Please read the [CHANGELOG](https://github.com/henriquea/minigrid/blob/master/CONTRIBUTING.md) for API changes.
+
+## Limitations
+
+Minigrid was built having in mind "cards" with same width and different heights. If your cards have different width sizes or you need more power I’d recommend [Isotope](http://isotope.metafizzy.co/).
+
+- **Minigrid** v3.0.0
+- [GitHub](https://github.com/henriquea/minigrid)
+- [npm](https://www.npmjs.com/package/minigrid)
+- [@healves82](https://twitter.com/healves82)
View
@@ -0,0 +1,28 @@
+var fs = require('fs');
+var index = fs.readFileSync('./README.md', 'utf8');
+var template = fs.readFileSync('./template.ejs', 'utf8');
+
+var minify = require('html-minifier').minify;
+var ejs = require('ejs');
+var remark = require('remark');
+var html = require('remark-html');
+var yamlConfig = require('remark-yaml-config');
+var processor = remark().use(yamlConfig).use(html);
+var doc = processor.process([
+ '---',
+ 'remark:',
+ ' commonmark: true',
+ '---',
+ '',
+ index
+].join('\n'));
+
+var data = { content: doc };
+var options = {};
+var rendered = ejs.render(template, data, options);
+
+var html = minify(rendered, {
+ collapseWhitespace: true
+});
+
+fs.writeFileSync('index.html', html);
Oops, something went wrong.

0 comments on commit 8d2b08d

Please sign in to comment.