Reset to standard size

Font size options

Increase or decrease the font size for this website by clicking on the 'A's.

Reset to default contrast

Contrast options

Choose a color combination to give the most comfortable contrast.

Use empty container blocks with modified "spacing" to create buffers when needed, but use sparingly and check with different screen sizes. Can also put borders on edges of any block type to create dividing lines. Put blocks inside container blocks and change interior block's background color and border radius to round edges and simulate bubbles (radius of 7-10 makes nice rounding).

Heading 1

Page title
Top of page, left aligned
Title Case Capitalization
Keep short
Don't use more than one H1 (it confuses search engines)

Heading 2

Main topics
Use similar keywords to H1
Think of as "chapters" of the page
Title Case
Keep short

Heading 3

Secondary Topics/Subcategories to further break up topics
Use in long H2 blocks
Make info scannable

Heading 4

Small sections or sidebars
Info boxes, etc.

Heading 5

Infrequent
Note, this is ALL CAPS

Heading 6

Infrequent

Colors

LOGO YELLOW (222, 172, 11) #deac0b

LOGO BLUE (36, 71, 93) #24475d

LIGHT GREY (240, 240, 240) #F0F0F0

DARK GREY (118, 113, 113) #767171

Attend Preschool #FFC000

Attend Children #ED7D31

Attend Teen #70AD47

Attend Adult #4472C4

Attend Family #954F72

Attend General #24475d

Event Link Patterns

Base link: https://brighamlibrary.org/events or https://bcpl.libnet.info/events

Specific date range: ?start=22-06-01&end=2022-06-30

Show more days than present from date clicked: ?r=days&n=7

Specific keywords: ?term=story+time

Specific event type: ?t=story+time

Specific ages: ?a=teens

Compound example: ?term=story+time&r=days&n=7

Block Management

Use containers to manage scrolling order.
Side bars 3 or 4 width snaps from right side.
Check that order & spacing look good in mobile format.
Duplicate blocks and change visibility settings to adjust layout for different screen sizes.

QuickLinks Box

Common link-outs
Use "Custom Style 2" on content block settings (adds border and grey background)

"Custom Style 3" makes the block or container background grey with square corners. Good for alternating row visibility.

(Change or add Custom Styles in Custom CSS)

"Custom Style 4" makes the block or container background grey with rounded corners. Good for blurb bubbles.

Set content blocks inside container blocks with modified spacing to keep bubbles from bleeding into each other.

(Change or add Custom Styles in Custom CSS)

Images

Add description for accessibility & image load failure

Images in their own block when possible.
DO NOT USE CAPTIONS. Makes impossible to delete/edit.

Buttons

Use this order: Anchor, span, strong (if needed), text.
Add a style with "none" text decoration to the anchor tag.

Button

Standard

</a>

Button-Yellow

<a href="..." style="text-decoration: none;"

Yellow