Sickbrah is a living, ever changing and never final styleguide and pattern library for eola.co. It may or may not be up to date.

We have a Storybook for showcasing our React components.

Colophon

eola was and still is discussed, designed and built on Apple MacBooks by Jaime Caballero and Dan Steele.

We use Slack, Sketch, Zeplin, Heroku, GitHub, Cloudflare and Cloudinary.

Credits

• The unsplash community. Check out our collection.
• @iamtesktse for the placeholder image service gradientjoy.
• Indian Type Foundry for Poppins typeface.
• Omnibus-Type for Chivo typeface.

Pattern library:

• Colours
• Typography
• Headings
• Buttons
• Form elements
• Navigation
• Messages
• Field
• Formsection
• Tables
• Cards
• Landing

1. Headings on Poppins 600 (700 if the type is big).
2. Body content on Chivo 400 (300 if there's enough contrast).
3. Tags on Poppins 400/300, all caps and with some letter-spacing.
4. Avoid caps and italics if possible. Use alternate weights as an accent.
5. In case of doubt, left align. Never justified.

We use 2 typefaces, one mainly for headings and the other for content.

Use the classes only when you want these styles. You may use straight up h1 to h6 elements anywhere for semantic reasons.

Classes may be combined to achieve multiple results. Custom buttons support inline CSS for color or background.

Use the .c-button--iconed modifier and put the text in a span with .c-button__text wrapper. Icon colour won't change with the button style. If you want the text to hide on certain scenarios, use .is-hidden-until or .is-hidden-from You can put the icon before or after the text.

Recommended button styles are outline and alternative.

You may also use the button without a label at all, although only if the former doesn't fit.

Filter should always contain the All option, and it should be the default state. Only use filter if the default view is All. The customer should then filter down. If the default view is an active state (e.g. live) but the other types are on the same hierarchy level (e.g. archived) then use tabs.

Filter is being used on the Blog and Academy to filter the posts, and is a great suit for data pages where you might wanna get more granular data.

Form elements represent a baseline only, to achieve best results please use the slightly more complete components like Field.

The internal link slug must match the ID of the tabs-pane element.

.c-field is formed by multiple elements:

• .c-field__label Constitutes the label of the field
• .c-field__hint (optional) Adds hint text for field
• .c-field__content This consistitutes the field itself. It may be combined with other classes depending on the type of field.
• .c-field__error (optional) Presents the error text in red

Combine multiple elements in new ways.

Tables have rows, and rows have cells, and sometimes an icon. Rows can be of 3 types:

• .c-table__row--header The top level and first row, show be a series of labels for each column
• .c-table__row--parent Done for grouping regular rows
• .c-table__row The default and most common

Each row is formed by cells. Different modifiers are available. Modifiers must be used in the matching header cell.

• .c-table__cell--title is a standard solution for name of item. Adds trailing dots after a certain width.
• .c-table__cell--number is for somewhat small unitless numbers, like counts. Will center align.
• .c-table__cell--amount is for large numbers where the user may want to see a progression. Will right align.

Rows may combine into groups and parents may be set to them

Cells can be unique to mobile, tablet and desktop with the unique identifiers. Tablet applies to desktop too.

To break down pricing structures or calculations into bits.

Cards are one of the main branded components. By default, cards don't have a fixed height and take the full width of the container. You'll have to use .l-cards to give these cards width constrains.

• If the .c-card component is a link, it will have a hover/focus event.
• All elements are optional, but removing them may cause unexpected alignment.
• .c-card__frame will vary in height depending of the card type.
• The cards layout will make each card the same height, but remember the content alignment still has to take place here.

Rarely used by itself, but used by all cards as a baseline.

Fancy cards are the variant used when you want a poster-like appereance, with just the title of the element and a CTA, but with room in the middle to see the image.

Extends fancy card and applies different height constrains. Also adds a gradient overlay between the image and the text. Useful for user-generated images.

Content-full cards use the profile pattern. These have the image as an addition and focus on the content.