Componentes

Basado en el paradigma del diseño atómico establecemos que los elementos que componen nuestro diseño son:

Átomos

Componentes básicos útilizados en la estrutura digital.

Buttons

ButtonButton FillButton PillButton Link
<a className="button">Button</a>
<a className="button-fill">Button Fill</a>
<a className="button-pill">Button Pill</a>
<a className="button-link">Button Link</a>

Inputs

<div className="halo">
    <form className="layer small-12 inputer">
        <div className="halo">
            <div className="layer small-12 medium-6">
                <div className="wall-pad">
                    <label for="first_name">Nombre</label>
                    <input placeholder="Placeholder" id="first_name" type="text" />
                </div>
            </div>
            <div className="layer small-12 medium-6">
                <div className="wall-pad">
                    <label for="first_name">Apellido</label>
                    <input placeholder="Placeholder" id="first_name" type="text" />
                </div>
            </div>
            <div className="layer small-12">
                <div className="wall-pad">
                    <label for="first_name">Asunto</label>
                    <input placeholder="Placeholder" id="first_name" type="text" />
                </div>
            </div>
            <div className="layer small-12">
                <div className="wall-pad">
                    <label for="first_name">Mensaje</label>
                    <textarea placeholder="Mensaje">

                    </textarea>
                </div>
            </div>
        </div>
    </form>
</div>
<div className="smish">
    <form role="search" method="get" id="searchformresults" className="layer">
        <div className="halo inputer">
            <input className="typeahead layer" id="search" type="search" placeholder="Buscar" name="s" required />
            <div className="glyphsSprite search action left-4 disable"></div>
        </div>
    </form>
</div>

Moléculas

Grupos de elementos que funcionan como una única unidad.

Huele a deseo

Desearía tocar con las puntas de mis dedos ese aroma que se me escapa cada vez que lo detecto.

<div className="orange-rose">
    <div className="pad">
        <div className="smosh">
            <div className="mod">
                <div className="mod-media zoom">
                    <img src="https://images.prismic.io/garitma/5881fad5f6db536e6ed7e4ae980f05c92504d8d0_huele-a-deseo.jpg?auto=compress,format" />
                </div>
                <div className="mod-detail">
                    <span className="mod-title">Huele a deseo</span>
                    <p className="mod-content">
                        Desearía tocar con las puntas de mis dedos ese aroma que se me escapa cada vez que lo detecto.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>