Sign upLogin

zhdk/madek

View on GitHub
Star
app/views/styleguide/01 Layout/_layout.html

Summary

Maintainability
Test Coverage
<section class="sg-body">
    <section class="sg-example" id="1.1">
      <h3>
        <a href="#1.1">1.1</a>
      </h3>
      <button class="sg-button sg-view-code">HTML</button>
      <div class="sg-description">
        <span class="sg-filename">_grid.scss</span>
        <p>Grid - The grid is based on the OOCSS grid (http://oocss.org) by Nicole Sullivan.
         It provides several grid classes that can be mixed and matched and if necessary
         can be wrapped in a row class to prevent columns from bumping into each other.</p>
        <ul class="sg-modifiers">
          <li>
            <strong>.col1of1</strong>
            -
            Full width
          </li>
          <li>
            <strong>.col1of2</strong>
            -
            Half width
          </li>
          <li>
            <strong>.col1of3</strong>
            -
            Third width
          </li>
          <li>
            <strong>.col2of3</strong>
            -
            Two thirds width
          </li>
          <li>
            <strong>.col1of4</strong>
            -
            Fourth width
          </li>
          <li>
            <strong>.col3of4</strong>
            -
            Three fourths width
          </li>
          <li>
            <strong>.col1of5</strong>
            -
            Fifth width
          </li>
          <li>
            <strong>.col2of5</strong>
            -
            Two fifths width
          </li>
          <li>
            <strong>.col3of5</strong>
            -
            Three fifths width
          </li>
          <li>
            <strong>.col4of5</strong>
            -
            Four fifths width
          </li>
        </ul>
      </div>
      <div class="sg-canvases">
        <div class="align-left bg-light sg-canvas">
          <div style="">
            <div class="clearfix">
              <div class="$modifier-class" style="background: #ddd; line-height: 2em;">$modifier-class</div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.col1of1</span>
          <div style="">
            <div class="clearfix">
              <div class="col1of1" style="background: #ddd; line-height: 2em;">col1of1</div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.col1of2</span>
          <div style="">
            <div class="clearfix">
              <div class="col1of2" style="background: #ddd; line-height: 2em;">col1of2</div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.col1of3</span>
          <div style="">
            <div class="clearfix">
              <div class="col1of3" style="background: #ddd; line-height: 2em;">col1of3</div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.col2of3</span>
          <div style="">
            <div class="clearfix">
              <div class="col2of3" style="background: #ddd; line-height: 2em;">col2of3</div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.col1of4</span>
          <div style="">
            <div class="clearfix">
              <div class="col1of4" style="background: #ddd; line-height: 2em;">col1of4</div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.col3of4</span>
          <div style="">
            <div class="clearfix">
              <div class="col3of4" style="background: #ddd; line-height: 2em;">col3of4</div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.col1of5</span>
          <div style="">
            <div class="clearfix">
              <div class="col1of5" style="background: #ddd; line-height: 2em;">col1of5</div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.col2of5</span>
          <div style="">
            <div class="clearfix">
              <div class="col2of5" style="background: #ddd; line-height: 2em;">col2of5</div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.col3of5</span>
          <div style="">
            <div class="clearfix">
              <div class="col3of5" style="background: #ddd; line-height: 2em;">col3of5</div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.col4of5</span>
          <div style="">
            <div class="clearfix">
              <div class="col4of5" style="background: #ddd; line-height: 2em;">col4of5</div>
            </div>
          </div>
        </div>
        <div class="sg-html">
          <pre class="prettyprint lang-html">&lt;div class="clearfix"&gt;
  &lt;div class=""&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
        </div>
      </div>
    </section>
    
    <section class="sg-example" id="1.1.1">
      <h3>
        <a href="#1.1.1">1.1.1</a>
      </h3>
      <button class="sg-button sg-view-code">HTML</button>
      <div class="sg-description">
        <span class="sg-filename">_grid.scss</span>
        <p>Clearfix</p>
      </div>
      <div class="sg-canvases">
        <div class="align-left bg-light sg-canvas">
          <div style="">
            <div class="clearfix">
              <div class="$modifier-class" style="background: #ddd; line-height: 2em;">$modifier-class</div>
            </div>
          </div>
        </div>
        <div class="sg-html">
          <pre class="prettyprint lang-html">&lt;div class="clearfix"&gt;
  &lt;div class=""&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
        </div>
      </div>
    </section>
    
    <section class="sg-example" id="1.2">
      <h3>
        <a href="#1.2">1.2</a>
      </h3>
      <button class="sg-button sg-view-code">HTML</button>
      <div class="sg-description">
        <span class="sg-filename">_space.scss</span>
        <p>Spaces can be used to modify the spacing between objects.
         The class names have the format (type)(sides)(space), resulting in classes like
         .pvs (padding, vertical, small), .mhl (margin, horizontal, large), etc.</p>
        
        <p>p, m = padding, margin
         a, t, r, b, l, h, v = all, top, right, bottom, left, horizontal, vertical
         x, s, m, l = spaces</p>
        <ul class="sg-modifiers">
          <li>
            <strong>x</strong>
            -
            Extra small space
          </li>
          <li>
            <strong>s</strong>
            -
            Small space
          </li>
          <li>
            <strong>m</strong>
            -
            Medium space
          </li>
          <li>
            <strong>l</strong>
            -
            Large space
          </li>
          <li>
            <strong>h</strong>
            -
            Huge space
          </li>
          <li>
            <strong>n</strong>
            -
            No space
          </li>
        </ul>
      </div>
      <div class="sg-canvases">
        <div class="align-left bg-light sg-canvas">
          <div style="">
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pv$modifier-class" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="mv$modifier-class" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pv$modifier-class mt$modifier-class" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">x</span>
          <div style="">
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvx" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="mvx" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvx mtx" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">s</span>
          <div style="">
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvs" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="mvs" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvs mts" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">m</span>
          <div style="">
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvm" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="mvm" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvm mtm" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">l</span>
          <div style="">
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvl" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="mvl" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvl mtl" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">h</span>
          <div style="">
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvh" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="mvh" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvh mth" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
          </div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">n</span>
          <div style="">
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvn" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="mvn" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
            
            <div style="background: #f8c489; width: 40px; overflow: hidden; display: inline-block; margin-right: 20px;">
              <div class="pvn mtn" style="background: #b5c974;"><div style="background: #79a5b3; padding: 4px; text-align: center;">Box</div></div>
            </div>
          </div>
        </div>
        <div class="sg-html">
          <pre class="prettyprint lang-html">&lt;div&gt;
  &lt;div class="pv"&gt;Box&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;div class="mv"&gt;Box&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;div class="pv mt"&gt;Box&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
        </div>
      </div>
    </section>
    
    <section class="sg-example" id="1.3">
      <h3>
        <a href="#1.3">1.3</a>
      </h3>
      <button class="sg-button sg-view-code">HTML</button>
      <div class="sg-description">
        <span class="sg-filename">_grid.scss</span>
        <h2>Stand-alone horizontal separators <code>.separator</code></h2>
        <ul class="sg-modifiers">
          <li>
            <strong>.mini</strong>
            -
            Short separator
          </li>
          <li>
            <strong>.light</strong>
            -
            Light separator
          </li>
        </ul>
      </div>
      <div class="sg-canvases">
        <div class="align-left bg-light sg-canvas">
          <div style=""><hr class="separator $modifier-class"></div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.mini</span>
          <div style=""><hr class="separator mini"></div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.light</span>
          <div style=""><hr class="separator light"></div>
        </div>
        <div class="sg-html">
          <pre class="prettyprint lang-html">&lt;hr class="separator" &gt;</pre>
        </div>
      </div>
    </section>
    
    <section class="sg-example" id="1.4">
      <h3>
        <a href="#1.4">1.4</a>
      </h3>
      <button class="sg-button sg-view-code">HTML</button>
      <div class="sg-description">
        <span class="sg-filename">_grid.scss</span>
        <h2>Elements with bottom border and some extra bottom spacing <code>.separated</code></h2>
        <ul class="sg-modifiers">
          <li>
            <strong>.light</strong>
            -
            Light separator
          </li>
        </ul>
      </div>
      <div class="sg-canvases">
        <div class="align-left bg-light sg-canvas">
          <div style=""><h2 class="separated $modifier-class">Title separated with a bottom border</h2></div>
        </div>
        <div class="align-left bg-light sg-canvas sg-modifier">
          <span class="sg-modifier-name">.light</span>
          <div style=""><h2 class="separated light">Title separated with a bottom border</h2></div>
        </div>
        <div class="sg-html">
          <pre class="prettyprint lang-html">&lt;h2 class="separated" &gt;Title separated with a bottom border&lt;/h2&gt;</pre>
        </div>
      </div>
    </section>
  </section>