Component boilerplate

Simple and straightforward boilerplate that enables you to make components with zero configuration. Meant to be used with Brackets and Live Reload.

Feel free to use Tachyons for designing right in browser. Just uncomment the Tachyons import and go ahead.

Requirements

Workflow

Fork this repo
Clone the forked repo
Open index.html in Brackets
Enable Live Reload
Build component with BEM. Feel free to adjust container as you need.
Create pull-request

Guidelines

Keep it mobile-first.
Open devtools and choose narrow viewport (around 500 px wide). Your component should not misbehave at any viewport width.
Keep it BEM.
Separate BEM namespaces allows components to be truly independent and replaceable.
Use 8-Point grid.
8-Point grid makes pixels look sharp and helps to preserve vertical rhythm.

Structure

(coming soon)

Showcase

Let's review the code of the sample component, step by step.

Markup

<div class="card">
    <h2 class="card__heading">Component boilerplate</h2>
    <p class="card__text">
        Good project begins with good boilerplate. This boilerplate exists to give you the environment that feels like home.
    </p>
    <button class="card__button card__button--monospace">
        Share
    </button>
</div>

As you may see, it's just pure BEM without any extraordinary things.

Styling

First of all, let's take a look at how BEM elements' styles should be ordered:

.card { /* Block goes first */ }

.card__heading { /* Elements are going next */ }
.card__text {  }

.card__button { /* Element's pseudo-classes goes before it's modifiers */ }
.card__button:hover,
.card__button:focus {  }
.card__button:active {  }

.card__button--monospace { /* Modifiers goes after the element but before pseudos */ }

In Sass and other preprocessors you may go nested:

.card {
  &__heading {  }
  /* and so on */
}

...but this boilerplate is all about zero configuration, so you may only use CSS.

Let's review the styling itself.

Blocks

.card {
    padding: 1rem;  /* 1 */
    border-radius: .5rem;  /* 1 */
    
    font-family: sans-serif;  /* 2 */
    background: linear-gradient(to bottom, #e8e8e8, #dddddd);
    
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);  /* 3 */
}

At our reset, we use 16px as root font size. Please, use eight-pixel grid with REMs: .5rem is one grid point, 1rem is two and so on.
If you use custom font family, declare it here, at block level.
Things like shadows doesn't affect the position of other elements, so you may not follow the grid here.

Elements

.card__heading {
    margin-bottom: 1rem;  /* 1 */
}

.card__text {
    line-height: 1.25;  /* 2 */
    margin-bottom: 1rem;  /* 1 */
}

Our reset sets the default margins to zero, so you should choose them on your own. Use grid to keep it aligned to vertical rhythm.
Always fill the component with wrapping text and check how it wraps. Adjust line-height accordingly.

Pseudo-classes

.card__button {
    padding: .5rem 1rem;
    border: none;
    border-radius: .5rem;  /* 1 */
    
    color: white;
    line-height: 1.25;
    
    background: hsl(198, 51%, 49%);  /* 2 */
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);  /* 3 */
    
    transition:
        background .1s linear,  /* 4 */
        box-shadow .1s linear;
}

.card__button:hover,
.card__button:focus {
    background: hsl(198, 51%, 56%);  /* 2 */
    box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    
    outline: none;  /* 5 */
}

.card__button:active {
    background: hsl(198, 51%, 66%);  /* 2 */
    outline: none;  /* 5 */
}

Any values (excluding only line-height and maybe border-width) should be measured in grid points.
When you make colors ligher or darker on some action, use HSL definitions. In HSL, you may only change one last value (lightness) to make the color darker or lighter.
Transparent shadow looks awesome.
Never use transition: all .... Always define transition properties explicitly.
Provide some visual difference when removing outlines.

(to be continued)

bizongroup/component-boilerplate