-<!DOCTYPE html><html lang="en-US"><head><title>Bricks.js</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="style.css"></head><body><h1 class="logo">Bricks.js</h1><div class="wrapper"><header class="header"><div class="header-container"><h2 class="header-heading">A blazing fast <span class="highlight">masonry layout</span> generator for fixed width elements</h2><a class="header-cta" href="https://github.com/callmecavs/bricks.js" target="_blank"><img class="header-cta-icon" src="images/header/cta.svg">Documentation on GitHub</a></div><svg class="header-bricks" xmlns="http://www.w3.org/2000/svg" width="84px" height="34px" viewBox="0 0 84 34" fill="#3D1F37"><path class="header-bricks-piece header-bricks-piece-1" d="M38.7,34H0.2l1.4-13.7h35.8L38.7,34z"></path><path class="header-bricks-piece header-bricks-piece-2" d="M83.8,34H45.3l1.4-13.7h35.8L83.8,34z"></path><path class="header-bricks-piece header-bricks-piece-3" d="M61.3,13.7H22.7L24.1,0h35.8L61.3,13.7z"></path></svg><hr class="header-rule"></header><main class="content"><div class="content-section"><p class="content-heading">Problem</p><div class="content-right"><p class="content-text">Current masonry solutions <span class="highlight">lack performance, and are bloated with unnecessary features.</span> In addition, they:</p><ul class="content-list"><li class="content-list-item">Are built on dependencies, like jQuery</li><li class="content-list-item">Mandate HTML markup, or require a CSS stylesheet</li><li class="content-list-item content-list-item-last">Position elements with transforms, making animation difficult</li></ul></div></div><div class="content-section"><p class="content-heading">Solution</p><div class="content-right"><p class="content-text">Bricks capitalizes on <span class="highlight">batched reading of layout properties</span> for blazing fast packing time, no matter how many items. Besides performance, it features:</p><ul class="content-list"><li class="content-list-item">No required HTML markup or CSS stylesheet</li><li class="content-list-item">Minimal, powerful, and readable configuration</li><li class="content-list-item">Optional resize handling</li><li class="content-list-item content-list-item-last">Optimized handling of dynamically added items</li></ul></div></div><div class="content-section content-section-last"><div class="demo-heading"><p class="content-heading">Demo</p><p><a class="demo-cta demo-cta-mobile" href="#" data-reload><img class="demo-cta-icon" src="images/demo/reload.svg">Repack</a></p></div><div class="content-right"><div class="demo-controls"><div class="demo-wrap"><p class="demo-text">Number of Bricks</p><input class="demo-input" placeholder="25" data-input> <a class="demo-cta demo-cta-tablet" href="#" data-reload><img class="demo-cta-icon" src="images/demo/reload.svg">Repack</a></div><div class="demo-wrap"><p class="demo-text">Pack Time</p><p class="demo-speed" data-result>100 ms</p><img class="demo-speed-icon" src="images/demo/fire.svg"></div></div></div></div></main><section class="grid" data-grid></section><footer class="footer"><a class="footer-cta" href="https://github.com/callmecavs/bricks.js" target="_blank"><img class="footer-cta-icon" src="images/footer/cta.svg">Documentation</a><p class="footer-credit"><span class="footer-credit-prefix">License</span> <span class="footer-credit-text">MIT</span></p><p class="footer-credit"><span class="footer-credit-prefix">Made by</span> <a class="footer-credit-text" href="http://callmecavs.com/" target="_blank">Mike Cavalea</a></p><p class="footer-credit"><span class="footer-credit-prefix">Designed by</span> <a class="footer-credit-text" href="https://dribbble.com/cp_allen" target="_blank">Chris Allen</a></p></footer></div><script src="bundle.js"></script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
0 commit comments