Clay

Features

• Utilize all of container's width.
• CSS transitions on grid changes
• Responsive to window resizes
• Append Items
• Prepend Items
• Dirty checking item heights
• No javascript dependencies
• Test Coverage

See the Pen KqrIJ by Shawn (@shaw3257) on CodePen.

Installation

              <script type="text/javascript" src="clay.js"></script>
          

Usage

Initalize Clay

              /*
              * Creates a default Clay layout
              * Takes in the container's selector as the first argument
              */
              var clay = new Clay('.container');

              /*
              * Creates a customized Clay layout
              */
              var clay = new Clay('.container', {
                minWidth: 100, 
                gutter: 20, 
                padding: 15, 
                itemSelector: '.myitem'
              });

            

Prepend Items

              var item = document.createElement('div');
              
              /*
              * Adds new item to dom and into Clay
              */
              clay.prepend(item);
              
              /*
              * Re-measure and re-layout the grid
              */
              clay.reLayout();

            

Append Items

              var item = document.createElement('div');

              /*
              * Adds new item to dom and into Clay
              * Also performs a layout of item since appending
              * can be easily optimized to not require a complete
              * relayout of grid
              */
              clay.append(item);