whizark

<p class="test-1-1">.test-1-1</p>
<p class="test-1-2">.test-1-2</p>
<p class="test-2-1">.test-2-1</p>
<p class="test-2-2">.test-2-2</p>
<p class="test-3-1">.test-3-1</p>
<p class="test-3-2">.test-3-2</p>
<p class="test-4-1">.test-4-1</p>
<p class="test-4-2">.test-4-2</p>

whizark

<ul class="horizontal-list">
  <li class="horizontal-list\item">Item</li>
  <li class="horizontal-list\item">Item</li>
  <li class="horizontal-list\item">Item</li>
</ul>

whizark

<ul class="vertical-list">
  <li class="vertical-list\item">Item</li>
  <li class="vertical-list\featured-item">Item</li>
  <li class="vertical-list\item">Item</li>
</ul>

<ul class="horizontal-list">
  <li class="horizontal-list\item">Item</li>
  <li class="horizontal-list\featured-item">Item</li>
  <li class="horizontal-list\item">Item</li>

whizark

// ----
// Sass (v3.4.5)
// Compass (v1.0.1)
// ----

// Sass: Creating custom scope & scope-based default value in Sass
//
// A use case using mixin.
// This is pseudo code so you need implement some code.
//

whizark

<a class="button">A button</a>
<button class="button">Button button</button>
<a class="button-large">A button</a>
<button class="button-large">Button button</button>

whizark

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

// Sass: Creating new scope & instance variable/method in Sass
//
// Other ideas: https://github.com/whizark/xass#ideas

// This is pseudo code

whizark

HTML/CSS Class Naming Convention

A HTML/CSS Class Naming Convention for Scalable/Modular CSS.

ToC

• Basics
• Phrase and Compound Word
• Plural and Collection
• Variant

whizark

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

// Sass: Resolving component dependencies
// An improved version of https://gist.github.com/whizark/51ccdfbf57dbcb73953f
 
// Other ideas: https://github.com/whizark/xass#ideas

whizark

// Sass: Resolving component dependencies

// Other ideas: https://github.com/whizark/xass#ideas

// The storage for dependency management
$container: (
  -components: (),
  -frozen: ()
);

whizark

<div class="container--micro">
  <!-- The style attributes only for the purpose of the demo -->
  <div style="float: left; height: 100px; background: #0f0;">
    content
  </div>
  <div style="float: left; height: 100px; background: #00f;">
    content
  </div>
</div>