Bentley Styleguide

Button Sizes

Medium Button

Large Button

For maximum legibility text should remain on a single line
Side padding on all buttons 16px
minimum width 220px
Suggested 30 character length maximum.

HTML:

<p>Medium Button</p>
<button type="button" class="button">Add to basket</button>

<p>Large Button</p>
<button type="button" class="button button--large">Add to basket</button>

Primary Buttons

Font Size 16px
Bentley semi-bold all caps
Static, active & disabled - use for key journey actions

HTML:

<button type="button" class="button">Add to basket</button>
<button type="button" class="button" disabled>Add to basket</button>

Secondary Buttons

Font Size 16px
Bentley semi-bold all caps
Static, disabled - use for secondary links

HTML:

<button type="button" class="button button--secondary">Add to basket</button>
<button type="button" class="button button--secondary" disabled>Add to basket</button>

Secondary Alt Buttons

Font Size 16px
Bentley semi-bold all caps
Static, disabled - use for banner images

<button type="button" class="button button--transparent-black">Add to basket</button>
<button type="button" class="button button--transparent-black" disabled>Add to basket</button>

Grid

We use flex to style our grid due to browser support. Like Bootstrap, we use responsive class names to style the layout. Example; we want to have a grid section that is 3x3 on desktop 2-1-2-1-2-1 on tablet and 1-1-1-1-1-1 on mobile.

Implementation

To do this, the code would have to look like the following:

<div class="my-component grid">
  <div class="grid-item grid-item--xs-12 grid-item--md-6 grid-item--lg-4"></div>
  <div class="grid-item grid-item--xs-12 grid-item--md-6 grid-item--lg-4"></div>
  <div class="grid-item grid-item--xs-12 grid-item--lg-4"></div>
  <div class="grid-item grid-item--xs-12 grid-item--md-6 grid-item--lg-4"></div>
  <div class="grid-item grid-item--xs-12 grid-item--md-6 grid-item--lg-4"></div>
  <div class="grid-item grid-item--xs-12 grid-item--lg-4"></div>
  <div class="grid-item grid-item--xs-12 grid-item--md-6 grid-item--lg-4"></div>
  <div class="grid-item grid-item--xs-12 grid-item--md-6 grid-item--lg-4"></div>
  <div class="grid-item grid-item--xs-12 grid-item--lg-4"></div>
</div>

What is nice about this approach is that it removes the need to keep adding layout styles to new components. It is all consisitent and the gutters are all the same per component.

Breakpoints

Uploading images

All imagery should be of high quality, visually engaging and promote the luxury of the Bentley brand. Each component will have their own image size which will be further down the page.

Shopify CDN

Alot of images that come from shopify CDN will have a aspect_ratio property on the object. If the aspect ratio of the image needs to change for different breakpoints you can still get access to the width & height property. More information on the image object from shopify. Implementing an aspect ratio from the server is really easy. What you have to do in the liquid file is:

// snippets/picture.liquid
<style>
  // with width & height
  .my-component__picture {
    padding-top: calc(/* image.width / image.height */ * 100%); // syntax is  not /**/
  }


  // using the aspect ratio method
  .my-component__picture {
    padding-top: /* image.aspect_ratio */; // syntax is  not /**/
  }
</style>
<picture class="my-component__picture"></picture>

Creating a CDN string

Creating an image string in the liquid template is very simple. First you reference the image object and then pass in parameters for what you want the imafe to be. Example:

// snippets/picture.liquid
/* article.image | img_url: '1900x550', crop: 'center', format: 'pjpg' */ // syntax is meant to be 

Parameters