A website remodeling for the Basking Ridge Business Alliance by the Ridge Computer Science Club.
- Minimalistic & clean design
- Rounded edges for all buttons and interactable components
- Emphasis on mobile-friendly elements
- BRBA Mockup
All colors:
0D1F22, 006B34, 69B578, 99D5C9, B7D3F2
BRBA Logo Color: 006B34
- 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.
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
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
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
- 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
- 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.
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.