Design

Simple is beautiful. Design is pure, minimal and transparent.

Do use namespaces to define your layout.

Do NOT use namespaces as a replacement for styling content better suited to a class name.

Namespaces

Because we define our own custom attributes, we can define layout properties to all HTML elements.

Global

am-margin
am-padding
am-layer

Root

am-layout

Whitespace

Ambient does not style content margin or padding by default.

Margin am-margin

Additional size values large & small are available as well as the following directions.

Padding am-padding

Additional size values large & small are available as well as the following directions.

z-axis

Change the stacking context of elements.

Layers am-layer

Layer depths are available as the following values.

Linear layout

Default

Horizontal am-layout="horizontal"

The default direction is horizontal. You're good to go.

Code

<article>
    <section>
        1
    </section>
    <section>
        2
    </section>
    <section>
        3
    </section>
</article>

Vertical am-layout="vertical"

Change the linear layout direction to vertical.

Code

<article am-layout="vertical">
    <section>
        1
    </section>
    <section>
        2
    </section>
    <section>
        3
    </section>
</article>

Grid layout

Grid layout makes use of blocks to position content and thus relies on the root semantic element for intent.

Blocks am-block

Blocks are infinitely nestable.

The Ambient grid defaults to 12 columns. Customize the columns and gutters (optional) by overriding these 2 variables: @am-block-columns @am-block-gutter

To create widths and off-set widths add "width" as a value am-block="VALUE". To create gutters add "gutter" as a value: am-block="gutter".

Add the letter P and/or L to the width value to create unique portrait and landscape widths.

Code

<section>
    <div am-block>
        <div am-block="12">
            12
        <div am-block>
    </div>
    <div am-block>
        <div am-block="6">
            6
        </div>
        <div am-block="6">
            6
        </div>
    </div>
    <div am-block>
        <div am-block="4">
            4
        </div>
        <div am-block="4">
            4
        </div>
        <div am-block="4">
            4
        </div>
    </div>
    <div am-block>
        <div am-block="3">
            3
        </div>
        <div am-block="3">
            3
        </div>
        <div am-block="3">
            3
        </div>
        <div am-block="3">
            3
        </div>
    </div>
    <div am-block>
        <div am-block="3 9P">
            3 9P
        </div>
        <div am-block="9L 3">
            9L 3
        </div>
    </div>
</section>

Navs

Nav layout is used to structure navigation and thus relies on the root semantic nav element for intent.

Horizontal nav am-layout="horizontal"

Code

<nav am-layout="horizontal">
    <a href="#">Link</al>
    <a href="#">Link</al>
    <a href="#">Link</al>
</nav>

Vertical nav am-layout="vertical"

Code

<nav am-layout="vertical">
    <a href="#">Link</al>
    <a href="#">Link</al>
    <a href="#">Link</al>
</nav>

Left align nav am-layout="left-align"

Code

<nav am-layout="left-align">
    <a href="#">Link</al>
    <a href="#">Link</al>
    <a href="#">Link</al>
</nav>

Right align nav am-layout="right-align"

Code

<nav am-layout="right-align">
    <a href="#">Link</al>
    <a href="#">Link</al>
    <a href="#">Link</al>
</nav>

Center nav am-layout="center-align"

Code

<nav am-layout="center-align">
    <a href="#">Link</al>
    <a href="#">Link</al>
    <a href="#">Link</al>
</nav>

Justified nav am-layout="justify-align"

Code

<nav am-layout="justify-align">
    <a href="#">Link</al>
    <a href="#">Link</al>
    <a href="#">Link</al>
</nav>

Buttons

Default class="am-btn"

Floating action class="am-btn am-floating-action"

Primary class="am-btn am-primary"

Secondary class="am-btn am-secondary"

Disabled class="am-btn am-disabled"

Forms

Form layout is used to structure forms and thus relies on the root section element fieldset element for intent.

Inline form am-layout="inline"

Code

<form>
    <fieldset am-layout="inline">
        <div role="group">
            <legend>
                My form
            </legend>
            <label for="inline-email">Email</label>
            <input id="inline-email" type="email" placeholder="Email">

            <label for="inline-password">Password</label>
            <input id="inline-password" type="password" placeholder="Password">

            <label for="inline-remember">
                <input id="inline-remember" type="checkbox"> Remember me
            </label>

            <button type="submit" class="am-btn am-primary">Sign in</button>
        <div>
    </fieldset>
</form>

Stacked form am-layout="stack"

Code

<form>
    <fieldset am-layout="stack">
        <div role="group">
            <legend>
                My form
            </legend>
            <label for="stacked-email">Email</label>
            <input id="stacked-email" type="email" placeholder="Email">

            <label for="stacked-password">Password</label>
            <input id="stacked-password" type="password" placeholder="Password">

            <label for="stacked-remember">
                <input id="stacked-remember" type="checkbox"> Remember me
            </label>

            <button type="submit" class="am-btn am-primary">Sign in</button>
        <div>
    </fieldset>
</form>

Aligned form am-layout="align"

Code

<form>
    <fieldset am-layout="align">
        <div role="group">
            <legend>
                My form
            </legend>
            <span>
                <label for="aligned-email">Email</label>
                <input id="aligned-email" type="email" placeholder="Email">
            </span>

            <span>
                <label for="aligned-password">Password</label>
                <input id="aligned-password" type="password" placeholder="Password">
            </span>

            <span>
                <label for="aligned-remember">
                    <input id="aligned-remember" type="checkbox"> Remember me
                </label>
            </span>

            <button type="submit" class="am-btn am-primary">Sign in</button>
        <div>
    </fieldset>
</form>

Multi-column form am-layout

The default layout for fieldset root sectioning elements is horizontal. You're good to go.

Code

<form>
    <fieldset am-layout="stack">
        <div role="group">
            <legend>
                Column 1
            </legend>
            <label for="multicolumn-1-1">Input one</label>
            <input id="multicolumn-1-1" type="email" placeholder="Input 1-1">

            <label for="multicolumn-1-2">Input two</label>
            <input id="multicolumn-1-2" type="email" placeholder="Input 1-2">
        <div>
    </fieldset>
    <fieldset am-layout="stack">
        <div role="group">
            <legend>
                Column 2
            </legend>
            <label for="multicolumn-2-1">Input one</label>
            <input id="multicolumn-2-1" type="email" placeholder="Input 2-1">

            <label for="multicolumn-2-2">Input two</label>
            <input id="multicolumn-2-2" type="email" placeholder="Input 2-2">
        <div>
    </fieldset>
    <hr />

    <button type="submit" class="am-btn am-primary">Submit</button>
</form>

Tables

Table layout is used to structure tables and thus relies on the root semantic table element for intent.

Table am-layout

Ambient provides for a responsive (portrait & landscape) table layout.

Outline the layout

If needed, display grid lines.

Outline am-layout="outline"

Code

<article am-layout="outline">
    <section>
        <h1>
            Heading
        </h1>
        <p>
            Paragraph
        </p>
    </section>
    <section>
        <h1>
            Heading
        </h1>
        <p>
            Paragraph
        </p>
    </section>
    <section>
        <h1>
            Heading
        </h1>
        <p>
            Paragraph
        </p>
    </section>
</article>

Roles

Widget roles in Ambient are used to identify common design patterns of an element (and its children).

Tab role="tab"

Code

Dropdown role="dropdown"

Code

Example role="example"

Code

Skins

A set of small, utility classes designed to be a starting point for design.