Style Guide

Style Guide

Updated: October, 2020

About this Guide Typography Community Colors (White Labeling) White Labeling Helper Classes Buttons Cards Logos Modals Popovers Badges Forms Tables Icons Library PerkDots Loading Spinner

About this Guide

This page includes many of the core elements to our PerkSpot Themed version of Bootstrap 4.6.

This page is by no means exhaustive, but it should give you a good idea of how PerkSpot's Bootstrap framework can be implemented, with Community White Labeling enabled.

Be sure to reference this page and the Bootstrap 4.6 Docs when building any front end user facing features on PSC.

As always, also be sure to go through the User Facing Feature Checklist when building any new features on PerkSpot that users will see or interact with.

Layout Examples:

Sidebar Layout (Merchant Page)

Typography

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Paragraph lead Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Below is a HR element

You can use the mark tag to highlight text.

This is a standard text link.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Below are examples of text emphasis classes. .text-success can be used for savings statements.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Community Colors

As October 2020, there are just 4 customizable community colors available to work with. They need to be used in a particular way to make sure the white labeling works correctly for the variety of communities we have.

These colors are set in PSA, and applied to classes around the site using CommunityCSS.css

Note: the naming on these doesn't necessarily reflect the way they are used.

  • ColorPrimaryCta

    #FFF White Text

    This is the Primary "Call to Action" color used on PerkSpot. This color is intended to be used for interactive elements on the site - links, buttons, etc.

    ColorPrimaryCTA can be used for text on a #FFFFFF white or #f5f5f5 grey background, or can be the background color for #FFFFFF white text. It should not be paired with any of the other Community Colors.

  • ColorPrimaryBg and ColorTextInverseFg

    ColorTextInverseFg

    ColorPrimaryBg is used for background colors on the main PerkSpot navigation and footer, among other elements. ColorPrimaryBg should be paired with ColorTextInverseFg, which determines the color of text on the ColorPrimaryBg background.

    ColorPrimaryBg and ColorTextInverseFg and be set to any colors in PSA, but there should always be a sharp contrast between the two so that the ColorTextInverseFg text stands out against the ColorPrimaryBg background. Most communities use a dark ColorPrimaryBg with white or light ColorTextInverseFg, but there are some communities (Chipotle, for example) that do the opposite.

  • ColorPrimaryNavButtonBgInactive

    #FFF White Text

    This color is only used in one place - for the top bar of the navigation in Small+ viewport sizes. It will possibly be deprecated in a future navigation redesign. Like ColorPrimaryCta, any text on this color is assumed to be #FFFFFF white.

White Labeling Helper Classes

The CommunityCSS.css file includes some helper classes for Community white labeling. These can be used to add community colors to elements without needing to add more css to the CommunityCSS.css file.

  • colorPrimaryCTA-color

    For changing text color to [ColorPrimaryCta]

  • colorPrimaryCTA-fill

    Used for adding a fill to an SVG element

  • colorPrimaryCTA-background-color

    Used for changing the background-color to [ColorPrimaryCTA]. Text or graphics on this background color should be #fff white.

  • colorPrimaryCTA-border-color

    Used for changing the border-color to [ColorPrimaryCTA].

  • colorPrimaryBg-color

    Used for changing text color to [ColorPrimaryBg]. This is rarely if ever used on PSC.

  • colorPrimaryBg-fill

    Used for adding a fill to an SVG element

  • colorPrimaryBg-background-color

    Used for changing the background-color of an element to [ColorPrimaryBg]. Text or graphics on this background color should be [ColorTextInverseFg]

  • colorPrimaryBg-border-color

    Used for changing the border-color to [ColorPrimaryBg].

  • colorTextInverseFg-color

    For changing text color to [ColorTextInverseFg]. This should only be used on elements with a background-color of [ColorPrimaryBg]

  • colorTextInverseFg-fill

    Used for adding a fill to an SVG element

  • colorTextInverseFg-background-color

    Used for changing the background-color of an element to [ColorTextInverserFg]. Text or graphics on this background color should be [ColorPrimaryBg]. This is rarely, if ever, used.

  • colorTextInverseFg-background-color

    Used for changing the background-color of an element to [ColorTextInverserFg]. Text or graphics on this background color should be [ColorPrimaryBg]. This is rarely, if ever, used.

  • colorPrimaryNavButtonBgInactive-background-color

    Used for changing the background-color of an element to [ColorPrimaryNavButtonBgInactive]. Text or graphics on this background color should be #fff. This is rarely, if ever, used.

Buttons

When creating buttons, btn btn-primary classes can be used for primary action buttons. Non-primary buttons (such as "Cancel" or "Back") should get the classes btn btn-secondary. Because our white labeling only allows for one link action color ([ColorPrimaryCta]), btn-secondary has been customized to look visually distinctive while still using the same color as btn-primary. As a result of this change, btn-secondary, btn-outline-primary and btn-outline-secondary are all visually and functionally identical.

Standard Button Types

Button Tags

Link

Outline Buttons

Button Sizes

Active State

Primary link Link

Disabled State

Primary link Link

Cards

The "card" class creates the card. The "shadow-sm" class gives it a subtle drop shadow. The "mb-2" class gives it a margin-bottom of 2($spacer). Inside the card's container div, there should be another div with the class "card-body" which will contain the content. Check the Bootstrap docs for more information on Cards.

By default, all card elements should get the "shadow-sm" class.

This is a card with the "shadow" class applied.

This is a card with the "shadow-lg" class applied.

Card image cap
Card title
Card subtitle

Here's an example of a card with a callout image.

The class "border-0" was added to remove the #fff white border that Bootstrap includes on cards by default.

Go somewhere

Logos

Merchant/Community logos on PerkSpot should ideally be 300x180 pixels in natural size, displaying on screen at 150x90 pixels max (so that high resolution screens get a crisp image.

In practice, however, many logos have dimensions below 300x180. If you encounter a logo with dimensions below 300x180 in the wild, please notify the Partnershop Marketing team so they can get a replacement uploaded.

Adding the class .logo to a logo img will give it a max-width of 150px.

Adding the class .logo-sm to a logo img will give it a max-width of 100px.

If for some reason you need to make a logo a different size, or you need the size to change depending on the viewport width, you can use grid classes. Add the class p-0 to remove the padding that comes with grid classes if necessary, and remember to avoid any layouts that will result on the logo displaying larger than 150x90px.

Modals

Below is an example of a functioning Bootstrap Modal. Check the Bootstrap docs for detailed information on setup and usage.

Popovers

Below is an example of a Bootstrap Popover.

Dismissible popover

Toasts

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Primary Secondary Success Danger Warning Info Light Dark

Forms

We'll never share your email with anyone else.

Checkboxes and Radios

Big Form

Input Groups

@
@example.com
https://example.com/users/
$
.00
With textarea

Tables

# First Last Handle
1 Name Badge Otto mdo
2 Perx Link Badge Thornton fat
3 Larry the Bird twitter

FontAwesome

In addition to the custom Perxicon set, we also have FontAwesome installed to fill in the gaps. As of the creation of this style guide, we are using FontAwesome 4.6.1. Here are a few examples of FontAwesome Icons in use:

Alerts and Colors

Bootstrap Alerts come with several styles:

You can also make use of these colors, if the design calls for it. Note that "primary" and "secondary" are grey because they need to stay neutral, since the community's white label colors can be anything. In a future update we may be able to make "orimary" and "secondary" match the community's colors.

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

The "success" color can also be used for savings statements:

Your Total:

$200.00

$180.00