Skip to main content

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 and other elements will still work, only without further customization.

  1. Colors
  2. Typography
  3. Buttons and Links
  4. Forms
  5. Helpers
  6. Themes
    1. Theme Light
    2. Theme Dark
    3. Theme Reset

1. Colors #

A strong selection of colors is essential for any website. Using CSS color variables provide a consistent and efficient way to incorporate color into the design while it is easy to make global changes.

Additionally demonstrates how tables typically appear
Example CSS variable Usage
Color example --color-accent Highlight elements or draw attention (e.g. Links or Buttons)
Color example --color-background Element Backgrounds
Color example --color-background-secondary More contrasted Element Backgrounds (e.g. inside Table Rows)
Color example --color-border Element Borders (e.g. Tables or Cards)
Color example --color-border-secondary More contrasted Element Borders (e.g. inputs)
Color example --color-text Texts and Elements
Color example --color-text-muted Subtle Texts or Elements (e.g. Captions and Table Headers)
Color example --color-error Indicate errors (e.g. on inputs)

2. Typography #

Using the css variable --flow-space creates a smooth flow rhythm between elements.

H1: The quick brown fox jumps over the lazy dog

H2: The quick brown fox jumps over the lazy dog

H3: The quick brown fox jumps over the lazy dog

H4: The quick brown fox jumps over the lazy dog

H5: The quick brown fox jumps over the lazy dog

H6: The quick brown fox jumps over the lazy dog

Paragraph: The quick brown fox jumps over the lazy dog

Caption: The quick brown fox jumps over the lazy dog

Paragraphs can contain any number of words or other elements. It can also contain links, bold, italic, underline, strikethrough, sub, sup, small abbr., highlighted, kbd, code or other inline elements.

This paragraph is a placeholder and it can be skipped. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet venenatis urna cursus. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus.

“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.”

— a mysterious web developer

This paragraph is a placeholder and it can be skipped. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet venenatis urna cursus. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus.

Placeholder
A caption for the image

Lists

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.

A <button> element without a class should have its styles reset, so it can be used as a semantic tag on other interface elements, like the arrows of a slider, a closing × or a burger menu.

Using the anchor element (<a>) as a button is common for a “call to action”. Anchor elements as regular Link are nearly on all over the internet.

Displaying buttons side by side is a common pattern. The .groupContainer class is a helper to achieve that.

Link as Button Link as Button outlined

Link as Button Text

Regular Link

4. 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

5. Helpers #

To ensure a consistent appearance across all components, it is important to use helper classes for specific tasks.

Keep in mind: A helper class should do one job and does it well.

  • .componentSpacing
    Ensures consistent component top and bottom spacing.
  • .container
    Ensures consistent left and right padding and website max width.
  • .groupContainer
    Ensures consistent spacing between elements inside the container.
  • .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.

Box Helpers

Box helper classes can be used alone or in combination to ensure consistent styling across components and easily create “cards”.

  • Using the class .boxBorder allows you to consistently add borders.
  • Using the class .boxPadding allows you to consistently style any content container as a responsive padding box.

6. Themes #

To easily change the appearance of a group of content, using themes is a reliable method. The data-theme attribute makes it simple to apply styles and customize the appearance of a group of content, while the code keeps readable.

Theme Light #

Using the attribute data-theme="light" allows you to style a group content as Theme Light.

  1. Colors
  2. Typography
  3. Buttons and Links
  4. Forms
  5. Helpers

1. Colors #

Additionally demonstrates how tables typically appear
Example CSS variable Usage
Color example --color-accent Highlight elements or draw attention (e.g. Links or Buttons)
Color example --color-background Element Backgrounds
Color example --color-background-secondary More contrasted Element Backgrounds (e.g. inside Table Rows)
Color example --color-border Element Borders (e.g. Tables or Cards)
Color example --color-border-secondary More contrasted Element Borders (e.g. inputs)
Color example --color-text Texts and Elements
Color example --color-text-muted Subtle Texts or Elements (e.g. Captions and Table Headers)
Color example --color-error Indicate errors (e.g. on inputs)

2. Typography #

H1: The quick brown fox jumps over the lazy dog

H2: The quick brown fox jumps over the lazy dog

H3: The quick brown fox jumps over the lazy dog

H4: The quick brown fox jumps over the lazy dog

H5: The quick brown fox jumps over the lazy dog

H6: The quick brown fox jumps over the lazy dog

Paragraph: The quick brown fox jumps over the lazy dog

Caption: The quick brown fox jumps over the lazy dog

Paragraphs can contain any number of words or other elements. It can also contain links, bold, italic, underline, strikethrough, sub, sup, small abbr., highlighted, kbd, code or other inline elements.

This paragraph is a placeholder and it can be skipped. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet venenatis urna cursus. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus.

“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.”

— a mysterious web developer

This paragraph is a placeholder and it can be skipped. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet venenatis urna cursus. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus.

Placeholder
A caption for the image

Lists

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.

Link as Button Link as Button outlined

Link as Button Text

Regular Link

4. Forms #













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

5. Helpers #

Box Helpers

Box helper classes can be used alone or in combination to ensure consistent styling across components and easily create “cards”.

  • Using the class .boxBorder allows you to consistently add borders.
  • Using the class .boxPadding allows you to consistently style any content container as a responsive padding box.

Theme Dark #

Using the attribute data-theme="dark" allows you to style a group content as Theme Dark.

  1. Colors
  2. Typography
  3. Buttons and Links
  4. Forms
  5. Helpers

1. Colors #

Additionally demonstrates how tables typically appear
Example CSS variable Usage
Color example --color-accent Highlight elements or draw attention (e.g. Links or Buttons)
Color example --color-background Element Backgrounds
Color example --color-background-secondary More contrasted Element Backgrounds (e.g. inside Table Rows)
Color example --color-border Element Borders (e.g. Tables or Cards)
Color example --color-border-secondary More contrasted Element Borders (e.g. inputs)
Color example --color-text Texts and Elements
Color example --color-text-muted Subtle Texts or Elements (e.g. Captions and Table Headers)
Color example --color-error Indicate errors (e.g. on inputs)

2. Typography #

H1: The quick brown fox jumps over the lazy dog

H2: The quick brown fox jumps over the lazy dog

H3: The quick brown fox jumps over the lazy dog

H4: The quick brown fox jumps over the lazy dog

H5: The quick brown fox jumps over the lazy dog

H6: The quick brown fox jumps over the lazy dog

Paragraph: The quick brown fox jumps over the lazy dog

Caption: The quick brown fox jumps over the lazy dog

Paragraphs can contain any number of words or other elements. It can also contain links, bold, italic, underline, strikethrough, sub, sup, small abbr., highlighted, kbd, code or other inline elements.

This paragraph is a placeholder and it can be skipped. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet venenatis urna cursus. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus.

“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.”

— a mysterious web developer

This paragraph is a placeholder and it can be skipped. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet venenatis urna cursus. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus.

Placeholder
A caption for the image

Lists

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.

Link as Button Link as Button outlined

Link as Button Text

Regular Link

4. Forms #













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

5. Helpers #

Box Helpers

Box helper classes can be used alone or in combination to ensure consistent styling across components and easily create “cards”.

  • Using the class .boxBorder allows you to consistently add borders.
  • Using the class .boxPadding allows you to consistently style any content container as a responsive padding box.

Theme Reset #

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

  1. Colors
  2. Typography
  3. Buttons and Links
  4. Forms

1. Colors #

Additionally demonstrates how tables typically appear
Example CSS variable Usage
Color example --color-accent Highlight elements or draw attention (e.g. Links or Buttons)
Color example --color-background Element Backgrounds
Color example --color-background-secondary More contrasted Element Backgrounds (e.g. inside Table Rows)
Color example --color-border Element Borders (e.g. Tables or Cards)
Color example --color-border-secondary More contrasted Element Borders (e.g. inputs)
Color example --color-text Texts and Elements
Color example --color-text-muted Subtle Texts or Elements (e.g. Captions and Table Headers)
Color example --color-error Indicate errors (e.g. on inputs)

2. Typography #

H1: The quick brown fox jumps over the lazy dog

H2: The quick brown fox jumps over the lazy dog

H3: The quick brown fox jumps over the lazy dog

H4: The quick brown fox jumps over the lazy dog

H5: The quick brown fox jumps over the lazy dog

H6: The quick brown fox jumps over the lazy dog

Paragraph: The quick brown fox jumps over the lazy dog

Caption: The quick brown fox jumps over the lazy dog

Paragraphs can contain any number of words or other elements. It can also contain links, bold, italic, underline, strikethrough, sub, sup, small abbr., highlighted, kbd, code or other inline elements.

This paragraph is a placeholder and it can be skipped. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet venenatis urna cursus. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus.

“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.”

— a mysterious web developer

This paragraph is a placeholder and it can be skipped. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet venenatis urna cursus. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus.

Placeholder
A caption for the image

Lists

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.

Link as Button Link as Button outlined

Link as Button Text

Regular Link

4. Forms #













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

5. Helpers #

Box Helpers

Box helper classes can be used alone or in combination to ensure consistent styling across components and easily create “cards”.

  • Using the class .boxBorder allows you to consistently add borders.
  • Using the class .boxPadding allows you to consistently style any content container as a responsive padding box.