A Pen by Dave Rupert.

Every-Module-Ever-Scaffold-.markdown

Every Module Ever Scaffold

A Pen by Dave Rupert on CodePen.

License.

index.html

<!-- Every Module Ever Scaffold -->
<div class="module">
  <header class="module-header">
  	<h2 class="module-title">Module Title</h2>
  </header>
  <div class="module-content">
    <p class="module-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="module-link">Dolorum delectus</a> adipisci quos magnam quo ut cumque dolor atque autem omnis in culpa amet quia ducimus odit, recusandae commodi, nam nulla.</p>
    <ul class="module-list">
      <li class="module-item">
        <a href="#" class="module-link module-item-link">Link Text</a>
      </li>
    </ul>
  </div>
  <footer class="module-footer">
    <p class="module-text module-footer-text">Short phrase</p>
  </footer>
</div>

style.scss

// Module
// ---------------------------------------------------------------- //
// Features
// - Namespaced instead of nested, for faster selection.
// - No element (<ul>,<li>, <a>) styling, for faster selection.
// - Styled off of classes, for maximum overrides.
//
// How to use:
// - Rename "module" to whatever it is you're describing.
// - Don't need something? Delete it.
// - Add your own super descriptive and helpful comments.
// --------------------------------------------------------------- //
.module {}

// Header
.module-header {}
.module-title {}
  
// Content
.module-content {}
.module-text {}
.module-link {}
.module-list {}
.module-item {}
.module-item-link {}

// Footer
.module-footer {}
.module-footer-text {}