Sample Page

This style guide exemplifies the base styles.

https://flyntwp.com/BaseStyle/

Please enable JavaScript in your browser to complete this form.
Terms and Privacy

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.

ExampleCSS variableUsage
Color example–color-accentHighlight elements or draw attention (e.g. Links or Buttons)
Color example–color-backgroundElement Backgrounds
Color example–color-background-secondaryMore contrasted Element Backgrounds (e.g. inside Table Rows)
Color example–color-borderElement Borders (e.g. Tables or Cards)
Color example–color-border-secondaryMore contrasted Element Borders (e.g. inputs)
Color example–color-textTexts and Elements
Color example–color-text-mutedSubtle Texts or Elements (e.g. Captions and Table Headers)
Color example–color-errorIndicate 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

Label: The quick brown fox jumps over the lazy dogCaption: The quick brown fox jumps over the lazy dog

Paragraphs can contain any number of words or other elements. It can also contain linksbolditalic, underline, strikethroughsubsupsmall abbr., highlightedkbdcode 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.

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

Default BUTTONS

CTA BUTTONS

Button TextButton Text disabled 

Link as Button

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.Text Input

Please enable JavaScript in your browser to complete this form.
Terms and Privacy

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.