UI Improvement Items

*All changes in code snippets are marked as red text.

Class names

.pageWrapper → .page-wrapper
Tab panel (.score-tab-pane) → .score-tab-panel
Carousel pane (.score-carouselpane) → .score-carousel-pane
Progress area (.score-progress) → .score-progress-area
Button (.btn-default) → .score-button.btn-default
Image button (.score-imagelink) → .score-image.button
Button menu item (.score-button-menuitem) → .score-button-menu-item
Document header (.score-documentheader) → .score-document-header
Document header with subtitle (.score-documentheader-with-subtitle) → .score-document-header-with-subtitle
Full width hero (.score-fullwidth-jumbotron) → .score-full-width-hero
Hero (.score-jumbotron) → .score-hero
Section hero (.score-jumbotron) → .score-section-hero
Style box (.score-stylebox) → .score-style-box
Information panel (.score-panel) → .score-information-panel
Left Text Panel (.score-leftext) → .score-left-text
Center Text Panel (.score-centertext) → .score-center-text
Right Text Panel (.score-righttext) → .score-right-text
Content Spot (.score-contentspot) → .score-content-spot
Youtube Video (.score-youtubevideo) → .score-youtube-video
Main menu (.score-mainmenu) → .score-main-menu
Mega menu button (.btn.navbar-btn.navbar-btn) → .score-megamenu-button.btn.navbar-btn
Mega menu item (.score-megamenu-dropdown?) → .score-megamenu item
Mega menu item with link (.score-megamenu-dropdown?) → .score-megamenu-item-with-link
Menu list item (.score-menu-link-item) → .score-menu-list-item
Menu list image (.score.menu-image-link) → .score-menu-list-image
My siblings menu (.score-siblingnav) → .score-siblings-menu
Previous next siblings menu (.score-previous-next-menu) → .score-previous-next-siblings-menu
Section menu (.score-sectionnav) → .score-section-menu

HTML Changes

Full width hero

<div class="score-fullwidth-jumbotron (hero class) (background class) jumbotron score-component">

<div class="container">

<div class="score-hero-image">

<img src="..." />

</div>

<h1>Some Test Header Text

<br/>Header Line 2</h1>

<h2>Subtitle</h2>

<div class="hero-body">This is some body text in the full-width hero.</div>

<div class="hero-button-wrapper">

<a href="/" class="btn btn-default">Do Something!</a>

</div>

Hero (same changes)

<div class="score-jumbotron jumbotron (hero class) (background class) score-component" style="background-color:#ff0000;color:#000000;">

<div class="score-hero-image">

<img src="..." />

</div>

<h1>Some Test Header Text

<br/>Header Line 2</h1>

<h2>Subtitle</h2>

<div class="hero-body">This is some body text in the full-width hero.</div>

<div class="hero-button-wrapper">

<a href="/" class="btn btn-default">Do Something!</a>

</div>

Section Header

<div class="score-section-header (header style) score-component">

<div class="score-header-image">

<img src="..." />

</div>

<h2>What's On Deck

<br/>Line 2</h2>

<h3>Subtitle</h3>

</div>

Section Hero

<div class="score-jumbotron jumbotron (hero style) score-component" style="background:red;">

<div class="score-hero-image">

<img src="..." />

</div>

<h2>Some Test Header Text

<br/>Header Line 2</h2>

<h3>Subtitle</h3>

<div class="hero-body">This is some body text in the full-width hero.</div>

<div class="hero-button-wrapper">

<a href="/" class="btn btn-default">Do Something!</a>

</div>

Page and Structural Element Changes (LESS files)

//SCORE page container styles

.score-page {
.make-row();
&.score-column1 {
& > .score-center {
.make-md-column(@grid-columns);
}
}
&.score-column2-equal {
& > .score-left {
.make-md-column(@grid-columns/2);

}
& > .score-right {
.make-md-column(@grid-columns/2);
}
}
&.score-column2-wideleft {
& > .score-left {
.make-md-column(@grid-columns/1.5);
}
& > .score-right {
.make-md-column(@grid-columns/3);
}
}
&.score-column2-wideright {
& > .score-left {
.make-md-column(@grid-columns/3);
}
& > .score-right {
.make-md-column(@grid-columns/1.5);
}
}
&.score-column3-equal {
& > .score-left {
.make-md-column(@grid-columns/3);
}
& > .score-center {
.make-md-column(@grid-columns/3);
}
& > .score-right {
.make-md-column(@grid-columns/3);
}
}
&.score-column3-widemiddle {
& > .score-left {
.make-md-column(@grid-columns/4);
}
& > .score-center {
.make-md-column(@grid-columns/2);
}
& > .score-right {
.make-md-column(@grid-columns/4);
}
}
&.score-column4-equal {
& > .score-left {
.make-md-column(@grid-columns/4);
}
& > .score-center {
.make-md-column(@grid-columns/4);
}
& > .score-center2 {
.make-md-column(@grid-columns/4);
}
& > .score-right {
.make-md-column(@grid-columns/4);
}
}
}

//SCORE inner structure styles

.score-structural {
.make-row();
&.score-column1 {
& > .score-center {
.make-md-column(@grid-columns);
  }
}
&.score-column2-equal {
& > .score-left {
.make-md-column(@grid-columns/2);
  }
& > .score-right {
.make-md-column(@grid-columns/2);
  }
}
&.score-column2-wideleft {
& > .score-left {
.make-md-column(@grid-columns/1.5);
  }
& > .score-right {
.make-md-column(@grid-columns/3);
}
}
&.score-column2-wideright {
& > .score-left {
.make-md-column(@grid-columns/3);
  }
& > .score-right {
.make-md-column(@grid-columns/1.5);
  }
}
&.score-column3-equal {
& > .score-left {
.make-md-column(@grid-columns/3);
  }
& > .score-center {
.make-md-column(@grid-columns/3);
  }
& > .score-right {
.make-md-column(@grid-columns/3);
  }
}
&.score-column3-widemiddle {
& > .score-left {
.make-md-column(@grid-columns/4);
  }
& > .score-center {
.make-md-column(@grid-columns/2);
  }
& > .score-right {
.make-md-column(@grid-columns/4);
  }
}
&.score-column4-equal {
& > .score-left {
.make-md-column(@grid-columns/4);
  }
& > .score-center {
.make-md-column(@grid-columns/4);
  }
& > .score-center2 {
.make-md-column(@grid-columns/4);
  }
& > .score-right {
.make-md-column(@grid-columns/4);
}
}
}