Advice and answers from the Lucid Team

In addition to the standard Bootstrap variables, we also provide a few extra custom variables for convenience. These are:

$container-xs-max

Set the maximum page width for the ‘xs’ (extra small) breakpoint.

Default: 360px

$container-sm-max

Set the maximum page width for the ‘sm’ (small) breakpoint.

Default: 610px

$container-md-max

Set the maximum page width for the ‘md’ (medium) breakpoint.

Default: 900px

$container-lg-max

Set the maximum page width for the ‘lg’ (large) breakpoint.

Default: $container-md-max

$page-padding

The base measure for page padding and various elements.

Default: 32px

$site-logo-max-height

Constrains the site logo (image) to the specified height.

Default: 180px

$product-img-padding

Padding around product image within container (frame images).

Default: 0

$product-img-bg

Background for product image container.

Default: #fff

$new-price-color

Colour used by default for sale prices.

Default: $brand-primary

Did this answer your question?