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 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.
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:
@extend %gridlines;
) the placeholder object..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.
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.
$bva-orange
$neon-blue
$dark-blue
$peachy
$pinkish
$warm-white
$warm-black
$dark-brown
$darkest-grey
$dark-grey
$grey
$light-grey
$error-red
Typestyle | Font-family | Weight | Size | Line |
---|---|---|---|---|
H1 | Gibson | 700 | 120px D 50px M | 120px D 50px M |
H2 | Gibson | 700 | 120px D 50px M | 120px D 50px M |
H3 | Gibson | 700 | 50px D 25px M | 60px D 30px M |
H4 | Gibson | 700 | 35px D 25px M | 42px D 32px M |
H5 | Gibson | 500 | 28px D 20px M | 35px D 28px M |
H6 | Gibson | 500 | 14px D 12px M | 23px D 23px M |
Accent Header | Gibson | 500 | 14px D 12px M | 17px D 17px M |
Tiny Header | Gibson | 600 | 14px D 12px M | 17px D 17px M |
Body - Standard | Gibson | 200 | 18px D 18px M | 28px D 28px M |
Body - Small | Gibson | 200 | 16px D 16px M | 19px D 19px M |
Body - Medium | Gibson | 300 | 24px D 18px M | 36px D 28px M |
Body - Large | Gibson | 200 | 40px D 24px M | 52px D 34px M |
Body - XL | Gibson | 200 | 50px D 30px M | 60px D 38px M |
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
002We optimize revenue for DTC brands through holistic commerce strategies. Our team of experts is passionate about enabling growth and scalability that goes beyond just the digital storefront to include brick and mortar, Amazon, post-click commerce, and more.
003We build beautiful, high-converting commerce websites for DTC brands. Whether it’s a net new digital commerce presence or a migration from another platform, we focus on immersive user experience supported by best-in-class technology.
004From financial modeling and competitive research, to concept building, brand identity construction, package design, and more, we incubate ideas into brands poised for accelerated growth and scalability.
We believe in using insights to drive strategy when producing effective content and layouts that guide a path to purchase. With this in mind, we design creative solutions that bring the product and brand story to life through experiential commerce.
006We fuel business growth for brands by acquiring customers with the highest lifetime value. Through data-driven strategy and technology-driven machine learning, we are experts in SEO, email, paid search, display, paid social, influencer, and affiliate marketing.
007Data and analytics serve as the foundation of all that we do. We utilize learnings from our vast DTC client base, industry expertise, and our long history in the eCommerce space to take smart risks and intelligently optimize revenue for our brands.
Marketplaces represent a key customer acquisition channel for most DTC brands. We help brands tell their story on channels like Amazon by optimizing brand messaging, running ad campaigns, and providing day-to-day strategy and account support.
009We understand omni-channel commerce and the benefits of a digitally native vertical brand (DNVB) expanding to brick-and-mortar. We help brands strategize pop-ups, implement point of sale (POS) systems and order management, and more.
010We are a 150+ person team obsessed with commerce, technology, and innovation. We passionately build craft solutions that include accelerated replatforms, omni-channel strategy, headless commerce, and more.
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.
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.
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.
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?
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.
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.
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.
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.
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.
001
Case Study Coming Soon
This full width card has left and right padding
001
Case Study Coming Soon
This is using the fullWidth prop to remove left and right padding.
002
Case Study Coming Soon
Contained in a Project Container component.
003
Case Study Coming Soon
Contained in a Project Container component.
004
Case Study Coming Soon
Contained in a Project Container component.
005
Case Study Coming Soon
Contained in a Project Container component.
006
Case Study Coming Soon
Contained in a Project Container component.
So you're sold on our culture, and ready to join our team? Onward! We can't wait to meet you.
Social