StyleGuide

Page Layout, Max Widths, Grid Lines, and Colorblock

Site Widths

Two sass variables in the settings layer control the maximum widths for the site. $site-max-width is the maximum width of the outermost container and therefore every element on the site. $layout-width is the maximum width for most site content.

The .page-layout Block

The block .page-layout is the outer container for all pages on the website. It extends the trump .grid-lines and its first child should be the element .page-layout__content.

Anytime a page-specific class is needed a modifier should be added to this block such as .page-layout--homepage.

This block and it's elements are intended to handle the bulk of vertical and horizontal spacing on page layouts. Therefore, developers should avoid applying outer margins and padding on components and they should endeavor to handle their page layout spacing needs with these classes.

This block has several elements that are intended for use in structuring pages. They are:

  • .page-layout__section - A page's content should be divided up into sections using this element. All vertical spacing between content components should be handled with modifiers of this class. See the stylesheet for available spacing modifiers.
  • .page-layout__section-container - This class is used to constrain content to the $layout-width and to ensure that content sits above the grid lines in the z-index.
  • .page-layout__content-wrapper - This class is used to ensure that content sits above the grid lines in the z-index without constraining the width.

The golden rule of this layout setup is that no element from the level of .page-layout__section on up should ever have a max-width lower than $site-max-width. Any narrower container width should only ever be applied to a child of .page-layout__section. All of our decorative design elements described below depend on this.

Grid Lines

The trump class .grid-lines provides the 3 gray horizontal lines that are visible throughout the site. These elements appear consistently across all pages and designs often require them to sit between section backgrounds and content.

The .grid-lines class itself uses two absolutely positon pseudo-elements with gray borders to create the lines. The lines should always split the outer site width into 4 equal sections.

There are many situations where the grid lines need to appear between section backgrounds and section content. This is why .grid-lines was developed as a trump class and not an element of .page-layout. The trump class allows the lines to be included within page sections and components.

In order to maintain the illusion that the lines are continous .grid-lines must always stretch to the full site width. It should never be used within .page-layout__section-container.

There are two acceptable ways to include the lines in a section or component. They are:

  • By extending (@extend %gridlines;) the placeholder object.
  • By including an empty div with the class .grid-lines within a section or component.

In both cases you should be careful to ensure that lines are contained within the full site width and not some smaller container. The correct approach will depend on the z-indexing needs of the situation.

Colorblock

Much like .grid-lines, .colorblock is a trump class that adds a decorative psuedo-element. It adds a pink block of color that can be sized differently depending on the design. It has three size/position modifiers: .colorblock--left, .colorblock--right, and .colorblock--middle. It is never appropriate to apply .grid-lines and .colorblock to the same element because their use of pseudo-elements would conflict.

Colors

Brand Color Variables

  • $bva-orange

  • $neon-blue

  • $dark-blue

  • $peachy

  • $pinkish

  • $warm-white

  • $warm-black

  • $dark-brown

Web Utility Color Variables

  • $darkest-grey

  • $dark-grey

  • $grey

  • $light-grey

  • $error-red

Icons

.svg-icon
$ICON / checkCreated with Sketch.
Check
$ICON / arrow-downCreated with Sketch.
ArrowDown
$ICON / arrow-rightCreated with Sketch.
ArrowRight
$ICON / arrow-upCreated with Sketch.
ArrowUp
$ICON / arrow-leftCreated with Sketch.
ArrowLeft
$ICON / arrow-selectCreated with Sketch.
ArrowSelect
2E313E83-CDA5-4865-853D-6854E4ACA0A6Created with sketchtool.
TinyArrow
icon-chatCreated with Sketch.
Chat
icon-close-xCreated with Sketch.
Close
icon-emoji-envelopeCreated with Sketch.✉️
EmojiEnvelope
icon-emoji-paintbrushCreated with Sketch.🖌
EmojiPaintbrush
icon-emoji-shakabruhhhCreated with Sketch.🤙
EmojiShakabruhh
icon-emoji-trophyCreated with Sketch.🏆
EmojiTrophy
icon-emoji-eyesCreated with Sketch.👀
EmojiEyes
Line 5 Copy 4Created with Sketch.
Line
LinkedTextArrow
menu
Menu
$ICON / minusCreated with Sketch.
Minus
$ICON / plusCreated with Sketch.
Plus
icon-quote-fillCreated with Sketch.
QuoteFill
icon-quote-outlineCreated with Sketch.
QuoteOutline
$ICON / review-half-starCreated with Sketch.
ReviewHalfStar
$ICON / review-star-emptyCreated with Sketch.
ReviewStarEmpty
$ICON / review-starCreated with Sketch.
ReviewStar
$ICON / searchCreated with Sketch.
Search
$ICON / social-twitter Copy 2Created with Sketch.
SocialDribble
$ICON / social-twitter Copy 3Created with Sketch.
SocialFacebook
$ICON / social-twitter CopyCreated with Sketch.
SocialInstagram
$ICON / social-twitterCreated with Sketch.
SocialTwitter

Type Styles

TypestyleFont-familyWeightSizeLine
H1Gibson700120px D
50px M
120px D
50px M
H2Gibson700120px D
50px M
120px D
50px M
H3Gibson70050px D
25px M
60px D
30px M
H4Gibson70035px D
25px M
42px D
32px M
H5Gibson50028px D
20px M
35px D
28px M
H6Gibson50014px D
12px M
23px D
23px M
Accent HeaderGibson50014px D
12px M
17px D
17px M
Tiny HeaderGibson60014px D
12px M
17px D
17px M
Body - StandardGibson20018px D
18px M
28px D
28px M
Body - SmallGibson20016px D
16px M
19px D
19px M
Body - MediumGibson30024px D
18px M
36px D
28px M
Body - LargeGibson20040px D
24px M
52px D
34px M
Body - XLGibson20050px D
30px M
60px D
38px M

Heroes

Hero tall

We exist to bring life tocommerce

Project Hero

WHAT WE DID

Hero short

Let'sGrow

Hero short - single line with scribble

Test

Partners Summary

Partners

BVAccel holds official partnership status with Shopify Plus, Google, Workarea, Yotpo, Dynamic Yield, Bronto, and Impact Radius. With a best-in-class technology stack, we create valuable shopping experiences that serve as the foundation for revenue acceleration.

Text Image Content Block

Work & PLAY

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque nisi animi facilis delectus blanditiis obcaecati, velit atque ex repudiandae. Cumque fugit distinctio vitae illo hic repellat

Four Line Header Image Hero

WE Dream BIG & HUSTLE

Copy Blocks

This is a basic copy block with no extra fields added, just with some content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a basic copy block with larger font and its usual content.

Here's some smaller content that's beneath it, but part of the same copy block. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

with subtitle

This is a basic copy block with a subtitle. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

with CTA button

This is a basic copy block with a subtitle. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

with link

This is a basic copy block with a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

with link & cta button

This is a basic copy block with both a link AND a button. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

001

With counter text

This is a copy block with the counter. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

With social nav

This is a copy block with the counter. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sticky Content Block

003

Crafting collections correctly

Little known fact, Chubbies actually offers a few different inseam options. With a simple collection layout, we've made it easier to shop styles and discover looks.

Form Fields

Error message

Buttons API

  • `disabled [bool]` - adds disabled styles to the button
  • `secondary [bool]` - adds secondary button styles
  • `url [string]` - pass internal `/blog` or external `https://google.com` URLs.
  • `button [bool]` - renders component as a `button` element

Primary Buttons:

1. Primary button - internal link (uses `Link` component under the hood):
Button Primary
2. Primary button - disabled state
Button Disabled
3. Primary button - external link (regular `a` tag):
Button External
4. Primary button - button element:

Secondary Buttons:

1. Secondary button - internal link (uses `Link` component under the hood):
Button Secondary
2. Secondary button - disabled state
Button Secondary Disabled
3. Secondary button - external link (regular `a` tag):
Button Secondary
4. Secondary button - button element:

Arrow CTAs:

1. Scroll (Horizontal Layout)

Arrow CTAs:

1. Back (doesn't actually use browser history)
All Projects

Social

Circle Button

Newsletter
Subscribe

PartnerWith Us

Let's forge the future of commerce

ReadyTO Roll?

Let's grow your brand.

Client Icons

Featured Clients

Chubbies_black
DraperJames_black
nobull_logo
Kylie_black
RebeccaMinkoff_black
MVMT_black
Native_black
Redbull_black
Thrive_black
UNTUCKit_black
UpWest_black
WD-40_black

Featured Clients - 3X3 Grid

Redbull_black
DraperJames_black
nobull_logo
Kylie_black
Chubbies_black
MVMT_black
UNTUCKit_black
Native_black
RebeccaMinkoff_black
Thrive_black
WD-40_black
UpWest_black

Services Grid

Perks Grid

001

Competitive Salary

We hire the best of the best, and know that great talent comes with a price tag. We also conduct performance reviews twice a year, at which time all employees are evaluated for a promotion or raise.

002

Health, Vision, Dental, & Life Insurance

We offer a comprehensive benefits package so that our employees’ teeth, eyes, and overall well-being can be in tip-top shape. And hey, we want to help keep their families safe and healthy too.

003

Flexible Savings Account (FSA)

We normally don’t like to ~flex~ too much, but we do offer an FSA to our employees. We want to ensure they can set aside pre-tax money to pay for eligible healthcare and dependent care expenses.

004

401k Retirement Plan

To be honest, we worry about our employees’ expensive avocado toast eating habits. We like to give them an easy way to plan for the future as early as possible (without letting their toast get the best of them), and what better way to do it than tax-free?

005

Paid Parental Leave

We support families of all types and sizes, and want our new mothers and fathers to have the financial support they need. Plus, we occasionally need their cute baby photos to get us through Monday mornings.

006

Flexible PTO

We often hear that working at BVA is better than a vacation. But alas, we want to ensure that when our teams’ families force them onto that Mediterranean cruise, they’re able to do it. BVA’s Flexible PTO policy allows team members to take time off as needed.

008

Learning & Development

We honor and recognize the inner nerd in each of our employees. With a whole team dedicated to learning and development, we offer regular in-office training and workshops, career development coaching, and Udemy licenses to all employees.

009

Team Activities & Unlimited Snacks

The real reason our employees stick around? It’s the snacks… not kidding. Our offices are fully stocked with food (and caffeine) so that our team never goes hangry. And, our social calendar is always full of happy hours and other events.

010

Pet Insurance

In case you didn’t notice, we are pawsitively pet-obsessed. We recognize your fur children as dependants too, and want to make sure they are protected.

Project Cards

Props:
  • title: String
  • body: String
  • imgName: String (name of file in images folder)
  • altText: String (alt text for img)
  • projectNum: String (text shows up in top left corner of card)
  • link: String (link to project)
  • size: Number (column size. Default is 12. Valid input is 1-12.)
  • small: Boolean (set to true for short card height)
  • fullWidth: Boolean (removes left and right padding for a 100% width card)

Masonry Grid

We Are...

Slide 2 of 5
  • Passionate

  • Revolutionary

  • Down To Earth

  • Dependable

  • Smart as Hell

Job Board

Current Openings

So you're sold on our culture, and ready to join our team? Onward! We can't wait to meet you.

Arrow Nav

Props:
  • vertical: Boolean
  • onNext: Function
  • onPrev: Function

Testimonials

References

Work Slider

14

Contact Form

LET’S START
YOUR PROJECT

Personal information
Your project
/ Check all that apply
All versions of Magento 1 will reach end of life in June 2020. In response, we’ve launched a new “accelerator” to quickly and cost effectively migrate Magento 1.x merchants to Shopify Plus in only three months.
Whether it’s a net new commerce presence or a migration from another platform, let’s build a beautiful, high-converting website on Shopify Plus that drives revenue and accelerates your brand.
Interested in an iterative approach to measurably optimizing your commerce presence? Let’s develop and execute a month-over-month strategy and workstream that supports your business while also prioritizing efforts to maximize ROI.
So you’re launching a new brand, eh? From financial modeling and competitive research to concept building, brand identity construction, package design, and more, we’ll help you turn your idea into a new brand that’s poised for growth.
From product photography and brand creative to personalized shopping experiences and immersive user experience design, let’s give your brand and/or website a creative refresh that will guide your customers down an accelerated path to purchase.
We know how to find your customers in the right place and at the right time. Let’s acquire and retain those with the highest lifetime value through SEO, email, paid search, display, paid social, influencer, and affiliate marketing.
Looking to drive more sales through Amazon or another marketplace? We help brands determine if, when, and how to get the most out of Amazon as well as other marketplace platforms. Let’s optimize your approach and strategy to maximize long-term profit.
Estimated Annual Budget
BVA requires the personal information requested above in order to contact you regarding our products and services, and also with additional news and/or content offers. You may unsubscribe from these communications at any time. For information on how to unsubscribe, as well as our privacy practices and commitment to protecting your privacy, please review our privacy policy.