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 H1 is a very common element

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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 Link

Button Link Small

Feather Icon

1.3 Forms

Placing form elements on a page should just work without having to apply extra classes or custom wrapping elements. However, a <fieldset> element provides a nice opportunity to group multiple form elements.

Text Input

Text Input Disabled

Text Input Validation Error

Email Input

Search Input

Password Input

Your message

Wrap the select element in a container with the class .select to make the select arrow themeable.

Select Input

The user agent stylesheet typically has a very weird <fieldset> and <legend> styling. But hey: why not customize it to our needs?!

Checkbox Inputs

Checkbox Label #1^*
Checkbox Label #2 Multiline Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Checkbox Label #3

Radio Inputs

Radio Label #1
Radio Label #2 Multiline Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Radio Label #3

One Input Forms

Uses screen reader visible labels.

Wrap the select element in a container with the class .oneInputForm to style single forms.

2.0 Helpers

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

.flyntComponent
Wraps a component.
.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 60 characters per line.
.centerContentMaxWidthLarge
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 box shadow with consistent appearance.
Using the .boxRadius class allows you to give elements a border radius.

3.0 Themes

Light Theme

Using the data-theme="light" attribute allows you to style a group of content with a light background and dark text.

Feather Icon

Regular link
Button Link

Text Input

Select Input

Checkbox Input

Checkbox Label #1

Radio Inputs

Radio Label #1
Radio Label #2

#	Ingredients	Serves 12	Serves 24
1	milk	1 quart	2 quart
2	cinnamon sticks	2	1

Dark Theme

Using the data-theme="dark" attribute allows you a group of content with a dark background and light text.

Feather Icon

Regular link
Button Link

Text Input

Select Input

Checkbox Input

Checkbox Label #1

Radio Inputs

Radio Label #1
Radio Label #2

#	Ingredients	Serves 12	Serves 24
1	milk	1 quart	2 quart
2	cinnamon sticks	2	1

Hero Theme

Using the data-theme="hero" attribute allows you a group of content with a hero background and dark text.

Feather Icon

Regular link
Button Link

Text Input

Select Input

Checkbox Input

Checkbox Label #1

Radio Inputs

Radio Label #1
Radio Label #2

#	Ingredients	Serves 12	Serves 24
1	milk	1 quart	2 quart
2	cinnamon sticks	2	1

Reset Theme

Using the data-theme="reset" class allows you to revert the styles of a parent theme back to the inital styles.

Feather Icon

Regular link
Button Link

Text Input

Select Input

Checkbox Input

Checkbox Label #1

Radio Inputs

Radio Label #1
Radio Label #2

#	Ingredients	Serves 12	Serves 24
1	milk	1 quart	2 quart
2	cinnamon sticks	2	1