Skip to content
southport sailing and boat club logo

Southport Sailing and Boat Club

  • AboutExpand
    • By Laws
    • Board
    • History
    • Photo Gallery
  • Contact
  • Events
  • MembershipExpand
    • Membership
    • Directory
  • News
southport sailing and boat club logo
Southport Sailing and Boat Club

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.

A caption for this image

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

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

  • the icon list class is a global helper
  • it allows you to add custom icon styles to lists
  • This make content more engaging (hopefully)

Tables

#IngredientsServes 12Serves 24
1milk1 quart2 quart
2cinnamon sticks21
3cloves510
4egg yolks1224
5cups sugar1 1/2 cups3 cups
6dark rum1 1/2 cups3 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.

type button
type button
type button large
type button large
type button small
type button small
Pill

Button Link >

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.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

clam-boil
Event Recap

Georgetown Recap

BySSBC June 29, 2021August 16, 2021

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…

Read More Georgetown RecapContinue

belmont-group-shot
Event Recap

Belmont Stakes Celebration

Bydev-dave June 21, 2021

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…

Read More Belmont Stakes CelebrationContinue

event-group-shot
Event Recap

SSBC Joe Loves Lobster Event Recap

Byssbc info April 30, 2021June 21, 2021

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…

Read More SSBC Joe Loves Lobster Event RecapContinue

ocean-water
Event Recap

A Night at the Beach Recap

Byssbc info April 22, 2021June 21, 2021

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…

Read More A Night at the Beach RecapContinue

bald-head-dock-area
Event Recap

Bald Head Island Recap

Byssbc info April 21, 2021June 21, 2021

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…

Read More Bald Head Island RecapContinue

Facebook Facebook
  • Contact Us
  • Events
  • News

© 2023 Southport Sailing and Boat Club a 501c Nonprofit

  • About
    • By Laws
    • Board
    • History
    • Photo Gallery
  • Contact
  • Events
  • Membership
    • Membership
    • Directory
  • News