{"_id":"colcade","_rev":"4-3d3a91834929db30213661eb2997ef0c","name":"colcade","description":"Lightweight masonry layout","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"colcade","version":"0.1.0","description":"Lightweight masonry layout","main":"colcade.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/desandro/colcade.git"},"keywords":["masonry"],"author":{"name":"David DeSandro"},"license":"MIT","bugs":{"url":"https://github.com/desandro/colcade/issues"},"homepage":"https://github.com/desandro/colcade#readme","gitHead":"f6925e948c5d38fae12cee1f66cabcc1eb4f7fe4","_id":"colcade@0.1.0","_shasum":"5af58b5df8360efc5a73259068a2a876519fd9d6","_from":".","_npmVersion":"2.14.12","_nodeVersion":"4.2.4","_npmUser":{"name":"desandro","email":"desandrocodes@gmail.com"},"maintainers":[{"name":"desandro","email":"desandrocodes@gmail.com"}],"dist":{"shasum":"5af58b5df8360efc5a73259068a2a876519fd9d6","tarball":"https://registry.npmjs.org/colcade/-/colcade-0.1.0.tgz","integrity":"sha512-BpR/7XYsvx439Eu9V2kD7Bh3r+AaxdVxcpbsH36sbylrEo5hyp5YpH6b0yBxnegQcBQDGmv1FKtZraIjiAKsiA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIqvpXokjGNBpJVKTMkdDGsVfFcOUs5dZEFYqJJwK3iAIgWb6E+1IwC516zj0ukqxWTApH+PP/2dcAJaq1NQSIxw4="}]},"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/colcade-0.1.0.tgz_1461210355464_0.07346577034331858"}},"0.2.0":{"name":"colcade","version":"0.2.0","description":"Lightweight masonry layout","main":"colcade.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/desandro/colcade.git"},"keywords":["masonry"],"author":{"name":"David DeSandro"},"license":"MIT","bugs":{"url":"https://github.com/desandro/colcade/issues"},"homepage":"https://github.com/desandro/colcade#readme","gitHead":"9f6008ffc631384d915dae0fe8216f56af2e2f71","_id":"colcade@0.2.0","_shasum":"1d4c949d677655865089ba0b78769693beca0b32","_from":".","_npmVersion":"2.14.12","_nodeVersion":"4.2.4","_npmUser":{"name":"desandro","email":"desandrocodes@gmail.com"},"maintainers":[{"name":"desandro","email":"desandrocodes@gmail.com"}],"dist":{"shasum":"1d4c949d677655865089ba0b78769693beca0b32","tarball":"https://registry.npmjs.org/colcade/-/colcade-0.2.0.tgz","integrity":"sha512-ccbmKzL0iZZvR1MZeR7r8wIDRSGGQxZI27NyILMjH8F6zOK8Xf04fEVJi2ajUlVgvY1uIRKml5KqHUv1eewBZw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0czxS1G0Fpc/pFza+7JTTT6kHmdKw81iz8742D/p2nQIhAO5yF/ZVvSQVYLD/pcF+lL3Sh0bDkOwxqdMNKYm68aJq"}]},"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/colcade-0.2.0.tgz_1463011965954_0.9056364679709077"}}},"readme":"# Colcade\n\n_Lightweight masonry layout_\n\n## Colcade vs. Masonry\n\n[Masonry is great](http://masonry.desandro.com), but it has grown big as it has grown older. Colcade is designed to be small & fast. I recommend using Colcade over Masonry, but read over this feature comparison.\n\n### Same features\n\n+ Masonry grid layout\n+ Works as a jQuery plugin or with vanilla JS\n+ Initialize in HTML\n\n### Better features\n\n+ Much smaller. 1/8 the size of Masonry\n+ Better fluid/responsive layout, using native browser positioning\n+ One file, no dependencies, no package `dist` built file\n+ Does not require [imagesLoaded when using images](http://masonry.desandro.com/layout.html#imagesloaded)\n\n### Worse features\n\n+ No multi-column-spanning items\n\n```\nOK                |  No\n####  ####  ####  |  ##########  ####\n####  ####  ####  |  ##########  ####\n      ####        |\n####        ####  |  ####  ##########\n####  ####  ####  |  ####  ##########\n####  ####  ####  |  ####\n      ####        |\n```\n\n+ No built-in item transitions for [layout](http://masonry.desandro.com/methods.html#layout-masonry), [appending](http://masonry.desandro.com/methods.html#appended), [prepending](http://masonry.desandro.com/methods.html#prepended), or [removing](http://masonry.desandro.com/methods.html#remove)\n+ No [stamps](http://masonry.desandro.com/options.html#stamp)\n+ No [fitWidth centering](http://masonry.desandro.com/options.html#fitwidth)\n\n## Install\n\nDownload: [colcade.js](https://npmcdn.com/colcade@0/colcade.js)\n\nCDN:\n\n``` html\n<script src=\"https://npmcdn.com/colcade@0/colcade.js\"></script>\n```\n\n[npm](https://www.npmjs.com/package/colcade): `npm install colcade`\n\nBower: `bower install colcade`\n\n## Demos\n\n+ [Basic, HTML init](http://codepen.io/desandro/pen/vGPVOR)\n+ [jQuery](http://codepen.io/desandro/pen/vGPVOR)\n+ [Vanilla JS](http://codepen.io/desandro/pen/EKMdjN)\n+ [Images](http://codepen.io/desandro/pen/pyYxvz)\n\n## Usage\n\nColcade works by moving item elements into column elements.\n\n### HTML\n\n``` html\n<div class=\"grid\">\n  <!-- columns -->\n  <div class=\"grid-col grid-col--1\"></div>\n  <div class=\"grid-col grid-col--2\"></div>\n  <div class=\"grid-col grid-col--3\"></div>\n  <div class=\"grid-col grid-col--4\"></div>\n  <!-- items -->\n  <div class=\"grid-item\">...</div>\n  <div class=\"grid-item\">...</div>\n  <div class=\"grid-item\">...</div>\n  ...\n</div>\n```\n\n### CSS\n\nSizing of the columns is handled by your own CSS. Change the number of columns by hiding or showing them.\n\n``` css\n/* Using floats */\n.grid-col {\n  float: left;\n  width: 50%;\n}\n\n/* 2 columns by default, hide columns 2 & 3 */\n.grid-col--2, .grid-col--3 { display: none }\n\n/* 3 columns at medium size */\n@media ( min-width: 768px ) {\n  .grid-col { width: 33.333%; }\n  .grid-col--2 { display: block; } /* show column 2 */\n}\n\n/* 4 columns at large size */\n@media ( min-width: 1080px ) {\n  .grid-col { width: 25%; }\n  .grid-col--3 { display: block; } /* show column 3 */\n}\n```\n\n[Edit float demo on CodePen](http://codepen.io/desandro/pen/EKMdxg)\n\n``` css\n/* with flexbox */\n.grid {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.grid-col {\n  -webkit-box-flex: 1;\n  -webkit-flex-grow: 1;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n/* 2 columns by default, hide columns 2 & 3 */\n.grid-col--2, .grid-col--3 { display: none }\n\n/* 3 columns at medium size */\n@media ( min-width: 768px ) {\n  .grid-col--2 { display: block; } /* show column 2 */\n}\n\n/* 4 columns at large size */\n@media ( min-width: 1080px ) {\n  .grid-col--3 { display: block; } /* show column 3 */\n}\n```\n\n[Edit flexbox demo on CodePen](http://codepen.io/desandro/pen/RadeWy)\n\n### Initialize Colcade\n\nSet selectors for column and item elements in the options.\n\nWith jQuery. [Edit jQuery demo on CodePen](http://codepen.io/desandro/pen/vGPVOR)\n\n``` js\n$('.grid').colcade({\n  columns: '.grid-col',\n  items: '.grid-item'\n})\n```\n\nWith vanilla JS. [Edit vanilla JS demo on CodePen](http://codepen.io/desandro/pen/EKMdjN)\n\n``` js\n// element as first argument\nvar grid = document.querySelector('.grid');\nvar colc = new Colcade( grid, {\n  columns: '.grid-col',\n  items: '.grid-item'\n});\n\n// selector string as first argument\nvar colc = new Colcade( '.grid', {\n  columns: '.grid-col',\n  items: '.grid-item'\n});\n```\n\nWith HTML. [Edit HTML demo on CodePen](http://codepen.io/desandro/pen/EKMdxg)\n\n``` html\n<div class=\"grid\" data-colcade=\"columns: .grid-col, items: .grid-item\">\n  ...\n</div>\n```\n\n## Methods\n\n### append\n\nAdd items to end of layout.\n\n``` js\n// jQuery\n$grid.colcade( 'append', items )\n// vanilla JS\ncolc.append( items )\n```\n\n### prepend\n\nAdd items to beginning of layout.\n\n``` js\n// jQuery\n$grid.colcade( 'prepend', items )\n// vanilla JS\ncolc.prepend( items )\n```\n\n### destroy\n\nRemove Colcade behavior completely.\n\n``` js\n// jQuery\n$grid.colcade('destroy')\n// vanilla JS\ncolc.destroy()\n```\n\n---\n\nBy David DeSandro\n\nMIT License. Have at it.\n","maintainers":[{"name":"desandro","email":"desandrocodes@gmail.com"}],"time":{"modified":"2022-06-13T06:29:51.174Z","created":"2016-04-21T03:45:57.812Z","0.1.0":"2016-04-21T03:45:57.812Z","0.2.0":"2016-05-12T00:12:48.414Z"},"homepage":"https://github.com/desandro/colcade#readme","keywords":["masonry"],"repository":{"type":"git","url":"git+https://github.com/desandro/colcade.git"},"author":{"name":"David DeSandro"},"bugs":{"url":"https://github.com/desandro/colcade/issues"},"license":"MIT","readmeFilename":"README.md"}