BRBA & RCSC

A website remodeling for the Basking Ridge Business Alliance by the Ridge Computer Science Club.

Front-End Design Language

General

• Minimalistic & clean design
• Rounded edges for all buttons and interactable components
• Emphasis on mobile-friendly elements
• BRBA Mockup

Palette

All colors:

0D1F22, 006B34, 69B578, 99D5C9, B7D3F2

BRBA Logo Color: 006B34

Text

• Header 1: The title of any large section on a page. Includes, but is not limited to, event name (on event-specific page), "Basking Ridge Business Alliance" on Home, the words "Member Search"on the main member search page, etc. Should not appear more than once or twice on any page.
• Header 2: A smaller title in a section on a page. For example, each of the events coming up in the Events section. Should not occur more than 8 times on a page.
• Header 3: A way to indicate a standard parameter on the page or a label, usually followed with a colon. For example, "Date:". "Address:", "Contact:".
• Button Text: All text inside buttons.
• Regular Text: All other text on the page.

Icons

All icons will be from Font Awesome with size 2x on Desktop and 1x on mobile.

Instructions on including Font Awesome icons in your HTML files

Social Media

When including social media, never show the links themselves or any other buttons. Only use these icons, which will serve as both buttons and links.

• instagram: fab fa-instagram
• facebook: fab fa-facebook-square
• twitter: fab fa-twitter-square

Details

Use these icons 5px to the left of the actual details. For example, your design should have the email icon, 5px of space, then example@gmail.com. Always include both the icon and the detail together.

• email: fas fa-envelope-square
• phone: fas fa-phone-square
• website: fas fa-globe
• location: fas fa-map-marker

Miscellaneous

• search bar: fas fa-search
• hamburger (mobile-only): fas fa-bars
• close window/x-out: fas fa-window-close
• next & previous: fas fa-chevron-left & fas fa-chevron-right

Boxes

• box 1 Contains more information about the business on the individual business page. On mockup: slide 6, has business website, name, and location.
• box 2 Contains more information about the events and what they look like when you click on them. On mockup: slide 8, has business name, location, contacts and blurb.
• box 3 Contains the links and icons to socail media On mockup: slide 4, hasTwitter facebook and instagram.
• box 4 Contains contact information on the find a member page gives email and social media. On mockup: slide 6, has contact information.
• box 5 Contains information about the business on the event page. On mockup: slide 7, has business name, date of event and blurb.

Buttons

2 button varieties exist on the stylesheet in 3 different sizes each. To use, add one of the following classes to your button.

• button-small-green: Text is size of a default p element. As of right now, use for "Add an Event", "RSVP", "Upload Logo", "Upload Flyer", "Search" and "Apply" buttons.
• button-med-green: Text is size of a default h3 element. Use for "Return to Event" button.
• button-large-green: Text is the size of a default h2 element. Use for "Add and Event" and "RSVP".
• button-small-clear: Small clear style. Use is TBD.
• button-med-clear: Medium clear style. Use for "Add an Event" on bulletin board.
• button-large-clear: Large clear style. Use is TBD.