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.
Georgetown Recap
SSBC visited Georgetown the weekend of June 18. We had members arrive by boat (8 boats), by car and by RV. On Friday evening we celebrated two christenings over seen by Padre Sea Ray Rampy. We christened “Seanchi”-the Rudden’s boat and also the Arndt’s RV …. affectionately named “Camping Buddy”. Following the festivities, 28 members…
Belmont Stakes Celebration
On Saturday, June 5th, 120 participants arrived at our Belmont Stakes party, which was held at the St. James Community Center. Most arrived as requested in Kentucky Derby like attire, and each person was given a plastic race horse as a marker for our table top race. There were twenty racetracks and horses advanced using…
SSBC Joe Loves Lobster Event Recap
A wonderful evening of music, food and fun was shared last Thursday evening (4/29/21) at the Joe Loves Lobster Event. Ninety-five members were in attendance. The Woodlands Pavilion provided a perfect venue for the affair even though the gusty winds presented a challenge to keep the tablecloths and centerpieces in place. Everyone seemed to enjoy the food served from…
A Night at the Beach Recap
Thanks to all who came to participate in a “cool” evening on the St. James Beach on Oak Island on Tuesday, April 20th. A nice fire pit warmed those who were a bit chilled! The added ambiance of Tiki torches was nice, but unfortunately too windy to light the sky! Music was in the air, along…
Bald Head Island Recap
Wonderful Weekend on BHI! The weather was beautiful, the ocean was blue, and fun was had by all! A total of 14 sailing and cruising boats made the trip! On Friday, the early attendees had lunch together at Jules’ outside patio. Some were new members, so it was nice to have the opportunity to meet…