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

Data box with help

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

Toggle pattern display width

Content box with header

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

Toggle pattern display width

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

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

Input box with help

Allows the user to provide input, and offers help.

Toggle pattern display width

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

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

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

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

Message box

Provides lengthy, timely information to a reader.

Toggle pattern display width

Message box (read)

Read state for Message box.

Toggle pattern display width

Message box (open)

Open state for Message box.

Toggle pattern display width

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