Styling SCORE Components

SCORE Building Blocks

• All SCORE pages are built with a header, .pageWrapper, and footer

Comparing Bootstrap with SCORE

Bootstrap:

• • Bootstrap makes use of containers, rows and columns
  • Containers CANNOT be nested inside other containers
  • All rows should be inside of containers
  • All columns MUST be inside of rows

SCORE:

• • SCORE makes use of containers, score-pages, score-structurals, score-columns and score stripes
  • All score pages INCLUDE a wrapping container
  • A score-page CANNOT be nested inside another score-page
  • Score-structurals are ONLY to be nested inside of score-pages
    (header and footer are exceptions)
  • Score-stripes are used to separate score-page(s) for full-width backgrounds

Responsive Grid Mixins

• Grid mixins make or modify rows and columns at the CSS level
• These mixins can be used to create custom page and structural layouts
    -Change default 2 column wide left from an 8/4 pair into a 7/5 or 9/3 pair
    -Make default medium columns into large, small, or extra small columns
    -Turn pieces of HTML from custom components into rows and columns

Styling Components

• Styles are housed in the site LESS folder
• Typically one LESS file per component
• Site styles often need to override native Bootstrap styles
    -Should be declared on site specific components less file
   (example: site-navigation.less, site-carousel.less, etc.)
    -Should NOT be declared in Bootstrap or SCORE less folder

Class Selections

• Components that allow class selections include page headers, sub-headers, stripes, carousels, and highlights
• Enables customization of SCORE components and eliminates the need to create custom components
• Stripes, heroes, and carousels have built-in choices for class selection that control the background size
  -Allows for covered, contained, ore repeated background image
  -Reference: Proper implementation of background images with text