This style guide exemplifies the base styles.
https://flyntwp.com/BaseStyle/
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 #
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.
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
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 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.
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:
- stars
- checkmarks
- 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.
3. Buttons and Links #
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.
Default BUTTONS
CTA BUTTONS
Button TextButton Text disabled
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
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.