Material Design Experiments

Continuing the discussion from Client Side Hooks and Functions:

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](, 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.

  1. 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?

  2. What hooks are available to signal when a new page has been loaded and or updated.

Many thanks.

Sure, see if you can loop in @rewphus as well and @erlend_sh is there an opportunity for a design project here?

Very cool! I know @maigaard is also looking into grid-displays of this nature, but applied to topics.

Will give some thought to what we can do in this space.

1 Like

Cool, reach out if you’d like to discuss.

Any thoughts on question 1 below?

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:

requirejs( [ 'path/to/packery.pkgd.js' ], function( Packery ) {
  new Packery('#container');

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.

Sorry did I misunderstand you? Are you saying Discourse provides script dependancy management as part of the Discourse head functionality?

@ccdw wow, amazing job! Did you do all this within a plugin?

1 Like

Just a few lines of CSS and an external jQuery library to pack the categories together vertically. See OP for description.

It would look great with the MD Pink as the background instead of white.

Be bold, vibrant colours are in vogue.

1 Like

This looks awesome, would totally adopt this UX on our site

1 Like

Thanks :blush:

I’ll distribute when ready.


Looks like nodebb! :stuck_out_tongue:

This looks awesome! Was wondering if you have implemented this yet? Thanks :clap: