Styling BrainJocks SCORE

Pre-requisites

Bootstrap 101

• • Bootstrap 3 Tutorial

Using LESS (LESS 101)

• • Variables
  • Mixins
  • Nesting
  • LESS Tutorial
  • Compilers

Renderings

• • Component Documentation

Understanding SCORE's File Structure

• default area scaffolding (_html, css, fonts, img, js, less)
• default layout document scaffolding - (bootstrap less, score less, site less)
• project css (main.less > main.css, page_editor.less > page_editor.css)
• html sandbox - kitchen sink 

Styling SCORE Components

• Building Blocks - Understanding (header, pageWrapper, footer), (containers, score-page layout, score-structural layout, and stripes)
• Responsive Grid using Mixins - Portability
• Modifying SCORE scaffolding grid (column sizes)
• Styling components (site less folder)
• Overriding native Bootstrap styles
• Components that allow class selections (Headers, subheaders, stripes, highlights, heroes, carousels, etc.)
• Understanding of background images and responsive nature in carousel and stripes
• Introducing new components into the project

Best Practices

• POC as an html file
• Stay in sync with your Sitecore dev
• Avoid creating new components if possible
• Front-end first? (Pros/Cons)
• Back-end first? (Pros/Cons)
• Keep your less files organized
• DRY
• Beware of over nesting