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.
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.
Minnie Mouse
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 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 powerful 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 and 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
- It’s basically the same
- But different
- And they may also nest other lists:
- may it be another ordered list,
- or an unordered 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
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 1/2 cups | 3 cups |
| 6 | dark rum | 1 1/2 cups | 3 cups |
1.2 Buttons
A button element should have a class so it can be used as a semantic tag on other interface elements, like the arrows of a slider or a closing tag on a burger menue.
1.3 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.
SHOEEEEEEE
Shoeeee got everyone’s feet moving! See the recap below.
Ghouls Bunco Night
Deb Thompson and her witchy crew put on a fun ladies only Bunco night at the community center. There were a bunch of great costumes and a fun time was had by all. Seriously check out the great photos below and on Facebook: https://www.facebook.com/groups/468015305087749
Oyster Roast and Low Country Boil
Joe and Alicia did a fantastic job with the help of their team to put on a great time with dancing music! Check out the great photos on Facebook: https://www.facebook.com/groups/468015305087749
Wilmington Cruise (yes Wilmington!)
See the fabulous write up by cruise organizer extraordinaire Nick Lawler. A great time was had in Wilmington after a several year drought in being able to go there. Pictures to follow. Exploring Wilmington SSBC Cruise: St James Marina to Wilmington NC October 6-8 The year was 1720, or thereabouts, when explorer Giovani da Verrazano…
Bald Head Cruise: The biggest turnout ever!
Bald Head 2023 was a Total Blast…. in fact, it set some club records:Check it out – we had: Our organizing committee was led by Joe and Alicia Mastropietro andincluded: Dan and Kath Craig, Harri and Heidi Beutler, Tony and NicoleCeleste.It was a brilliant weekend in Bald Head. Three boats went over a day earlyon…
GIANT JENGA: Let the blocks fall where they may…
It was a blast!!! With 64 players divided into 32 teams it was time to see who stacks up as the best. The players and fans watching enjoyed the heights to which the stacks went. In the end it came down to Walter Plaine (his beer glass) and Jim Blackburn stacking up to win the…