Layout

Grid

Small View Columns

Widths for viewports between < 600px.

Examples

c-xs-half-1

c-xs-half-1

c-xs-full

Notes

None at this time.

Resources

Sass File(s) /sass/core/_gridsystem.scss
JS File(s) None Required
JS Functions None
Locale Keys None

Accessibility

None at this time.

Medium View Columns

Widths for viewports between 600 & 800px.

Examples

c-sm-quarter-1

c-sm-quarter-1

c-sm-quarter-1

c-sm-quarter-1

c-sm-quarter-2

c-sm-quarter-2

c-sm-quarter-3

c-sm-quarter-1

c-sm-quarter-4

c-sm-third-1

c-sm-third-1

c-sm-third-1

c-sm-third-2

c-sm-third-1

c-sm-third-3

Notes

None at this time.

Resources

Sass File(s)/sass/core/_gridsystem.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Large View Columns

Widths for viewports >= 800px.

Examples

c-md-13

c-md-12

c-md-1

c-md-11

c-md-2

c-md-10

c-md-3

c-md-9

c-md-4

c-md-8

c-md-5

c-md-7

c-md-6

c-md-6

c-md-7

c-md-5

c-md-8

c-md-4

c-md-9

c-md-3

c-md-10

c-md-2

c-md-11

c-md-1

c-md-12

c-md-quarter-1

c-md-quarter-1

c-md-quarter-1

c-md-quarter-1

c-md-quarter-2

c-md-quarter-2

c-md-quarter-1

c-md-quarter-3

c-md-quarter-4

c-md-third-1

c-md-third-1

c-md-third-1

c-md-third-1

c-md-third-2

Notes

Any combination of columns can be used, but cannot exceed a total of 13.

Resources

Sass File(s)/sass/core/_gridsystem.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Flexbox

Using Flexbox

Arrange items on your page without using floats.

Examples

displayFlex

  
  
  
  
  
  

displayFlex flexNoWrap

  
  
  
  
  
  

displayFlex flexRow

  
  
  
  
  
  

displayFlex flexSameHeight

  
  
  
  
  
  
  

displayFlex flexSpaceBetween

  
  

displayFlex flexSpaceAround

  
  

displayFlex flexJustifyEnd

  
  

displayFlex flexJustifyCenter

  
  

displayFlex flexAlignItemsFlexStart

  
  
  
  

displayFlex flexAlignItemsCenter

  
  
  
  

displayFlex flexAlignItemsFlexEnd

  
  
  
  

displayFlex on parent and flexAlignSelfCenter on child

  
  
  
  

displayFlex on parent and flexAlignSelfFlexEnd on child

  
  
  
  
Notes

None at this time.

Resources

Sass File(s)/sass/core/_gridsystem.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Layout Classes

Display CSS

Classes that allow different displays of elements.

Examples

hide
display: none;

show
display: block;

inline
display: inline;

invisible
visibility: hidden;

visible
visibility: visible;

Notes

None at this time.

Resources

Sass File(s)/sass/core/_utility.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Main Site Layout CSS

Common classes used on layouts.

Examples

layoutCenter1500
margin: 0 auto; width: 98%; max-width: $full-width-pixels-1500;

layoutCenter
margin: 0 auto;

fullWidth
width: 100%;

basicLayout
min-height: 25rem;

Notes

None at this time.

Resources

Sass File(s)/sass/core/_mainmaster2023.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Main Site Layout Pages

_AccountLayout2

Pages that use this layout file in Visual Studio (updated 3/7/2023).

Examples

account > myaccountMy Account Summary

account > myblueboxMy Account Bluebox

account > mysubscriptionsMy Account Subscriptions

account > editemail

artlibrary > indexMy Account Art Library

esp > updatefailure

orderhistory > orderhistory2My Account Order History

orderhistory > ordersfullpageMy Account Order History

registration > changepasswordRegistration Change Password

sms > verifySMS Verify

Code
					
<main class="clear layoutCenter1500 displayFlex"></main>
Notes

Bundles used:

  1. chat
  2. coremain2023
  3. account2023

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

_ArticleWithMetricsLayout

Pages that use this layout file in Visual Studio (updated 2/8/2024).

Examples

article > article Amplify Article Bluepaper eBook Landing eBook Section eNews Article

ebook > ebooksectionviewEbook 17 Section (admin built page)

ebook > ebookviewEbook 17 Landing (admin built page)

article > amplifyarticlesAmplify Articles

article > populararticlesPopular Articles

Code
					
<main></main>
Notes

Bundles used:

  1. chat
  2. coremain2023

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

_BareAsyncLayout

Pages that use this layout file in Visual Studio (updated 3/7/2023).

Examples

email > index
Code
					
<main></main>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

_BareLayout

Pages that use this layout file in Visual Studio (updated 3/7/2023).

Examples

chat > chatpopout
sop > confirmationprintPrintable Confirmation
Code
					
<main></main>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

_BasicLayout

Pages that use this layout file in Visual Studio (updated 3/7/2023).

Examples

approveartwork > approveartwork
common > (a bunch of files here)
esp > publicesp
images > lookupProduct Image Lookup
invoice > payinvoicePay Invoice
invoice > paymentinfo
invoice > selectinvoice
payment > collectpayment
payment > collectpaymentnotrequired
singleship > singleshipaddressupload
swaggingrights > confirmationSwagging Rights Confirmation
swaggingrights > uploadSwagging Rights Upload (siteimprove account)
tracking > index
unsubscribe > indexUnsubscribe from Catalogs/Mailings
upload > uploadartorder
Code
					
<main class="clear basicLayout layoutCenter"></main>
Notes

Bundles used:

  1. basiclayout2017

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

_BasicWithMetricsLayout

Pages that use this layout file in Visual Studio (updated 2/8/2024).

Examples

esp > subscriptionmanager
product > sampledetailsPLA Sample Details
upload > orderselectart
upload > orderuploadartsummary
Code
					
<main class="clear basicLayout layoutCenter1500"></main>
Notes

Bundles used:

  1. basiclayout2017

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

_Layout

Pages that use this layout file in Visual Studio (updated 3/7/2023).

Examples

errors > generalGeneral Error
errors > http404404 Error
errors > http500500 Error
info > aboutusAbout Us
info > artdeptArt Department
info > arttipsArt Tips
info > betterchoicesBetter Choices®
info > boxtopsBox Tops
info > bpwAwards
info > contactformContact Form
info > faqFAQs
info > indexInfo
info > merchandisingmagicMerchandising Magic (links from homepage banner)
info > noworriesNo Worries (links from homepage banner)
info > powerbankbuyingguidePowerbank Buying Guide (links from power bank product info on details)
info > privacyPrivacy Policy
info > reviewsAbout Reviews
info > samplesAbout Samples (links from homepage banner)
info > yourartteamYour Art Team (links from homepage banner)
partnership > partnershipPartnership List Page
reviews > mostreviewedMost Reviewed
reviews > newestreviewsNewest Reviews
reviews > newproductreviewsNew Product Reviews
reviews > productreviewerReviews by Individual Reviewer
reviews > productreviewsReviews
reviews > topratedbycategoryTop Rated by Category
reviews > topreviewersTop Reviewers
samples > catalogrequestCatalog Request
samples > samplerequestSample Request (links from favorites boards)
search > advsearchAdvanced Search
taggroup > allboutiquestoresAll Boutique Stores
taggroup > allproductcategoriesAll Product Categories
Code
					
<main class="layoutCenter1500"></main>
Notes

Bundles used:

  1. chat
  2. coremain2023

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

_OrderConfirmationLayout

Pages that use this layout file in Visual Studio (updated 3/7/2023).

Examples

upload > orderconfirmation
Code
					
<div class="mainContent clear layoutCenter fullWidth"></div>
Notes

Bundles used:

  1. chat
  2. coremain2023
  3. account2023

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

_RegisterLayout

Pages that use this layout file in Visual Studio (updated 3/7/2023).

Examples

accomodation > index
registration > forceupdate
registration > forgotpasswordRegistration Forgot Password
registration > getrecaptchaemailaddress
registration > loginRegistration Log In
registration > reauth
registration > registerRegister
registration > resetpassword
registration > sendrecaptchaemail
registration > verifyuser
sms > verifyforgotpassword
Code
					
<main class="clear layoutCenter1500"></main>
Notes

Bundles used:

  1. chat
  2. coremain2023
  3. account2023

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

_StaticHeaderFooterLayout

Pages that use this layout file in Visual Studio (updated 12/20/2023).

Examples

article > amplifyarticlesAll Amplify Articles
bluebox > crosslandbox
bluebox > indexBluebox
blueboxflyer > indexBluebox Flyer
cart > emptycartEmpty Cart (remove all products to view)
cart > viewcartEmpty Cart (Add at least 1 product to view)
checkout > checkoutCheckout
favorites > indexFavorites Boards
favorites > viewboardIndividual Favorites Board (siteimprove account)
home > indexbb4imprint.com Homepage
info > blueboxwelcomeBluebox Welcome
info > blueboxfaqBluebox FAQ
info > confirmationRegistration Confirmation
info > contactusContact Us
info > covidbusinessproductsCovid Business Products
info > whybuyfromusWhy Buy from Us
list > listProduct List
list > noresultsProduct List, No Results
preview > indexProduct Preview
product > detailsProduct Details
singleship > quoteSpecial Services Quote
survey > index2 Second Survey
survey > reviews
survey > successstory
swaggingrights > detailsSwagging Rights Details
swaggingrights > indexSwagging Rights
taggroup > mallMall
taggroup > taggroupTag group
thirdparty > punchout
thirdparty > thirdpartyhomePunchout Homepage
video > indexVideo Gallery - Informational
Video Gallery - Product Highlights
Code
					
<main class="clear fullWidth layoutCenter"></main>
Notes

Bundles used:

  1. chat
  2. coremain2023

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

_StaticHeaderFooterLayoutA

Pages that use this layout file in Visual Studio (updated 3/7/2023).

Examples

home > indexbb4imprint.com Homepage
taggroup > mallMall
taggroup > taggroupTag group
Code
					
<main class="clear fullWidth layoutCenter"></main>
Notes

Bundles used:

  1. chat
  2. coremain2023

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

To Top