Explanation and demonstration to help developers and designers work with Hired’s styles, components, and methods.
Here’s the general approach you should take when implementing designs into code at Hired.
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.
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.
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.
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 SectionsDon’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 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 CardsCards 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--tight
to tighten the padding for rows.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)
Notice that the buttons in the form on the right move from primary to secondary, and are anchored on the left (on desktop).