The Official Discourse Styleguide Plugin


(Robin Ward) #1

I’ve just released a new plugin for Discourse that adds a /styleguide path that renders a bunch of the common components and UX elements that Discourse uses:

Edit: Live demo at

I’d like to add more components to it over time to be more comprehensive. In fact, I’d love it if people in the community would submit more examples from our application to make it even more comprehensive.

How do I create static pages on my site
Better color schemes selector
Different color unspecified in color scheme appearing
Theme Creator, create and show themes without installing Discourse!
(Daniel Lopes) #2

Thank you so much for this!

I wish I had found this plugin a month ago, it would have saved me a lot of time. I just wrote a theme that has 3kloc and it was painful to find all the components in the process :bowing_man:

(Kane York) #3

The post menu http://localhost:3000/styleguide/molecules/post-menu isn’t adding the .d-hover class, so the like button is never colored. Not too important as it’s fairly easy to get an example of those buttons :stuck_out_tongue:

(Kris) #11

I made an update to this today that adds more colors and a page explaining the font scaling system a little bit.

It also appears that the “Latest topic list” organism is broken… haven’t tried figuring out why yet.