Understanding SCORE's File Structure (Scaffolding)

"Areas" Scaffolding

• All project files are SHARED between Sitecore and UI developers

Inside the less folder

Bootstrap folder

• • Containers all of Bootstrap's default LESS files
  • Location to access Bootstrap's variables and mixins, if needed

SCORE folder

• • Contains all of SCORE's default LESS files
  • Location to modify SCORE-specific styles, if needed
    (example: default vertical spacing with .score-component class)

Site folder

• • Modify/include all site-specific styles here
  • Create site-specific variables and mixins

Project CSS

• • NEVER edit CSS styles directly
  • CSS files are ONLY to be compiled via LESS

Main LESS

• • Compiles to main.css
  • main.less imports all Bootstrap, SCORE, and site LESS files

Page Editor LESS

• • Styles are specific to the SCORE page editor experience
  • Components may need to render differently in page editor via CSS
  • Components initially inherit main.css
  • Page editor CSS overrides main.css and can include additional styles if needed

HTML Sandbox

• • _html is your "sandbox" (for POC pages)
  • Includes a "kitchen sink" example.html file
      -Shows header, .pageWrapper, and footer placement
      -Includes example markup of SCORE page, structural, and stripe components
      -Contains all default markup and styles for most common SCORE components