Superfeedr Patterns › Boxes

Pattern Library Notes

See the main page for details. Navigation is available via the side menu. You can also toggle all the patterns:

Pattern Section: Boxes

Boxes play a pretty central role to Superfeedr’s design. There are a few varieties of boxes that appear throughout the UI.

Data box

A simple box for displaying numeric data, with a short description of that data.

Toggle pattern display width
​x
 
<aside class="box  box--data">
    <div class="box__content">
        <span class="data__number">30</span>
        <p class="data__label">Notifications<br>(since opening this account)</p>
    </div>
</aside>
​

Data box with help

The data box, but with help available to further explain the data on display.

Toggle pattern display width
 
<aside class="box  box--data">
    <div class="help__container">
        <p class="help__text">
            We figure this out by doing... blah blah blah ...and there you have it!
        </p>
    </div>
​
    <div class="box__content">
        <span class="data__number">$30.00</span>
        <p class="data__label">Monthly rate<br>(estimated)</p>
        <a class="button  button--help  help__button  js-toggle-help" href="#">?<div></div></a>
    </div>
</aside>
​

Content box with header

This is the standard box used to display content within the Superfeedr app.

Toggle pattern display width
 
<section class="box">
    <header class="box__header">
        <h1 class="box__title">Box title</h1>
    </header>
    <div class="box__content">
        {Box content of any sort can go here, including HTML.}
    </div>
</section>
​

Content box with form

Use for collecting data from the user, or for giving them input of some kind over the application.

Toggle pattern display width
 
<section class="box  box--form">
    <header class="box__header">
        <h1 class="box__title">User Settings</h1>
    </header>
    <div class="box__content">
        <form class="form">
            <div class="form-row">
                <label class="form__label" for="">Email</label>
                <input class="form__input  input--text" type="text" value="chris@comitar.com">
            </div>
​
            <div class="form-row">
                <label class="form__label" for="">Current Password</label>
                <input class="form__input  input--text" type="password" value="password">
            </div>
​
            <div class="form-row">
                <label class="form__label" for="">New Password</label>
                <input class="form__input  input--text" type="password" value="">
            </div>
​
            <div class="form-row">
                <label class="form__label" for="">Repeat New Password</label>
                <input class="form__input  input--text" type="password" value="">
            </div>
​
            <div class="form-row  form-row--form-actions">
                <button class="button  button--flat  button--negative" type="submit" value="cancel">Cancel</button>
                <button class="button  button--raised  button--positive" type="submit" value="submit">Submit</button>
            </div>
        </form>
    </div>
</section>
​

Invisible box with content

Used to provide the content within with the padding and appearance of being in a box, without actually adopting box styles.

Toggle pattern display width
 
<div class="box  box--invisible">
    <div class="box__content">
        <p>This content lines up perfectly with content inside a normal box.</p>
    </div>
</div>
​

Input box with help

Allows the user to provide input, and offers help.

Toggle pattern display width
 
<section class="box  box--form">
    <header class="box__header">
        <h1 class="box__title">API Settings</h1>
    </header>
    <div class="box__content">
        <form class="form" id="edit_user_00000" action="/users/random" accept-charset="UTF-8" method="post">
            <div class="form-row">
                <label class="form__label" for="user_jid">XMPP JID</label>
                <div class="help__container  form__help  help--form">
                    <p class="help__text">
                        If you’re using our XMPP API, you can specify the JID to which your account will be tied. It is very useful if you have millions of feeds and you’d like to do load balancing between several concurrent connections.
                    </p>
                </div>
                <input value="random@superfeedr.com" class="form__input  input--text" type="text" name="user[jid]" id="user_jid" autocomplete="off">
                <a class="button  button--help  help__button  js-toggle-help" href="#">?<div></div></a>
            </div>
            <div class="form-row  form-row--form-actions">
                <button name="button" type="submit" class="button button--raised button--positive">Save</button>
            </div>
        </form>
    </div>
</section>
​

Chart box

Contains an element for a chart, useful for visualising user data. This could take the form of analytics data, like the number of feeds subscribed to, or the form of user data, like the credit usage over a certain period.

Pattern Library note: the chart rendered here is created using data copied from the application. In actual implementation, this data is included in a canvas element attached to the markup output by the Rails application.

Toggle pattern display width
 
<section class="box  box--analytics">
    <header class="box__header">
        <h1 class="box__title">Number of feeds (last 7 days)</h1>
    </header>
    <div class="box__content">
        <div class="analytics-chart"></div>
    </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.4/Chart.min.js"></script>
<script src="/analytics.js"></script>
​

Code box

Used to display properly formatted sample code, or console output. Note that applying the class code__highlight to a line of code gives it emphasis. This is effective when combined with a query builder or something similar, linking the parameter being adjusted to the resulting code.

Toggle pattern display width
 
<section class="box  box--console">
    <header class="box__header">
        <h1 class="box__title">Request</h1>
    </header>
    <div class="box__code">
<pre class="code"><code><span class="code__line" data-line="1">$ curl -X POST</span><span class="code__line" data-line="2" data-parameter="hub.mode">       -d 'hub.mode=subscribe'</span><span class="code__line  code__highlight" data-line="3" data-parameter="hub.topic">       -d 'hub.topic=http://push-pub.appspot.com/feed'</span><span class="code__line" data-line="4" data-parameter="hub.callback">       -d 'hub.callback=http://mycallback.tld/ok'</span><span class="code__line" data-line="5" data-parameter="authentication">       -u demo:demo https://push.superfeedr.com/</span></code></pre>
    </div>
    <div class="box__content">
        <div class="form-row  form-row--form-actions">
            <input type="submit" class="button button--raised button--positive" value="Send Request">
        </div>
    </div>
</section>
​

Table box

A normal box, on the surface, but the table inside is actually taking on the classes of the box in order to achieve the proper look. Used to display tabular data of any sort.

Note: we use the u-cell-trim-text-tds on the table to constrain cells when their contents are too long for their container.

Toggle pattern display width
 
<div class="box">
    <table class="u-cell-trim-text-tds">
        <thead class="table__header">
            <tr>
                <th class="column--feed-URL">Feed URL</th>
                <th class="column--endpoint">Endpoint</th>
                <th class="column--last-fetch">Last Fetch</th>
                <th class="column--next-fetch">Next Fetch</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="http://push-pub.appspot.com/feed">http://push-pub.appspot.com/feed</a></td>
                <td><a href="lchski@superfeedr.com">lchski@superfeedr.com</a></td>
                <td><abbr title="Mon Aug 25 2014 11:00:00 GMT-0400 (EDT)">1 hr</abbr></td>
                <td><abbr title="Mon Aug 25 2014 12:00:00 GMT-0400 (EDT)">15 min</abbr></td>
            </tr>
            <tr>
                <td><a href="http://www.theverge.com/rss/group/quick-read/index.xml">http://www.theverge.com/rss/group/quick-read/index.xml</a></td>
                <td><a href="lchski@superfeedr.com">lchski@superfeedr.com</a></td>
                <td><abbr title="Mon Aug 25 2014 11:00:00 GMT-0400 (EDT)">1 hr</abbr></td>
                <td><abbr title="Mon Aug 25 2014 12:00:00 GMT-0400 (EDT)">15 min</abbr></td>
            </tr>
            <tr>
                <td><a href="http://www.theverge.com/rss/group/apple/index.xml">http://www.theverge.com/rss/group/apple/index.xml</a></td>
                <td><a href="lchski@superfeedr.com">lchski@superfeedr.com</a></td>
                <td><abbr title="Mon Aug 25 2014 11:00:00 GMT-0400 (EDT)">1 hr</abbr></td>
                <td><abbr title="Mon Aug 25 2014 12:00:00 GMT-0400 (EDT)">15 min</abbr></td>
            </tr>
        </tbody>
    </table>
</div>
​

Form and table box

Provide a form with a reference table. Shown here in the case of a pricing table, this can be used for other applications too, if necessary.

Note: currently, this pattern uses a custom pricing-table class, which provides alternating coloured rows among other styles—this could be abstracted. Furthermore, note that we zero out the padding on the second of the two .box__content containers with our utility class u-p-0. Also, the code used to document this pattern was generated by Angular, so it may have some odd qualities to it.

Toggle pattern display width
 
<section class="box">
    <header class="box__header">
        <h1 class="box__title">Calculate Your Monthly Bill</h1>
    </header>
    <div class="box__content">
        <div class="form-row">
            <label class="form__label" for="">Enter estimated monthly notifications</label>
            <input class="form__input input--text" style="text-align: center" name="" id="" min="0">
        </div>
    </div>
    <div class="box__content  u-p-0">
        <table class="pricing-table">
            <tbody>
                <tr>
                    <td width="52%">Up to <strong>100,000</strong> notifications</td>
                    <td width="29%" style="text-align:right">$1.00 <span>/ 2,000</span></td>
                    <td width="19%">$0.00</td>
                </tr>
                <tr>
                    <td width="52%">Next <strong>600,000</strong> notifications</td>
                    <td width="29%" style="text-align:right">$1.00 <span>/ 3,000</span></td>
                    <td width="19%">$0.00</td>
                </tr>
                <tr>
                    <td width="52%">Next <strong>3,000,000</strong> notifications</td>
                    <td width="29%" style="text-align:right">$1.00 <span>/ 4,000</span></td>
                    <td width="19%">$0.00</td>
                </tr>
                <tr>
                    <td width="52%">Next <strong>12,000,000</strong> notifications</td>
                    <td width="29%" style="text-align:right">$1.00 <span>/ 5,000</span></td>
                    <td width="19%">$0.00</td>
                </tr>
                <tr>
                    <td width="52%">Next <strong>36,000,000</strong> notifications</td>
                    <td width="29%" style="text-align:right">$1.00 <span>/ 6,000</span></td>
                    <td width="19%">$0.00</td>
                </tr>
                <tr>
                    <td width="52%">All additional notifications</td>
                    <td width="29%" style="text-align:right">$1.00 <span>/ 7,000</span></td>
                    <td width="19%">$0.00</td>
                </tr>
                <tr class="pricing-calc-total">
                    <td colspan="2">Your Estimated Total</td>
                    <td>$0.00</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
​

Message box

Provides lengthy, timely information to a reader.

Toggle pattern display width
 
<section class="box box--message ">
    <div class="box__content">
        <h3 class="box--message--title">We could not deliver a notification.</h3>
        <time class="box--message--date" datetime="2015-12-29T14:44:01Z">about 1 month ago</time>
        <p class="box--message--content">We have been unable to send a notification to your PubSubHubbub endpoint: <br> <code>http://ecustom.ca/hook</code>. <br>This means that this <strong>message is lost</strong>. <br> You should make sure your endpoint is up and listening at all times if you want to avoid losing messages. Also, please <a href="http://documentation.superfeedr.com/subscribers.html#pubsubhubbub-notifications">check our docs</a> to learn how you can monitor health issues when we are trying to send you notifications.</p>
        <abbr class="box--message--count" title="Similar errors which happened the same day.">1</abbr>
    </div>
    <div class="box__footer  form">
        <div class="form-row  form-row--form-actions">
            <a class="button button--raised button--neutral button--close-message">Close</a>
            <a class="button button--raised button--positive button--unread-message">Mark as Unread</a>
        </div>
    </div>
</section>
​

Message box (read)

Read state for Message box.

Toggle pattern display width
 
<section class="box box--message box--message--read">
    <div class="box__content">
        <h3 class="box--message--title">We could not deliver a notification.</h3>
        <time class="box--message--date" datetime="2015-12-29T14:44:01Z">about 1 month ago</time>
        <p class="box--message--content">We have been unable to send a notification to your PubSubHubbub endpoint: <br> <code>http://ecustom.ca/hook</code>. <br>This means that this <strong>message is lost</strong>. <br> You should make sure your endpoint is up and listening at all times if you want to avoid losing messages. Also, please <a href="http://documentation.superfeedr.com/subscribers.html#pubsubhubbub-notifications">check our docs</a> to learn how you can monitor health issues when we are trying to send you notifications.</p>
        <abbr class="box--message--count" title="Similar errors which happened the same day.">1</abbr>
    </div>
    <div class="box__footer  box--message--actions">
        <div class="form-row  form-row--form-actions">
            <a class="button button--raised button--neutral button--close-message">Close</a>
            <a class="button button--raised button--positive button--unread-message">Mark as Unread</a>
        </div>
    </div>
</section>
​

Message box (open)

Open state for Message box.

Toggle pattern display width
 
<section class="box box--message box--message--read box--message--open">
    <div class="box__content">
        <h3 class="box--message--title">We could not deliver a notification.</h3>
        <time class="box--message--date" datetime="2015-12-29T14:44:01Z">about 1 month ago</time>
        <p class="box--message--content">We have been unable to send a notification to your PubSubHubbub endpoint: <br> <code>http://ecustom.ca/hook</code>. <br>This means that this <strong>message is lost</strong>. <br> You should make sure your endpoint is up and listening at all times if you want to avoid losing messages. Also, please <a href="http://documentation.superfeedr.com/subscribers.html#pubsubhubbub-notifications">check our docs</a> to learn how you can monitor health issues when we are trying to send you notifications.</p>
        <abbr class="box--message--count" title="Similar errors which happened the same day.">1</abbr>
    </div>
    <div class="box__footer  form">
        <div class="form-row  form-row--form-actions">
            <a class="button button--raised button--neutral button--close-message">Close</a>
            <a class="button button--raised button--positive button--unread-message">Mark as Unread</a>
        </div>
    </div>
</section>
​

Inline box

A box with the side margins removed, to sit flush with text when used in a column (as in the docs, for example).

Toggle pattern display width
 
<div class="box box--inline">
    <div class="box__header">
        <p class="box__title">Inline box</p>
    </div>
    <div class="box__content">
        <p>This box has no margins on its sides.</p>
    </div>
</div>
​