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.
Federal Point Cruise 2025
It was another great weekend of food, drink, (including a Borubon tasting), and friendship. See the recap below to see what you missed (unless you were there).
The Jenga towers were TALL!!!
With 64 contestants and numerous observers, the Jenga tourney didn’t disappoint. With dinner from Publix, drinks everyone brought, and a thrilling tournement, a great time was had by all. See the recap below and thanks to Tony and Nicole for putting on a great event.
It was March Madness (St. Patricks’ style)
What a great evening of games, socialization, food, dancing, and dress. The hard work put in by the committe for this event made it a ton of fun and a huge success. Check out the TWO (way too many shenanigans for one) attachements below.
Deal me in!!!!
Crazy cards was a big hit again (no it wasn’t black jack). There were tricks to be had along with great munchies and one of the best events to meet new people. Hats off to Craig and Deb and their committee for a super fun night. See the below recap.
Kickoff Karaoke Recap
If you were there you know we had a great time. See the below recap in TWO parts. The third download is the slide presentation about the club.
It truly was a RED CARPET Event!
Gary and Pam and their committee really pulled out all the stops to throw a great fromal event. Please see the attached recap and photos of the fun filled evening.