robwierzbowski

// Takes two strings.
// Returns true if they're anagrams, false if not.

function isAnagram (a, b) {
  const remove = (string, pattern) => string.replace(new RegExp(pattern, 'ig'), '');

  // Discard whitespace; anagrams can be different numbers of words
  let lettersA = remove(a, '\\s');
  let lettersB = remove(b, '\\s');

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

<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

/* type.css */

@import 'vars.css';

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

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

/* vars.css */

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

/* component style.css */

@import 'vars.css';

.firstName {

robwierzbowski

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

robwierzbowski

.userSummary {
  /* element rules */
  
  &.--compact { 
    /* modifier rules */
  }
}

.image {
  /* element rules */

robwierzbowski

.userSummary { 
  /* element rules */
}

.image { 
  /* element rules */
}

.firstName,
.lastName {