starryeyez024

<div class="region-content">
  <h2>Hello World!
    
  </h2>
  <div id="block-block-1" class="block">
    Lorem Ipsum Uno <a href="http://www.redhat.com">Click me</a>
  </div>
  <div id="block-block-5" class="block">
    Lorem Ipsum Dos <a href="http://www.redhat.com">Click me</a>
  </div>

starryeyez024

<div class="region-content">
  <h2>Hello World!
    
  </h2>
  <div id="block-block-1" class="block">
    Lorem Ipsum Uno <a href="http://www.redhat.com">Click me</a>
  </div>
  <div id="block-block-5" class="block">
    Lorem Ipsum Dos <a href="http://www.redhat.com">Click me</a>
  </div>

starryeyez024

<div class="region-content">
  <h2>Hello World!
    
  </h2>
  <div id="block-block-1" class="block">
    Lorem Ipsum Uno <a href="http://www.redhat.com">Click me</a>
  </div>
  <div id="block-block-5" class="block">
    Lorem Ipsum Dos <a href="http://www.redhat.com">Click me</a>
  </div>

starryeyez024

<div class="region-content">
  <h2>Hello World!
    
  </h2>
  <div id="block-block-1" class="block">
    Lorem Ipsum Uno <a href="http://www.redhat.com">Click me</a>
  </div>
  <div id="block-block-5" class="block">
    Lorem Ipsum Dos <a href="http://www.redhat.com">Click me</a>
  </div>

starryeyez024

<div class="region-content">
  <h2>Hello World!
    
  </h2>
  <div id="block-block-1" class="block">
    Lorem Ipsum Uno <a href="http://www.redhat.com">Click me</a>
  </div>
  <div id="block-block-5" class="block">
    Lorem Ipsum Dos <a href="http://www.redhat.com">Click me</a>
  </div>

starryeyez024

<h1>Theming UI Components</h1>

<p>Each component needs to be aware that it may be used within a colour scheme so it needs to own the process 
of creating the various classes required to support different uses. Sometimes semantic classes are the way forward, 
but perhaps we should just allow the use of names to describe the particular style (think Solarized & Darcula, not Primary, Secondary, Success, etc.)</p>
<p>Here we create a themes map, which contains the colour definitions for a variety of named themes. 
This makes it easier to re-use a colour scheme across components and removes the cases where
two component modifier classes (with different names) confusingly implement the same colour scheme. 
e.g. no <code>.btn--primary</code> and <code>.panel--brand</code> which actually use the same colours</p>
<p>Read more about this approach in this blog post - <a href="http://www.ian-thomas.net/a-sassy-approach-to-theming-components/" class="link-t-sassmeister-dark">A Sassy Approach To Theming Components</a></p>

starryeyez024

<h1>Theming UI Components</h1>

<p>Each component needs to be aware that it may be used within a colour scheme so it needs to own the process 
of creating the various classes required to support different uses. Sometimes semantic classes are the way forward, 
but perhaps we should just allow the use of names to describe the particular style (think Solarized & Darcula, not Primary, Secondary, Success, etc.)</p>
<p>Here we create a themes map, which contains the colour definitions for a variety of named themes. 
This makes it easier to re-use a colour scheme across components and removes the cases where
two component modifier classes (with different names) confusingly implement the same colour scheme. 
e.g. no <code>.btn--primary</code> and <code>.panel--brand</code> which actually use the same colours</p>
<p>Read more about this approach in this blog post - <a href="http://www.ian-thomas.net/a-sassy-approach-to-theming-components/" class="link-t-sassmeister-dark">A Sassy Approach To Theming Components</a></p>

starryeyez024

<div class="test">
	<ul>
		<li>Here</li>
		<li>There</li>
		<li>Everywhere</li>
	</ul>
</div>

starryeyez024

// ----
// libsass (v3.3.2)
// ----

@import "breakpoint";
@import "susy";



// Spacing Variables

starryeyez024

  <h4>data-ux-layout-special="12, 6 6, 8 4"</h4>
  <div data-ux-layout-special="12, 6 6, 8 4">
      <div class="component">Component</div>
      <div class="component">Component</div>
  </div>