You can use the ReactGridLayout custom element in templates which allows you to cleanly specify how many rows and columns you'd like. It also supports props for columns, rows, responsive breakpoints, and layout change events.
Although the author states it has fewer features than Packery or Gridster, it supports some cool stuff like vertical auto-packing and dragging and resizing.
Angular Debug Bar and Reading Position Indicator
Maciej Rzepiński sent in two useful Angular projects:
angular-debug-bar allows you to including a new element, angular-debug-bar, to show some statistics about the current page. This includes a count of $watch and $listener items, DOM objects, and page load time. Each metric is defined with a registerPlugin method, so you might be able to add new metrics although I haven't tried that myself.
angular-rpi is based on the Reading Position Indicator post from CSS-Tricks. It shows a bar at the top of the page as you scroll the document:
You can use it with the rpi directive. Both projects have a demo that you can run locally. If you want to edit the progress bar styles, then you can use the .scss file and run npm install ; bower install ; gulp.
RWDPerf (GitHub: lafikl / RWDPerf, License: MIT, npm: rwdperf) by Khalid Lafi is a tool for analysing responsive pages. It calculates the page weight, so you can see what the download bloat is like.
It works using Chrome's remote debugging API, so it should be more accurate than a DOM simulation. It accepts arguments on the command-line for configuring things like device scale factor, width, height, and user agent.
It also has an API, which is ideal for dropping it into a build script.
If RWDPerf indicates that your page has a lot of unused images, then you might want a better responsive image replacement library. Respimage (GitHub: aFarkas / respimage, License: MIT) by Alexander Farkas is a responsive image polyfill for picture and srcset.
Respimage works using the picture element or the srcset image attribute. The srcset implementation supports descriptors for width and density.
You can attach listeners with $.breakpoint.on, and an array is accepted so you can respond to different preset device sizes. There's also $.breakpoint.off for removing listeners, and $.breakpoint.changeBreakpoints for changing the globally recognised device sizes.
VLEX (GitHub: indus / VLEX, License: MIT) by Stefan Keim is a library for defining the logic necessary to resize SVG images. It works using a vlex attribute that controls how things are resized, and there's also a VLEX function for initialising and updating elements.
A "vlexpression" contains property descriptions separated by semi-colons. Using a $ allows predefined values to be referenced: $x is element.clientWidth, and $cX is $x / 2 -- the horizontal centre. Using a colon allows a value to be set: key:value.
Internally it splits the expression with String.prototype.split(';'), and then splits on : to get the keys and values. It's a fairly simple parser, but it seems small and flexible enough to do get some clever effects using SVG. Take a look at the examples in the readme to see what's possible.
What would jQuery look like if it was written for modern browsers with ES6 modules? jQuery Evergreen (GitHub: webpro / jquery-evergreen, License: MIT, Bower: jquery-evergreen) by Lars Kappert is an attempt at answering that question.
jQuery Evergreen works with modern browsers. It has the same familiar API as jQuery, and is lean and mean with the following, optional modules: selector, class, DOM, event, attr and html.
The source is written in the ES6 Modules format, and transpiled to an AMD version, and a "browser global" version using the ES6 Module Transpiler.
It'll work with current versions of most browsers thanks to transpilation and an IE9 polyfill for classList.
You can even create custom builds with Grunt, like this: