# Material Design Experiments
**URL:** https://meta.discourse.org/t/material-design-experiments/38398
**Category:** UX
**Created:** [January 24, 2016, 9:05am UTC](https://meta.discourse.org/t/material-design-experiments/38398 "2016-01-24T09:05:14Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@ccdw](https://meta.discourse.org/u/ccdw)
#### Post date: [January 24, 2016, 9:05am UTC](https://meta.discourse.org/t/material-design-experiments/38398/1 "2016-01-24T09:05:14Z")
Continuing the discussion from [Client Side Hooks and Functions](https://meta.discourse.org/t/client-side-hooks-and-functions/38397):
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](http://packery.metafizzy.co/) 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.
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [January 24, 2016, 9:09am UTC](https://meta.discourse.org/t/material-design-experiments/38398/2 "2016-01-24T09:09:12Z")
Sure, see if you can loop in @rewphus as well and @erlend_sh is there an opportunity for a design project here?
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [January 24, 2016, 3:14pm UTC](https://meta.discourse.org/t/material-design-experiments/38398/3 "2016-01-24T15:14:55Z")
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.
---
### Author:  [@ccdw](https://meta.discourse.org/u/ccdw)
#### Post date: [January 24, 2016, 7:24pm UTC](https://meta.discourse.org/t/material-design-experiments/38398/4 "2016-01-24T19:24:06Z")
> [@erlend\_sh](#):
>
> 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.
Cool, reach out if you’d like to discuss.
Any thoughts on question 1 below?
> [@ccdw](#):
>
> 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?
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [January 24, 2016, 8:12pm UTC](https://meta.discourse.org/t/material-design-experiments/38398/5 "2016-01-24T20:12:26Z")
> [@ccdw](#):
>
> How can I reliably include an external script such that dependent code isn’t called before the script is available?
Sorry if I’m just being dumb but won’t putting the script tag in the **head** solve this?
We use [Mansory](http://masonry.desandro.com/) 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?
---
### Author:  [@ccdw](https://meta.discourse.org/u/ccdw)
#### Post date: [January 24, 2016, 8:45pm UTC](https://meta.discourse.org/t/material-design-experiments/38398/6 "2016-01-24T20:45:29Z")
> [@Falco](#):
>
> Sorry if I’m just being dumb but won’t putting the script tag in the head solve this?
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');
});
```
> [@Falco](#):
>
> \*I know Discourse is opensource, this means I can use Isotope on the free license?
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.
---
### Author:  [@ccdw](https://meta.discourse.org/u/ccdw)
#### Post date: [January 24, 2016, 9:10pm UTC](https://meta.discourse.org/t/material-design-experiments/38398/7 "2016-01-24T21:10:26Z")
Sorry did I misunderstand you? Are you saying Discourse provides script dependancy management as part of the Discourse head functionality?
---
### Author:  [@stevenpslade](https://meta.discourse.org/u/stevenpslade)
#### Post date: [January 28, 2016, 7:03pm UTC](https://meta.discourse.org/t/material-design-experiments/38398/8 "2016-01-28T19:03:15Z")
@ccdw wow, amazing job! Did you do all this within a plugin?
---
### Author:  [@ccdw](https://meta.discourse.org/u/ccdw)
#### Post date: [January 28, 2016, 10:46pm UTC](https://meta.discourse.org/t/material-design-experiments/38398/9 "2016-01-28T22:46:14Z")
> [@stevenpslade](#):
>
> @ccdw wow, amazing job! Did you do all this within a plugin?
Just a few lines of CSS and an external jQuery library to pack the categories together vertically. See OP for description.
---
### Author:  [@geoff777](https://meta.discourse.org/u/geoff777)
#### Post date: [January 30, 2016, 3:18pm UTC](https://meta.discourse.org/t/material-design-experiments/38398/10 "2016-01-30T15:18:44Z")
It would look great with the MD Pink as the background instead of white.
Be bold, vibrant colours are in vogue.
---
### Author:  [@smartwatchme](https://meta.discourse.org/u/smartwatchme)
#### Post date: [February 14, 2016, 3:26pm UTC](https://meta.discourse.org/t/material-design-experiments/38398/11 "2016-02-14T15:26:20Z")
This looks awesome, would totally adopt this UX on our site
---
### Author:  [@ccdw](https://meta.discourse.org/u/ccdw)
#### Post date: [February 17, 2016, 4:17pm UTC](https://meta.discourse.org/t/material-design-experiments/38398/12 "2016-02-17T16:17:20Z")
Thanks 😊
I’ll distribute when ready.
---
### Author:  [@lifehome](https://meta.discourse.org/u/lifehome)
#### Post date: [July 25, 2016, 7:24am UTC](https://meta.discourse.org/t/material-design-experiments/38398/13 "2016-07-25T07:24:44Z")
Looks like nodebb! 😛
---
### Author:  [@joecures](https://meta.discourse.org/u/joecures)
#### Post date: [August 11, 2016, 4:18am UTC](https://meta.discourse.org/t/material-design-experiments/38398/14 "2016-08-11T04:18:01Z")
This looks awesome! Was wondering if you have implemented this yet? Thanks 👏