We are in the process of skinning the categories pages of Discourse, see below. This is achieved with 50 lines or so of SCSS(CSS).
You’ll notice the categories are packed together vertically. To achieve this we’ve used Packery and it works well - although to reiterate, the styling changes are all CSS.
The same CSS and code, albeit with a slightly different core selector, also works on individual category pages. Note that the category description (large ALT etc) is restyled too.
Nest steps will be to filter and sort topics using [Isotope](http://isotope.metafizzy.co/layout-modes/vertical.html), again with a Material Design look n feel.
I’ve posted this here to share, in principle, what we are doing, but also to appeal to the community with regards client side hooks, functions and includes - the use of which makes things like the packing algorithm function reliably.
Two areas (for now) I need help with, both wrt client side code.
How can I reliably include an external script such that dependent code isn’t called before the script is available? I see Discourse uses Require, can I hook into that by overriding the base URL?
What hooks are available to signal when a new page has been loaded and or updated.
Sorry if I’m just being dumb but won’t putting the script tag in the head solve this?
We use Mansory at work (because Packery is paid*) and since it is needed for the entire page layout putting inside the head get us less content redraw.
*I know Discourse is opensource, this means I can use Isotope on the free license?
Scripts are loaded asynchronously meaning code dependent on the script, unless the availability of the script is tested, could be called before the script is available …
Require and other similar libraries ensure, as best they can, the script is there before the code, example Packery, is run. Most of the time, assuming the script is delivered very quickly, there won’t be a problem (jQuery delivered via Google CDN for instance…) - but good practice dictates you hook into something like Require before attempting to run code that depends on script contents. Unless I am mistaken, Discourse uses Require in places.
Edit: Metafizzy shows how to use Require with it products:
I believe you can use Metafizzy products in this way, although I’ve been using Isotope and Packery for years, and have benefitted greatly from them, so tend to buy a licence, even if I don’t legally need to.
