Style Guide

Introduction

This is a reference guide meant to show you all of the available styles in your site and how to use them.

Basic Concepts and Terms

• widget - One of the items under "Content" in the editing drawer displayed on the right side of the screen. These will display either static content that you type into them, or dynamic content that comes from other content types like News or Events.
• layout block - One of the items under "Layout" in the editing drawer displayed on the right side of the screen. Used to create the backdrop for columns, as well as any special layouts like columns.
• CSS class - A special keyword that applies a style to the area where you enter it. Will usually be all lower case with only letters, numbers, and dashes (-).
  

Utility CSS Classes

There are many CSS classes you can add to a layout block or even directly to content to affect the way it looks. You should not need most of these most of the time, but they can let you add some visual flair to a page.

Colors

Background Color

You can apply any of the CSS classes that begin with bg- to change the background color of the element. Typically, the color of most elements will change automatically when they are on a background color that is darker (like the primary dark blue will have white text), but sometimes you may need to apply something manually as well.

Typically, if you add a background color, you will also want to add padding as well (see Spacing below), otherwise the content will run up right against the edges of the background.

Text Color

Text color is not as frequently useful as background color, because the background color should set most text colors for you, and you typically don't want to change the color of text much. However, the below CSS classes should allow you to override the text color. Note that not all elements will override (like buttons).

Icons

We use a service named Icomoon to create a custom icon set, which is loaded onto the site. You can see the available icons here:

https://prod.gabar.org/ResourcePackages/GABar/assets/fonts/icomoon/demo.html

If you want to use an icon, copy the icon class, so "icon-directory" for example from that demo, and then apply it to an HTML element, usually a <span>, like this:

<span class="icon-directory"></span>

Which will look like this:

You can also apply any CSS you'd apply to text, so this has text-secondary fs-2:

Buttons

Buttons can be created by adding the button class to an <a> element. The easiest way to create these is to use Sitefinity's link tool to create your link, then simply find the element that looks like 

<a href="https://prod.gabar.org/"> and adding class="btn" and "btn-<color> just before the >.

Examples are shown below:

Spacing

There are two types of spacing: margin and padding.

Margin is space between elements, and padding is space inside of an element. Typically, you will use padding to add space when you use a background color (because you want the space you're creating to maintain that background color to create a box), and margin at other times.

The format for the spacing CSS classes is as follows: [type of spacing][direction, optional]-[amount].

For example, my-4 would add 24px of margin to the top and bottom of an element. p-6 would add 48px of padding to all sides of an element.

You will rarely want to use anything but my- and p- classes: usually you only want to create vertical space between elements, and when adding padding you want it to be uniform on all sides.

Sometimes you will want different horizontal and vertical padding on an element, so you could add both separately: py-2 (8px of vertical padding) px-4 (24px of horizontal padding). But if you're not sure, stick with uniform padding.

Thumbnail Sizes