View index.js
// 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');
View additive.scss
.userPreview {
border: solid $off-black;
&.--default {
border-width: 5px;
font-size: 1.5rem;
background: $light-gray;
}
&.--compact {
View non-additive.scss
.userPreview {
border: 5px solid $off-black;
font-size: 1.5rem;
background: $light-gray;
&.--compact {
border: 1px solid $off-black;
font-size: 1rem;
background: transparent;
}
View UserList.html
<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'>
View mixins.scss
/* type.css */
@import 'vars.css';
@define-mixin header {
font-family: $font-sans;
font-weight: 600;
letter-spacing: -0.01em;
}
View UserSummary.html
<article styleName="userSummary --compact">
<img styleName="image -loading" src="/low-res.jpg" />
<div styleName="firstName">Mr. Jim</div>
<div styleName="lastName">Business</div>
</article>
View variables.scss
/* vars.css */
$off-black: hsl(0, 0%, 14%);
$serif-family: "Charter BT", "Times New Roman", serif;
/* component style.css */
@import 'vars.css';
.firstName {
View states.scss
.image {
/* element rules */
&.-loading {
/* state rules */
}
&.-loaded {
/* state rules */
}
View modifiers.scss
.userSummary {
/* element rules */
&.--compact {
/* modifier rules */
}
}
.image {
/* element rules */
View elements.scss
.userSummary {
/* element rules */
}
.image {
/* element rules */
}
.firstName,
.lastName {