Container Components v1.5 vs v2.0

Owned by Tyler Crow (Unlicensed)
Last updated: Sept 17, 2015
4 min read

Containers:

Page Elements: 

Component NameSCORE v1.5SCORE v2.0
Header
<header class="score-component score-container">    
	<div class="score-header-wrapper">
        <div class="score-header">
            ...
        </div>
    </div>
</header>
<header class="score-header (custom class)">
 ...
</header>
Footer
<footer class="score-component score-container">
    <div class="score-footer-wrapper">
        <div class="score-footer">
           ...
        </div>
    </div>
</footer>
<footer class="score-footer (custom class)">        
...
</footer>

Page Layout:

Component NameSCORE v1.5SCORE v2.0
 Page 1 Column
<div class="score-container">
    <div class="container">
        <div class="score-page score-column1">
            <div class="score-main">
                <div class="score-inner">
                   ...   
                </div>
            </div>
        </div>
    </div>
</div>
 <div class="container">
    <div class="score-column1 (custom class)">
        <div class="score-center">
            ...
        </div>
    </div>
</div>
 Page 1 Column Wide Screen
<div class="score-container full-width">
    <div class="container">
        <div class="score-page score-column1">
            <div class="score-main">
                <div class="score-inner">
                   ...   
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container full-width">
    <div class="score-column1 (custom class)">
        <div class="score-center">
            ...
        </div>
    </div>
</div>
 Page 2 Column Equal
<div class="container">
    <div class="score-column2 equal (custom class)">
        <div class="score-left">
            ...
        </div>
        <div class="score-right">
            ...
        </div>
    </div>
</div>
<div class="container">
    <div class="score-column2 (custom class)">
        <div class="score-left">
            ...
        </div>
        <div class="score-right">
            ...
        </div>
    </div>
</div>
Page 2 Column Large Left
<div class="container">
    <div class="score-column2 wide-left (custom class)">
        <div class="score-left">
            ...
        </div>
        <div class="score-right">
            ...
        </div>
    </div>
</div>
<div class="container">
  <div class="score-column2-wideleft (custom class)">
    <div class="score-left">
      ...
    </div>
    <div class="score-right">
      ...
    </div>
  </div>
</div>
Page 2 Column Large Right
<div class="container">
    <div class="score-column2 wide-right (custom class)">
        <div class="score-left">
            ...
        </div>
        <div class="score-right">
            ...
        </div>
    </div>
</div>
<div class="container">
  <div class="score-column2-wideright (custom class)">
    <div class="score-left">
      ...
    </div>
    <div class="score-right">
      ...
    </div>
  </div>
</div>
Page 3 Column Equal
<div class="container">
  <div class="score-column3 equal (custom class)">
    <div class="score-left">
      ...
    </div>
    <div class="score-center">
      ...
    </div>
    <div class="score-right">
      ...
    </div>
  </div>
</div>
<div class="container">
  <div class="score-column3-equal (custom class)">
    <div class="score-left">
      ...
    </div>
    <div class="score-center">
      ...
    </div>
    <div class="score-right">
      ...
    </div>
  </div>
</div>

Page 3 Column Large Middle

<div class="container">
  <div class="score-column3 wide-middle (custom class)">
    <div class="score-left">
      ...
    </div>
    <div class="score-center">
      ...
    </div>
    <div class="score-right">
      ...
    </div>
  </div>
</div>
<div class="container">
  <div class="score-column3-widemiddle (custom class)">
    <div class="score-left">
      ...
    </div>
    <div class="score-center">
      ...
    </div>
    <div class="score-right">
      ...
    </div>
  </div>
</div>
Page 4 Column Equal
div class="container">  <div class="score-column4 equal (custom class)">
    <div class="score-left">
      ...
    </div>
    <div class="score-center">
      ...
    </div>
    <div class="score-center2">
      ...
    </div>
    <div class="score-right">
      ...
    </div>
  </div>
</div>
<div class="container">
  <div class="score-column4-equal (custom class)">
    <div class="score-left">
      ...
    </div>
    <div class="score-center">
      ...
    </div>
    <div class="score-center2">
      ...
    </div>
    <div class="score-right">
      ...
    </div>
  </div>
</div>

Stripes:

Component NameSCORE v1.5SCORE v2.0
 Stripe
<div class="score-component score-background score-stripe (Background Style) (Stripe Style)" style="color:Grey; background:Red url('...');">
   ...
</div>
<div class="score-stripe (custom class) (background class)" style="...">
  ...
</div>

Inner Structure:

Component NameSCORE v1.5SCORE v2.0
1 Column
 <div class="score-structural score-column">
    <div class="score-center">
       ...
   </div>
</div>
<div class="score-column1 (custom class)">
  <div class="score-center">
    ...
  </div>
</div>

2 Column - Equal

<div class="score-column2 equal (custom class)">  
  <div class="score-left">
    ...
  </div>
  <div class="score-right">
    ...
  </div>
</div>
<div class="score-column2 (custom class)">
  <div class="score-left">
    ...
  </div>
  <div class="score-right">
    ...
  </div>
</div>
2 Column Variable
<div class="score-variable (custom class)">
    <div class="score-variable-row">
        <div class="score-variable-column">
           ...
        </div>
        <div class="score-variable-column">
           ...
        </div>
    </div>
</div>
<div class="score-variable-2-col (custom class)">
  <div class="score-variable-row">
    <div class="score-variable-column">
      ...
    </div>
    <div class="score-variable-column">
      ...
    </div>
  </div>
</div>
2 Column - Wide Left
<div class="score-column2 wide-left (custom class)">
  <div class="score-left">
    ...
  </div>
  <div class="score-right">
    ...
  </div>
</div>
<div class="score-column2-wideleft (custom class)">
  <div class="score-left">
    ...
  </div>
  <div class="score-right">
    ...
  </div>
</div>
2 Column - Wide Right
<div class="score-column3 equal (custom class)">
  <div class="score-left">
    ...
  </div>
  <div class="score-center">
    ...
  </div>
  <div class="score-right">
    ...
  </div>
</div>
<div class="score-column2-wideright (custom class)">
  <div class="score-left">
    ...
  </div>
  <div class="score-right">
    ...
  </div>
</div>
2 Column - Equal
<div class="score-variable (custom class)">
    <div class="score-variable-row">
        <div class="score-variable-column">
           ...
        </div>
        <div class="score-variable-column">
           ...
        </div>
        <div class="score-variable-column">
            ...
        </div>
    </div>
</div>
<div class="score-column3-equal (custom class)">
  <div class="score-left">
    ...
  </div>
  <div class="score-center">
    ...
  </div>
  <div class="score-right">
    ...
  </div>
</div>
3 Column Variable
<div class="score-variable score-variable-3-col ">
    <div class="score-variable-row">
        <div class="score-variable-column">
           ...
        </div>
        <div class="score-variable-column">
           ...
        </div>
        <div class="score-variable-column">
           ...
        </div>
    </div>
</div>
<div class="score-variable-3-col (custom class)">
  <div class="score-variable-row">
    <div class="score-variable-column">
      ...
    </div>
    <div class="score-variable-column">
      ...
    </div>
    <div class="score-variable-column">
      ...
    </div>
  </div>
</div>
3 Column - Wide Middle
<div class="score-column3 wide-middle (custom class)">
  <div class="score-left">
      ...
  </div>
  <div class="score-center">
    ...
  </div>
  <div class="score-right">
    ...
  </div>
</div>
<div class="score-column3-widemiddle (custom class)">
  <div class="score-left">
    ...
  </div>
  <div class="score-center">
    ...
  </div>
  <div class="score-right">
    ...
  </div>
</div>
4 Column - Equal
<div class="score-column4 equal (custom class)">
  <div class="score-left">
    ...
  </div>
  <div class="score-center">
    ...
  </div>
  <div class="score-center2">
    ...
  </div>
  <div class="score-right">
    ...
  </div>
</div>
<div class="score-column4-equal (custom class)">
  <div class="score-left">
    ...
  </div>
  <div class="score-center">
    ...
  </div>
  <div class="score-center2">
    ...
  </div>
  <div class="score-right">
    ...
  </div>
</div>
4 Column Variable
<div class="score-variable (custom class)">
    <div class="score-variable-row">
        <div class="score-variable-column">
           ...
        </div>
        <div class="score-variable-column">
           ...
        </div>
        <div class="score-variable-column">
           ...
        </div>
        <div class="score-variable-column">
           ...
        </div>
    </div>
</div>
<div class="score-variable-4-col (custom class)">
    <div class="score-variable-row">
      <div class="score-variable-column">
        ...
      </div>
      <div class="score-variable-column">
        ...
      </div>
      <div class="score-variable-column">
        ...
      </div>
      <div class="score-variable-column">
        ...
      </div>
    </div>
  </div>
</div>