GUI

2014 QUOVADIS. All rights reserved.
Designed by AppVentus in Nantes, France.

Download Quo Vadis GUI


All this GUI is made as an Bootstrap add-on. Using here the version 3.1.1.


Get started

CSS

To enjoy the GUI, you just need to include the style.css stylesheet to your template. It already contains bootstrap 3.1.1 and the special Quo Vadis GUI style.

Less

You can also use the less stylesheet available in the /less folder. It not contains Bootstrap witch is essential and is available in the /vendor folder.

You can change the reference to the bootstrap and the image folder with the less variables @imagesPath @bootstrapPath witch are declared in the style.less file

Color swatches

  • Grey

    #c9c9c9, #999999

  • Anthracite

    #494949, #313131

  • Mint

    #029D9F, #008185

  • Orange

    #FFAB3F, #FF9000

  • Purple

    #E21A65, #B40A4A

Buttons


Classic

Normal Active Focus Disabled

Buttons are using the class .btn from bootstrap. This example is without any theming, as you will see next.


Default

Normal Active Focus Disabled

"Default" buttons are based on the class .btn-default from bootstrap


Primary

Normal Active Focus Disabled

"Primary" buttons are based on the class .btn-primary from bootstrap


Call to action

Normal Active Focus Disabled

"Call to action" buttons are based on the class .btn-success from bootstrap

Special

Normal Active Focus Disabled

"Special" buttons are based on the class .btn-danger from bootstrap


Icons in buttons

In case of icons like Glyphicons, Font Awesome or any images, You can use the class .btn-icon-before .btn-icon-after in order to enjoy some space between the text and the icons.

Buttons with btn-icon class

Buttons without btn-icon class


Sizes

You can use the class .btn-lg .btn-sm .btn-xs in order to enjoy button sizes.


Btn group

Wrap your buttons in a div.btn-group for button groups




Form element

Checkboxes

Radios

For custom checkboxes & radios, make sure that the input has for direct sibling its label then add .custom-checkbox .custom-radio class and we're done.

Switchers

Switchers works exactly the same than custom checkboxes & radio. Just add .switcher class. You can also use the .checkbox-to-switcher for having a checkbox on desktops and a switcher on tablets and phones.

Select

Select

Information with link
Information with link

Status input use the has-success, has-error, has-warning class on the .form-group element.

Breadcrumbs

Standard

Process

  1. 1. Contact
  2. 2. Recap
  3. 3. Payment
  1. 1. Contact
  2. 2. Recap
  3. 3. Payment
  1. 1. Contact
  2. 2. Recap
  3. 3. Payment
  4. Order done !

Carousel

Desktop

For using it, make sure the two carousel's are well connected as on the example with the different id and href.

Tabcordion

2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, optio.
4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, optio.

Payment process

  1. Enter the card number
  2. Enter your name
  3. Enter your expiracy date
  4. Enter the cryptogram code Most of the time on the back of your card

Your bank info are and will still confidential.*Fields witch has to be filled in.

Nav Bar

Alerts

Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur.

Responsive grid

thumbnails

Timer planing

Collection Capri
12 x 17 cm
12,00€ 10,00€
Détails