LeadGenius Style Guide v1.2.0

A theme based on LeadGenius design specifications. Backward compatible with Bootstrap 3
This theme utilizes the BEM Standard of naming CSS classes and Github Standard of formatting.

  View the GitHub project Read about BEM

Installation

Step by step guide
  1. Include this repository in bower.json in your project as a dependency

    
              "dependencies": {
                "leadgenius-frontend": "git@github.com:MobileWorks/leadgenius-frontend#master"
              }
            
  2. Install bower dependencies via terminal: bower install

  3. Include style guide CSS in your project

  4. Include JavaScript files using require.js and/or CSS and fonts of third party libraries at your choice

    
              require.config({
                paths: {
                  'angular': 'bower_components/angular/angular'
                }
              });
            

    List of available third party libraries:

  5. If your app has authentication using LeadGenius credentials, include:

Typography

The Style Guide utilizes Bootstrap style for headings and paragraphs.

Examples

36pxHeading style h1

30pxHeading style h2

24pxHeading style h3

18pxHeading style h4

14pxHeading style h5
12pxHeading style h6

15pxParagraph style p

Colors swatches

In addition to default Bootstrap's background color classes (such as .bg-danger) and text color classes (e.g. .text-success) there are a number of custom classes in LeadGenius Style Guide:

Examples
lg-bg-peach
#FF6666
lg-bg-light-blue
#BDD4DE
lg-bg-light
#F9F9F9
lg-bg-grey
#A7ADB3
lg-bg-dark
#3E454C
lg-bg-pink
#FF6699
lg-text-peach
#FF6666
lg-text-pink
#FF6699
lg-text-dark
#3E454C
lg-text-light-blue
#BDD4DE
lg-text-white
#FFFFFF
lg-text-grey
#A7ADB3

Icons

LeadGenius Style Guide includes Bootstrap Glyphicons and Font Awesome icon packs as well as its own icons:

lg-icon-checkmark lg-icon-column-filter lg-icon-column-selector lg-icon-company-icon lg-icon-criteria-tab-close lg-icon-hamburger-icon
lg-icon-helper-icon lg-icon-lead-feedback lg-icon-mail-genius lg-icon-modal-close lg-icon-my-account lg-icon-my-lists
lg-icon-new-list lg-icon-panel-open-close lg-icon-person-icon lg-icon-setting-cog lg-icon-alert lg-icon-check
lg-icon-stats
Examples

Logos

Examples
LeadGenius
LeadGenius
LeadGenius
LeadGenius

Buttons

Examples

Dropdowns

Examples

Left-aligned dropdown

Right-aligned dropdown

Left-aligned menu

Right-aligned menu

Forms

Examples
Option Option

LeadGenius Style Guide tooltip. Can be used with or without help icon.

Text inside the tooltip can be formatted using <p> tags.

Option Option

LeadGenius Style Guide tooltip. Can be used with or without help icon.

Text inside the tooltip can be formatted using <p> tags.

Custom .lg elements can be combined into input groups just like in Bootstrap.

Tags & Autocomplete

Examples

This demo uses ngTagsInput. Check out API documentation and demos.

Choose Programming Languages

ng-model value

{{tags|json}}
Installation
  1. Include ng-tags-input.min.js in your project

  2. Include CSS files in your project

  3. Add ngTagsInput as a dependency in your app

    
              angular.module('myApp', ['ngTagsInput']);
            
  4. In your template

  5. In your controller

    
              /**
               * ng-model
               */
              $scope.tags = [{
                text: 'Python'
              }];
    
              /**
               * Sample function that returns autocomplete items
               */
              $scope.loadTags = function(query){
                return $http.get('/tags?query=' + query);
              }
            

Calendars

Examples

The Calendar Widget uses the the angular-strap datepicker. For all options see the documentation on the widget. Make sure you use a different ng-model for each widget.

Modals

Examples

Modals are using the Angular Strap Modal. Please see the documentation for more options.

Alerts

Examples

Alerts show up at the top of the screen. They use angular-flash.