Building a style guide

Who can use this feature

  • Supported on Team and Enterprise plans
  • Only admins can create and edit style guide. 
  • Anyone with a style guide URL (and password, if enabled) can view a style guide.

What's in this article


Introduction

Style guide is a website builder for content style guides. With style guide, you can quickly create and publish a polished content style guide, accessible to your entire organization. 

With a style guide, you can quickly create web pages using your Writer customizations. For example, you can create pages that import the style and punctuation customizations set up in your suggestions. You can create terms pages that sync with the terms you’re managing in Writer.
You can also create custom content pages with pre-baked widgets like Do and Don’t boxes. If you have a specific design in mind, you can even add your own styling with custom CSS.
Once you publish your style guide, it'll be viewable to anyone with the URL (and password, if you have password protection enabled). Your style guide isn't limited to teammates who have Writer seats. This way, your entire organization has easy access to the content guidelines you’ve created.

Getting started

To start building draft pages, go ahead and select your preferred subdomain. Don’t worry — you can easily change this later or set up a custom domain instead. 

Adding pages

To start a new page, select Add page in the left sidebar. You’ll build your page by dragging over page blocks from the right sidebar. There are several types of page blocks, which we’ll go over below.

Suggestions

Once you’ve customized your suggestions in Writer, you can share them in just a few clicks with your style guide.
In Style guide > Page Builder, select a suggestions page block, then select writing style.

By creating this block, you’ve imported your punctuation and writing style settings instantly. Any suggestions that you toggled or checked off when customizing suggestions won’t show up here at all. You can customize the text with examples from your company context and bring examples to life with images.

Terms

With terms page blocks, you can select which terms you’d like to publish, by type (Approved, Don’t Use, Use Carefully, Pending) or tag. Your terms will display alphabetically on your published page, and will show the term type, part of speech, description, and examples you’ve added. Style guide viewers can search for specific terms or filter by term type.

Snippets

Snippets page blocks are similar to terms page blocks. You can publish all snippets or only ones with specific tags. 

Text blocks and Do/Don’t boxes

With text blocks, you can build any type of page you need for your style guide. You have access to a rich text formatting toolbar to add styling, hyperlinks, images, and code blocks.
You’ll also be able to add Do and Don’t boxes to emphasize examples of how to or how not to write something.
You can apply rich text formatting within a Do and Don’t box by clicking the formatting icon inside the box, which will open up a popup with a formatting toolbar.

HTML/CSS block

To create an especially customized page, you can add an HTML/CSS block. This is more technical, so you may want help from a frontend developer. HTML/CSS blocks give you full control over the main panel of the style guide page. You can elect to only apply CSS styling over existing page blocks you’ve added. 

You can fully control and customize the HTML of your entire style guide under Appearance > Advanced.

Organizing and deleting page blocks

You can reorder page blocks via drag and drop. You can also easily delete a page block by clicking the trash can icon.

Setting up sections and pages

Sections help you organize the left-hand navigation panel of your style guide. Think of them as headers for your navigation.
To add section, go to Page Builder > Add section. You can then drag and drop pages underneath sections.
Sections won’t show on your live style guide unless there are published pages underneath.

Previewing and Publishing

You can preview pages while you’re drafting them. Just make sure to hit Save to enable the Preview button. In your preview, you’ll be able to see your draft page, as well as any other already published pages.

To publish a page, enable the toggle at the top of your page builder. If you make changes to a published page, your changes will be published immediately after clicking Save.

Your style guide will become live as soon as you have at least one page published. 

Advanced customization

Editing your style guide URL

To change your style guide URL, head to Settings > Style guide URL. You can then customize the subdomain reserved for your organization.

Custom domain

You can easily move your style guide over to a custom domain. Head to Settings > Custom domain and enter the domain name. You’ll then head to your DNS provider to set up a CNAME with the information we provide in the Setting up a CNAME box.

Password protection

If you don’t want your style guide to be publicly available, you can create a password. Head to Settings > Access, and select Password protected. When someone visits your style guide URL, Writer will prompt them to enter this password before they can see the contents.

Custom CSS

You can apply a custom stylesheet to your style guide to better match your brand. Head to Appearance > Advanced > Custom CSS. Copy/paste your CSS into the Custom CSS text area and select Save to apply your change.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Support Contact Support