robwierzbowski

/* type.css */

@import 'vars.css';

@define-mixin header {
  font-family: $font-sans;
  font-weight: 600;
  letter-spacing: -0.01em;
}

robwierzbowski

.userPreview {
  border: solid $off-black;
  
  &.--default {
    border-width: 5px;
    font-size: 1.5rem;
    background: $light-gray;
  }
  
  &.--compact {

robwierzbowski

.userPreview {
  border: 5px solid $off-black;  
  font-size: 1.5rem;
  background: $light-gray;
 
  &.--compact {
    border: 1px solid $off-black;
    font-size: 1rem;
    background: transparent;
  }

robwierzbowski

/*
  Set default element styles
  Based partially on sanitize.css v2.0.0
  github.com/jonathantneal/sanitize.css
*/

*,
::before,
::after {
  box-sizing: border-box;

robwierzbowski

/*
  Reset text elements for easy semantic use.
  http://anthonyshort.me/global-typographic-styles-suck/
*/

/* Pseudo */

:focus {
  outline: none;
}

robwierzbowski

<article styleName="userSummary --compact">
  <img styleName="image -loading" src="/low-res.jpg" />
  <div styleName="firstName">Mr. Jim</div>
  <div styleName="lastName">Business</div>
</article>

robwierzbowski

<article styleName='userList'>
  <h1 styleName='title'>Friends</h1>
  <ul styleName='users'>
    <li styleName='user'>
      <UserPreview user={1} compact={true} />
    </li>
    <li styleName='user'>
      <UserPreview user={2} compact={true} />
    </li>
    <li styleName='user'>

robwierzbowski

/* vars.css */

$off-black: hsl(0, 0%, 14%);
$serif-family: "Charter BT", "Times New Roman", serif;

/* component style.css */

@import 'vars.css';

.firstName {

robwierzbowski

.userSummary { 
  /* element rules */
}

.image { 
  /* element rules */
}

.firstName,
.lastName { 

robwierzbowski

.image {
  /* element rules */
  
  &.-loading { 
    /* state rules */
  }
  
  &.-loaded {
    /* state rules */
  }