Quick Summary:

SubtractJS is a layout assistant for HTML that makes it easy to mix fixed-width or fixed-height elements on the page edges with a re-sizable body.  It is great for managing headers, footers, menu bars, navigation elements, or advertising elements.

What is SubtractJS?

A few years ago, I was tasked with creating a layout consisting of a 100 pixel tall header, a 200 pix wide navigation panel on the left, and a 50 pixel tall footer.  At the time I found a pure-css solution to be impossible.  As I dug into it further, I found the javascript re-size event to be the only working solution.  We got our layout working with a good bit of custom javascript.

This summer, I set out to re-do this part of the project in a cross-browser, re-usable solution.  As it turns out, SubtractJS is more powerful than I imagined, and works in every browser I tested it in.  (I suspect I may have the jQuery dependency to thank for this.)  So far, I have tested in Chrome 31, IE 8, 9, 10, 11, Firefox 26, Midori on Raspberry Pi and it just works everywhere.



SubtractJS lets you use standard CSS properties to control your layout.  The five classes, "sj-fill-top", "sj-fill-bottom", "sj-fill-left", "sj-fill-right", and "sj-fill" tell SubtractJS how to manipulate your page.  On every resize, SubtractJS computes the width or height needed to fill the parent element and still allow space for your padding, border, and margin.

SubtractJS works best when the style tag for the affected elements does not contain values for height, width, margin, padding, border, or overflow.  Define these properties in a style that you apply to the element via a style sheet.  See the SubtractJS samples or the SubtractJS preview page for some examples of how this can work.

How do I get it?

You can download or enter issues or bugs at SubtractJS on Codeplex
SubtractJS is available on NuGet.  Enter "Install-Package subtractjs" in the Package Manager Console.

Share to: