Update the Author Website Style Guide

Introduction

In this lesson, you’ll learn how to update the Style Guide in Breakdance to refine the branding elements of your author website. We’ll explore adding and customising headings, buttons, and a colour grid to create a cohesive and visually appealing style. These updates will ensure your website reflects your unique brand identity while maintaining a user-friendly and professional design.

Add extra headings

First of all we are going to add 5 more heading elements. To make life a little easier I’ll duplicate the one we already have five times. 

If you’re not already there go ahead and edit the Style Guide page with Breakdance.

• From inside the Breakdance editor
• Hover over the fir Heading Element on the Style Guide page
• Click the duplicate icon
• Repeat 4 more times
• Go to the second heading and change the text to read
  • This is a H2 Heading
• Change the tag to H2
• You’ll see on the live preview the Heading shrinks to the default H2 size

Repeat this process for the remaining headings until we have H1 to H6 headings in the section.

Right now everything is far too cramped but we are going to fix that later.

Element Labelling

You may notice as we work though the lessons that I relabel the elements in the structure tab.

You don’t have to do this but I find it helps.

Not just for lessons where labelling the elements makes it easier to reference them but the labels are useful when I’m editing longer pages or templates, especially ones I may not have seen for a while.

Update the Text Elements

The text element is a little short on content so I’ll add some more text.

This is a text element with a paragraph of basic text. This text element displays your base font size and style as it will appear throughout your website. Any changes you make to the global settings of your typography will be shown here right away.

I’ll also expand the text link element.

This is a text link

Primary and Secondary Buttons

Out of the box Breakdance has preset styles for Primary and Secondary buttons. We use both this build so I’ll add another then style them both.

• Duplicate the existing button
• Change the text on the first button to ‘Primary Button’
• Set the link to a #
• Go to the Design tab of the button element
• Click Button
• Choose the Primary style.
• Go to the second button
• Change the text to Secondary Button
• Set the link to #
• Go to the design tab
• Set the Button Style to Secondary

Over in the live preview the secondary button’s colours and hover effects will change. I’ll cover how we use primary and secondary buttons in various lessons in the rest of this course.

Add a Colour Grid Element

Colour plays a major role in branding any website. In this core build we are going to use as neutral a palette as possible BUT a major part of transitioning to any of the genre branded sites on the portfolio page is assigning an appropriate colour palette.

We are going to add a simple colour grid, like this one, to the Style Guide and map it to the global palette. When we make changes to the global colour palette in a later lesson the entire site, including this grid, will be updated so you can see what the colour choices look like on your site right away.

What is a Grid?

We are going to use the Grid element a lot in this author website so it’s worth sharing a quick overview of the Grid element in Breakdance.

CSS (Cascading Style Sheets) Grid Layout (aka “Grid” or “Grid Element” in Breakdance), is a two-dimensional grid-based layout system. CSS has always been used to layout our web pages, but it’s never done a very good job of it and left out a lot of important functionality (vertical centering, for instance). Grid is the very first CSS module created specifically to solve layout problems on the page.

CSS Grid is very powerful but can be challenging to code and we don’t want that. Fortunately Breakdance takes all the grid coding headaches away with an easy to use element.

• Add a Grid Element underneath the secondary button
• I’ll call this the Global Colour Grid
• In the configuration tab set the follow items per row
  • Desktop is 4 items per row
  • Tablet Portrait is 3 items per row
  • Phone Landscape is 2 items per row
  • Phone portrait is 1 item per row

Add the First Div

• Add a Div element inside the grid
• Set the layout of the Div to Horizontal
• The alignment to Center
• The vertical alignment to middle
• Under Container change click on Padding
• Set anyone of the padding fields to 6 rem
• Click on Apply All to give all the fields 6 rem of padding
• This is a nice workflow touch inside the builder.

I’m going to use custom rounded corners as much as possible in this site. On buttons, images, forms and even Divs. It’s a personal style choice and like everything else in this build completely changeable to what suits you and your brand.

• Under container
• Go to Borders
• Set the Border Radius to 8 pixels. One of the few places I still use pixels.

Add a heading inside the div

Now we’re going to add a heading inside the grid to identify what palette colour each div represents.

• Add a H6 Heading Element inside the Div
• Edit the text to heading – all lower case
• In the Design tab of the heading click on Typography
• Centre the text alignment
• Still in Typography click on Advanced
• Under transform click the all caps option

These advanced typography styling options are useful for aiding consistency across your author website.You don’t have to use this advanced typography style but it’s a nice way of letting you know it’s there.

Fill the Grid

• Duplicate the div four times for a total of 5 Divs inside the grid
• Rename the headings in the grid
  • Brand
  • Text
  • Heading
  • Links
  • Background

Over in the live preview…

Nothing much has happened.

Except now we have weird looking page of text, buttons and invisible boxes.

This will all transform as we configure our Global Settings in Breakdance.

Summary

This lesson covered enhancing the Style Guide in Breakdance by adding headings, buttons, and a global colour grid. These elements help visualise and standardise your website’s branding while providing flexibility for future customisation. By applying these techniques, you’ll build a professional author website that reflects your brand and appeals to your audience.