Overbranding

We have specifically built the BidJS Client so that it's as easy to over-brand as possible, with a very minimal and un-opinionated default style.

The method you use to brand the BidJS Client will differ depending on whether the parent website which you're embedding this on is using Bootstrap (v3) for its styling.



Using Bootstrap

If your website is fully leveraging Bootstrap to handle its style, you should find that for the most part, the BidJS Client picks up on these styles automatically, as long as you have set up your site with the Minimal JS and CSS.

If you are setting this up on a new site, we recommend using Bootstrap as the easiest way to implement the BidJS Client.
If you are compiling your Bootstrap using LESS or SASS, you should be able to do the majority of your branding by either adjusting or overriding the variables declared in Bootstrap's variables file (LESSSASS).
If you are not compiling your styles from the Bootstrap source, then you can simply provide your own styles to override Bootstrap's defaults. The methods for doing so are the same as those described in the Not Using Bootstrap section

An example for this may be the following snippet, which would adjust all Bootstrap Panels throughout the site and BidJS app to have thicker, square grey borders and orange text.


As compiled variables changes (SASS):

// variables.scss$text-orange: #ff9940 !default; $panel-border-radius: 0px !default;$panel-default-text: $text-orange !default; // panels.scss.panel {    border-width: 1em;}


Preview before:

Preview after:



Not Using Bootstrap

If your website is not using Bootstrap for its styling, please ensure you have set up the BidJS Client with the Standard JS and CSS.

Whilst the BidJS Client will still use Bootstrap for its own styles, you can simply provide your own styles to override Bootstrap's defaults.

An example for this may be the following snippet, which would adjust all Bootstrap Panels throughout the site and BidJS app to have thicker, square grey borders and orange text.

As custom overrides:

.panel.panel-default {    border-radius: 0;    border-width: 1em;    color: #ff9940;}


Preview before:

Preview after:


Non-Bootstrap Styling

There are certain components in the JS Client not covered solely by Bootstrap's styling.
These styles are the additional styles pulled in as the CSS in both the Standard and Minimal packages.

Any custom styling of particular note will be mentioned within this section



Flexbox

To allow for entirely fluid and responsive design on all types of device, Flexbox has been used in some cases.(14)

This is worth noting due to it not adhering to the standard Bootstrap Columns.

For further information about Flexbox, please see this guide: CSS-Tricks Complete Guide to Flexbox

(14) Used on:

  • Auction List (List and Grid View)
  • Lot List (List and Grid View)
  • Lot Details (the lot summary panel)


Third Party Plugins

We make use of several third party plugins, some of which provide their own styles.

These third party styles aren't always extending Bootstrap, and so may require further custom styling should they need changing to match your branding


Gritter

Gritter is a notification system used for displaying alerts and messages to users.(15)

Gritter by default uses the same alert-level system as Bootstrap Alerts, following the colour-scheme of Green / Yellow / Red for Success, Warning and Error messages respectively.

Although it's possible to change these to match your branding, we recommend against changing this where possible, due to this traffic-light colour-scheme being familiar for users across many sites as a standard.


(15) Used globally throughout the BidJS Client


PrettyPhoto

PrettyPhoto is a media lightbox used on the BidJS Client.(16)(17)


(16) Used on timed auctions


(17) Note that PrettyPhoto is considered legacy, and may be removed in a future update, to be replaced with the successor, Ekko Lightbox


Ekko Lightbox

Ekko Lightbox is a media lightbox based on Bootstrap Modals.(18)

As this is built around Bootstrap Modals, in most cases the styles for this will not need to be changed if you have over-branded the standard Bootstrap Modals to match your styles.


(18) Used on webcast auctions


Lightslider

Lightslider is an image carousel plugin.(19)


(19) Used on webcast auctions In-Play section