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.

Placeholder
A caption for this image

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.

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.

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.

Headline H2 is a very common element

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.

Headline H3 will also be used all over the website

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.

Headline H4 is nice for alternative smaller styles

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.

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

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.

Headline H6 is very rare but might be a small alternative

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.


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.

  1. It's basically the same
  2. But different
  3. And they may also nest other lists:
    1. may it be another ordered list,
    2. or an unoredered list.
  4. 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.
  5. 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

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.











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

Checkbox Inputs

Radio Inputs


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