MyBSF 2.0 Styles - January 2020

Contact t@onecreative.net

Mobile Styles

Tablet Styles

Desktop Styles

Note: This style guide is responsive and dark mode aware.

This page is a demonstration and also a proof of concept for the css structure of MyBSF. A "base" css file contains the primary content in this case "mybsf-base.css". This is designed to have consistency throughout mybsf or other sites that may need mybsf styles. A layout CSS file will then supply the specific needs for a given screen or module within mybsf, in this case "mybsf-style_guide_layout.css".

Primary Content Styles

MyBSF Title - H1

MyBSF Tile and Card Headings - H2

MyBSF Small Heading All Cap - H3

MyBSF Small Heading Emphesis - H4

Standard Text and Copy - P

Standard sized Text Links - p a

Very Small Text for alerts and descriptions

Disclaimers and tiny type

Main Navigation

Unselected

  • Welcome
  • Lesson
  • Give

Selected

  • Welcome
  • Lesson
  • Give

Secondary Navigation

For mobile, contextual navigation is shown to supplement hamburger menu.

  • Lesson
  • Give
  • Find a Class

Colors

Standard Colors

BSF Blue
#007396

BSF Gold
#f5a623

pagebrightwhite
#f9f9f9

pagewhite
#ffffff

menuback
#F1F1F1

text
#5f6062

heading
#333f48

Dark Mode Colors

textdark
#b4b4b4

headingdark
#f1f1f1

tiledark
#20282e

menudark
#333f48

pagedark
#29333a

The Tile Element

This is tile content that could include graphics, instructions, etc. Tiles can be collapsable via toggle switches. When an h2 is present as a title for the tile, a thin rule is placed beneath it.

This is tile content that could include graphics, instructions, etc. Tiles can be collapsable via toggle switches. When an h2 is present as a title for the tile, a thin rule is placed beneath it.