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.
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:
- 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.
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:
- may it be another ordered list,
- 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
Button Small Button Ghost Small
Pill Pill Link
Feather Icon
1.3 Forms
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
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
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
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