Styleguide

The Hired Design Library

Explanation and demonstration to help developers and designers work with Hired’s styles, components, and methods.

Steps to success

Here’s the general approach you should take when implementing designs into code at Hired.

STEP 1

Start with the new components.

Our components are relatively simple, but they can help us avoid making a lot of repeat decisions.

For example, the section and card containers come with built-in responsive padding: you can use .card instead of having to define a “white box with 4rem padding on desktop sizes.”

See our individual component pages for further details, e.g., sections, cards, and inputs.

STEP 2

Place and modify using functional css.

Hired uses a functional css framework called Fortitude. While we no longer want to rely solely on this system to style our products, it’s still a solid way to implement and tweak.

For example, these three cards share the .card style, but we placed them using grid classes like .sm-4of12 and .xs-pt2.

See the old intro page for some background, or see the Helpers page to see class examples.

STEP 3

Use custom styling where needed.

At times, the design you’re working from will call for things that our components and usual styles don’t cover. That’s ok!

Where needed, add custom classes and styles. If it’s a one-off, make sure it’s specific to your instance(s). If we want to use it a lot, let’s consider adding it to our library.

See the custom CSS page for more technical information. See contribute for more on that.

Sections

Most of the other components in this library, (e.g., cards and text) are will go inside section—the exception being stuff like navigation bars and modals.

Some pages, like the Hired.com homepage, will have multiple sections; but some will have just one big section, like our candidate search page.

See Sections

Tips

Don’t forget the .section--inner part: this is important to the layout features that sections give you for free.

Sections have a max-width for all contained content, so we don’t have line length issues (etc.) on really big screens.

There are shorter and taller variants, and a few different colors.

Cards

Cards are usually used to show multiple items of a similar category to the user — e.g., choices or items from a list.

The card is a really simple component, but it does come with some responsive logic and some style basics. Plus, we don’t want to have to spec and build the same padding every time, now do we?

See Cards

Tips

Cards have 4rem padding, by default, but that drops to 3rem on mobile/xs sizes.

Cards have their own built-in margins to space out appropriately.

Cards have a few variants, like making the padding tighter or looser.

Card Rows

You can show cards in a typical “dashboard” style — like in the “Steps to Success” section above — or you can use them as rows in a list. For rows, we’ll use .card--tight to tighten the padding for rows.
The very first row
Attribute here
A+
This is good example of nested grids. This sentence is 8of12.
Another row
Another attribute
A+
For long rows, we can use tighter padding (1rem) between them.
The last row
Hey Hey
A+
This is a good use of the flexbox implementation we have, too!

Ok, let's talk about modals.

There are two types. Open them up to learn more. Also, note that we’ve used the super primary button here to make a pronounced, high-contrast impression on a dark background.

Forms

Forms are basically cards that contain inputs (and, usually, submit or save actions).

Note, we added a little extra padding-right on this paragraph to give us more visual space from that form over there. That’s a practical use of our functional css setup (see helpers)

Notes

Notice that the buttons in the form on the right move from primary to secondary, and are anchored on the left (on desktop).

The form fields used in this form are the icon + text type of input. Sometimes we’ll use these when the fields are self-explanatory and we want to save space.

Learn about forms

Some forms have explanatory content like this. When present, we’ll often put a horizontal divider between that content and the following inputs, like this: