Base Style

This style guide exemplifies the base styles.

Creating a well thought out base style for a new website is one of the most critical parts to ensure an overall successful project progression.

The base style should contain all those basic HTML elements and their variations that will be needed within the website. May it be in standard formatted text, or within custom styled layout components.

The goal is to abstract the element designs just to the right level, so that they can be used in any context without further modifications, but to keep them flexible enough for custom adjustments when needed, without having to overwrite many CSS attributes.

The following markup is a best practice starting point to help you focus on what's important. It does not include all HTML elements, but as the theme is using normalize.css, elements will still be recoginzably styled, only without further customization.

1.0 Typography

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Base styling is done, when this page has a custom look and is visually structured so that all elements, their relationships, meanings and hierarchy are recognizable.

Headline H2 is a very common element

Headline H3 will also be used all over the website

Headline H4 is nice for alternative smaller styles

Headline H5 is unloved, but can be powerfull as a helper class

Headline H6 is very rare but might be a small alternative

1.1 Lists & Tables

Make sure you're not resetting all list elements, because that might come in handy for styling other layout elements, but remain their purpose for formatted text.

What you need to consider

What's the margin and padding of the list?
Which list style is the default?
Will there be custom list style icons like:
1. stars
2. checkmarks
3. colored bullets or list numbers
Nested list styles should have a different look.
- The user agent stylesheet does that already.
- So custom styled lists should consider it as well.
- An option might be to only specifically style the top level list style icon to keep the browser defaults for nesting.
Also remember to test multiline list items like the one above.

It's also important to see those lists within the content flow, so margins and paddings fit with surrounding text. And of course, also consider ordered lists like the following.

It's basically the same
But different
And they may also nest other lists:
1. may it be another ordered list,
2. or an unoredered list.
The best part is:
- this boring text ends here!
- Because I really don't know what else to write here.
- Hope it'll still be more helpful than lorem ipsum.
But don't stop here!

Icon Lists

The .iconList class is a global helper
It allows you to add custom icon styles to lists
This will make content more engaging (hopefully)

Tables

#	Ingredients	Serves 12	Serves 24
1	milk	1 quart	2 quart
2	cinnamon sticks	2	1
3	cloves	5	10
4	egg yolks	12	24
5	cups sugar	1 ½ cups	3 cups
6	dark rum	1 ½ cups	3 cups

1.2 Buttons

Link Button Link Button Ghost

Button Small Button Ghost Small

Button Link

Pill Pill Link

Feather Icon

1.3 Forms

2.0 Helpers

The BaseStyle includes some global CSS layout classes which help ensure a consistent appearance across components:

.flyntComponent
Wraps all components.
.componentSpacing
Ensures consistent component top and bottom spacing.
.centerMaxWidthContainer
Ensures consistent left and right padding and website max width.
.centerContentMaxWidth
Ensures text content doesn't flow wider than 80 characters per line.
.preContent
Ensures consistent positioning of content preceding the main section of a component.
.postContent
Ensures consistent positioning of content following the main section of a component.
.scrollableTableWrapper
Wrapping a table with a container element with this class makes the table scrollable on smaller screen sizes.
.visuallyHidden
Visually hides text in a way that screen readers will still read it.

Other helper classes are:

Box Helpers

Box helper classes can be used alone or in combination to ensure consistent styling across components.

Using the boxPadding class allows you to consistently style any content container as a responsive padding box.
Using the boxShadow class allows you to give elements a drop shadow with consistent appearance.

3.0 Themes

Light Theme

Using the .themeLight class allows you to style a group of content with a light background and dark text.

Pill Pill Link

Feather Icon

Regular link
Button Link

Dark Theme

Using the .themeDark class allows you to style a group of content with a dark background and light text.

Pill Pill Link

Feather Icon

Regular link
Button Link

Hero Theme

Using the .themeHero class allows you to style a group of content with a hero background and dark text.

Pill Pill Link

Feather Icon

Regular link
Button Link

Reset Theme

Using the .themeReset class allows you to revert the styles of a parent theme back to the inital styles.

Pill Pill Link

Feather Icon

Regular link
Button Link