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.

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.

Headline H1 is an unique element

Headline H2 is a very common element

Headline H3 will also be used all over the website

Headline H4 is nice for alternative smaller styles

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

Headline H6 is very rare but might be a small alternative

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.

It’s basically the same
But different
And they may also nest other lists:
1. may it be another ordered list,
2. 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!

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

Ceci est un bouton primaire

Ceci est un lien

Basestyle 9 Jan, 2022· Relation Client

1.0 Typography

Headline H1 is an unique element

Headline H2 is a very common element

Headline H3 will also be used all over the website

Headline H4 is nice for alternative smaller styles

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

Headline H6 is very rare but might be a small alternative

1.1 Lists & Tables

What you need to consider

Tables

1.2 Buttons

Commentaires

A WordPress Commenter dit :

Laisser un commentaire Annuler la réponse

Je m'oriente dans la banque

J'oriente mes élèves

À propos