jdlehman

<div class="OuterClass">
  <div class="OuterClass-innerClass">
    First
  </div>
</div>

jdlehman

var React = require('react');
var Router = require('react-router'); // 0.12.4
var {Route, DefaultRoute, RouteHandler, Link, NotFoundRoute} = Router;

/* Components */

var App = React.createClass({
  render: function () {
    return (
      <div className="App">

jdlehman

var React = require('react');
var Router = require('react-router'); // 0.12.4
var { Route, DefaultRoute, RouteHandler, Link, NotFoundRoute } = Router;

var App = React.createClass({
  render: function () {
    return (
      <div className="App">
        <div id="header">
          <Header/>

jdlehman

<h2>Large Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin pulvinar est, vel consequat mauris blandit sed. Duis sed nisl eu dolor laoreet luctus. Ut id vulputate mauris. Sed ac lacus orci. Sed quis metus nisi. Mauris interdum tincidunt tellus, eu cursus sem consequat eu. Vivamus dapibus purus ac purus dictum, ut hendrerit massa varius. In hac habitasse platea dictumst. Suspendisse convallis neque nec felis adipiscing, a volutpat leo laoreet. Pellentesque massa velit, tincidunt nec dolor vel, tincidunt lacinia tellus. Morbi vitae tellus bibendum, commodo tortor a, venenatis turpis. Curabitur vestibulum ut massa sit amet tempus. Fusce nisl mauris, tincidunt quis pulvinar sit amet, consectetur id ante. Maecenas non dapibus leo. Suspendisse interdum tortor eu hendrerit sagittis. Ut eleifend ac neque non convallis.</p>
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Curabitur eget est at massa mattis aliquet.</li>
  <li>Sed feugiat lacus non purus

jdlehman

<div class="Container">
  <div class="Container-left">
    left
  </div>
  <div class="Container-right">
    right
  </div>
</div>

jdlehman

<div class="container">
  <input type="checkbox" id="left" class="toggle-input show-left" />
  <input type="checkbox" id="right" class="toggle-input show-right" />
  <header>
    <label for="left" class="toggle">show-left</label>
    <label for="right" class="toggle">show-right</label>
    <h1>header</h1>
  </header>
  <div class="left" id="left">left</div>
  <div class="main">main</div>

jdlehman

<div class="Table">
  <div class="Table-row Table-header">
    <div class="Table-row-item">Header1</div>
    <div class="Table-row-item">Header2</div>
    <div class="Table-row-item">Header3</div>
    <div class="Table-row-item">Header4</div>
  </div>
  <div class="Table-row">
    <div class="Table-row-item" data-header="Header1">row1 col1</div>
    <div class="Table-row-item" data-header="Header2">row1 col2</div>

jdlehman

<div class="Table">
  <div class="Table-row Table-header">
    <div class="Table-row-item u-Flex-grow2">Long Header1</div>
    <div class="Table-row-item">Header2</div>
    <div class="Table-row-item">Header3</div>
    <div class="Table-row-item">Header4</div>
    <div class="Table-row-item u-Flex-grow3">Longer Header5</div>
    <div class="Table-row-item">Header6</div>
    <div class="Table-row-item">Header7</div>
  </div>

jdlehman

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

@mixin desc($names...) {
  @each $name in $names {
    @at-root &-#{$name} { @content; }
  }
}

jdlehman

<div class="my-AwesomeBox my-AwesomeBox--small">
  <h1 class="my-AwesomeBox-title">Small Box</h1>
</div>

<div class="my-AwesomeBox">
  <h1 class="my-AwesomeBox-title">Normal Title</h1>
</div>

<div class="my-AwesomeBox">
  <h1 class="my-AwesomeBox-title my-AwesomeBox-title--large">Large Title</h1>