How to Enable the Wagtail Styleguide

By Kieran Brown

Do you need to edit the Wagtail UI or are you creating a new component in Wagtail and you want to check it against their Styleguide? OR maybe you are editing the model admin and adding items to the left menu and you want to know which icons are available?

Well this is where the Wagtail Styleguide comes in. It’s a really helpful resource that takes no time at all to enable and it allows you to check your component against their guidelines and shows all the available Wagtail icons.

Want a sneak peak of what it includes? Here you go…

  • Colour palette
  • Typography
  • Help text
  • Listings
  • Pagination
  • Buttons
  • Dropdown buttons
  • Header
  • Forms
  • Page editor
  • Tabs
  • Breadcrumbs
  • Progress indicators
  • Misc formatters
  • Icons
  • IE9 debugging

Hello and welcome to this weeks instalment of Wagtail Wednesdays. In today’s short and snappy video we are going to go through a hidden gem in Wagtail that you may not know about, the Wagtail Styleguide.

Firstly I just want to go through why you may need the Styleguide? If you’re a developer and you’re looking to work on the Wagtail UI or you’re creating a new UI component, you may want to test it against the Wagtail Styleguide for consistency or maybe just for a bit of inspiration.

To get the Styleguide working all we need to do it head over to our code, we’ve just created a basic Wagtail instance, and open the file.

Next, scroll down to the INSTALLED_APPS = [] section and look for instances of 'wagtail.contrib.'. We can just add 'wagtail.contrib.styleguide' to the bottom of this list and we’re done. I’ve added it here to keep them together as it makes it easier to read.

If we now head over to our admin and click on settings we should now see that the Styleguide has been added to the bottom of this navigation.

Let’s click on this and see what we have available. We can see that we now have access to the different components that make up the UI for Wagtail.

There’s a section for the colour palette that Wagtail uses, the different chooser panels and the various help text blocks to name but a few.

One of the sections we probably use the most is the available Wagtail icons. We tend to use it when adjusting the model admin where we need to specify an icon for a particular menu item.

By being able to choose from a good list of icons makes it much easier for a developer to create a better experience for the user as the right icon can improve visual interest and grab the user's attention.

So there we have it, a really useful part of Wagtail that you may not have discovered. Thanks for watching this quick, simple video on the Wagtail Styleguide.

If you enjoyed it, please consider liking and subscribing to our channel. You can also sign up to our mailing list for early access to our videos and you can find the link in the description below. Thanks and see you next time.

Want Early Access To Future Videos?

Pop your email address in the box below and receive new videos before everyone else!

<< Back to Insights