README.md

Componentes de Template

Usado para prover templates estruturados.

Padrão

t-template
t-template--modificador
t-template__subcomponente--modificador

Exemplos

t-icon
t-icon--large

t-btn
t-btn--large

t-media
t-media__img
t-media__img--large
t-media__opt
t-media__body

Componentes de Estado

Usado para indicar o estado do componente.

Padrão

is-estado-tipo

Exemplos

is-hidden
is-collapsed
is-expanded
is-selected

Componentes do JavaScript

Usado para prover ganchos de javascript para um componente. Pode ser usado para prover uma interface de Javascript aprimorada ou para abstrair outros comportamentos de Javascript.

Padrão

js-ação-nome

Exemplos

js-submit
js-action-save
js-ui-collapsible
js-ui-dropdown
js-ui-dropdown--control
js-ui-dropdown--menu
js-ui-carousel

Sobre os Componentes do tema

Could reuse the Template Component naming convention, for example: Poderia reutilizar a convenção de nomenclatura do componente do tema, por exemplo:

especifico
especifico--modificador
especifico__subcomponente
especifico__subcomponente--modificador

Ou apenas deixe qualquer coisa passar.

html-example.html

<!-- 
What if we used more white-space around class values? 
Does it make the code more readable and surface/separate the components 
among the rest of the info in the HTML?
-->

<div class=" t-unit  t-media ">
    <div class=" t-media__img ">
        <a href="#">
            <img class=" product-img " src="http://example.com" alt="">
        </a>
    </div>
    <form class=" t-media__opt  js-action-rate ">
        <button class=" product-rating " type="submit">
            <div class=" product-rating__panel ">
                <span class=" product-rating__points ">
                    5
                </span>
                <span class=" product-rating__label ">
                    upvotes
                </span>
            </div>
            <strong class=" product-rating__action  t-btn  btn-normal ">
                Upvote
            </strong>
        </button>
    </form>
    <div class=" t-media__body ">
        <h2 class=" h2 ">
            <a href="#">Product title</a>
        </h2>
        <p>[content]</p>
        <ul class=" t-uilist--hz ">
            <li><a class=" tag " href="#">tag name</a></li>
            <li><a class=" tag " href="#">tag name</a></li>
            <li><a class=" tag " href="#">tag name</a></li>
        </ul>
    </div>
</div>