storyteller.io CSS Styleguide

Panels

UI Blocks

15.1

Inline Panels

Use to group and distinguish series of blocks and elements within a page. May be optionally titled.

Sorry, something went horribly wrong!

Keep calm and carry on.

Example Markup
<section class="ui-panel">
    <header class="ui-panel__header">
        <h1 class="ui-panel__title">Sorry, something went horribly wrong!</h1>
    </header>
    <div class="ui-panel__content --pad-2x">
        <p>Keep calm and carry on.</p>
    </div>
    <ul class="ui-panel__actions">
        <li>
            <a class="ui-panel__action icon-starred --append-icon" href="#">Attack</a>
        </li>
        <li>
            <a class="ui-panel__action icon-link --append-icon" href="#">Run</a>
        </li>
    </ul>
</section>

15.2

Blank Slates

If no content is available to show, insert a blank slate where it would otherwise appear. Offer any details that may be helpful to the user. The blank slate merely provides a color coded container for content composed from other blocks and elements. Icons and padding may be added as appropriate using utility classes.

Nothing to see here yet…

Please move along!

Example Markup
<section class="ui-blank-slate">
    <div>
        <h1>Nothing to see here yet&hellip;</h1>
        <p>Please move along!</p>
    </div>
</section>

15.3

Alerts

Feedback for users with gradations of emphasis. Especially useful for broadcast notifications and calling attention to form errors.

Something doesn’t feel right today.

Those clouds are looking awfully close.

Please investigate.

The sky is falling!

What would you like to do?

Run for Cover!

Actually, everything is OK!

Example Markup
<div class="ui-alert">
    <p>Something doesn’t feel right today.</p>
</div>

<div class="ui-alert--warning">
    <h1>Those clouds are looking awfully close.</h1>
    <p>Please investigate.</p>
</div>

<div class="ui-alert--error">
    <h1>The sky is falling!</h1>
    <p>What would you like to do?</p>
    <button class="ui-button" type="submit">Stand Strong</button>
    <a class="ui-button" href="#">Run for Cover!</a>
</div>

<div class="ui-alert--success">
    <p>Actually, everything is OK!</p>
</div>
Modifiers  
ui-alert--warning

Slightly emphasized.

ui-alert--error

Most emphasized.

ui-alert--success

Everything is great!

15.4

Tables

For any content that requires more structure than other inline formatting offers. Default tables are enhanced not only with panel-like styling but also special handling for content such as lists and links that allow tables to accomodate even more density. Note that in order to properly control the possibility of overflowing content, table blocks have a fixed layout. This means that a width must be specified as inline CSS on any column that requires a particular width. All other columns will be measured proportionately. Additionally, any content that runs long vertically will require adjacent cells to apply the --top modifier in order align flush top. Avoid display issues in some browsers for empty cells by adding a nbsp; in lieu of keeping it truly empty.

Endpoint Details Optional Parameters
/users/{id}

A SoundCloud user, or list of users.
http://developers.soundcloud.com/docs/api/reference#users

 
/users/{id}/tracks

A list of tracks of the user.
http://developers.soundcloud.com/docs/api/reference#users

  • bpm[from]
    Return tracks with at least this bpm value

  • bpm[to]
    Return tracks with at least this bpm value

  • created_at[from]
    (yyyy-mm-dd hh:mm:ss) Return tracks created at this date or earlier

  • created_at[to]
    (yyyy-mm-dd hh:mm:ss) Return tracks created at this date or later

/users/{id}/playlists

A list of playlists (sets) of the user.
http://developers.soundcloud.com/docs/api/reference#users

 
/users/{id}/favorites

A list of tracks favorited by the user.
http://developers.soundcloud.com/docs/api/reference#GET--users--id--favorites

 
/users/{id}/comments

A list of comments from this user.
http://developers.soundcloud.com/docs/api/reference#comments

 
Example Markup
<table class="ui-table">

    <thead class="ui-table__title">

        <tr>
            <th class="ui-table__header" style="width: 20%">Endpoint</th>
            <th class="ui-table__header" style="width: 40%">Details</th>
            <th class="ui-table__header" style="width: 40%">Optional Parameters</th>
        </tr>

    </thead>
    <tbody class="ui-table__content">

        <tr class="ui-table__row">
            <th class="ui-table__header">/users/{id}</th>
            <td class="ui-table__cell">
                <p>A SoundCloud user, or list of users.<br />
                <a href="http://developers.soundcloud.com/docs/api/reference#users">http://developers.soundcloud.com/docs/api/reference#users</a></p>
            </td>
            <td class="ui-table__cell">&nbsp;</td>
        </tr>

        <tr class="ui-table__row">
            <th class="ui-table__header--top">/users/{id}/tracks</th>
            <td class="ui-table__cell--top">
                <p>A list of tracks of the user.<br />
                <a href="http://developers.soundcloud.com/docs/api/reference#tracks">http://developers.soundcloud.com/docs/api/reference#users</a></p>
            </td>
            <td class="ui-table__cell--top">
                <ul>
                    <li>
                        <p><code>bpm[from]</code><br />
                        Return tracks with at least this bpm value</p>
                    </li>
                    <li>
                        <p><code>bpm[to]</code><br />
                        Return tracks with at least this bpm value</p>
                    </li>
                    <li>
                        <p><code>created_at[from]</code><br />
                        (yyyy-mm-dd hh:mm:ss) Return tracks created at this date or earlier</p>
                    </li>
                    <li>
                        <p><code>created_at[to]</code><br />
                        (yyyy-mm-dd hh:mm:ss) Return tracks created at this date or later</p>
                    </li>
                </ul>
            </td>
        </tr>

        <tr class="ui-table__row">
            <th class="ui-table__header">/users/{id}/playlists</th>
            <td class="ui-table__cell">
                <p>A list of playlists (sets) of the user.<br />
                <a href="http://developers.soundcloud.com/docs/api/reference#playlists">http://developers.soundcloud.com/docs/api/reference#users</a></p>
            </td>
            <td class="ui-table__cell">&nbsp;</td>
        </tr>

        <tr class="ui-table__row">
            <th class="ui-table__header">/users/{id}/favorites</th>
            <td class="ui-table__cell">
                <p>A list of tracks favorited by the user.<br />
                <a href="http://developers.soundcloud.com/docs/api/reference#GET--users--id--favorites">http://developers.soundcloud.com/docs/api/reference#GET--users--id--favorites</a></p>
            </td>
            <td class="ui-table__cell">&nbsp;</td>
        </tr>

        <tr class="ui-table__row">
            <th class="ui-table__header">/users/{id}/comments</th>
            <td class="ui-table__cell">
                <p>A list of comments from this user.<br />
                <a href="http://developers.soundcloud.com/docs/api/reference#comments">http://developers.soundcloud.com/docs/api/reference#comments</a></p>
            </td>
            <td class="ui-table__cell">&nbsp;</td>
        </tr>

    </tbody>

</table>

15.5

Popovers

15.6

Header

Emphasized content to assist with promotion and navigation.

Headline goes here

Subcopy goes here

Example Markup
<div class="ui-header">
    <h1 class="ui-header__headline">Headline goes here</h1>
    <p class="ui-header__subcopy">Subcopy goes here</p>
</div>