Loading
Have you used the styleguide today?

The styleguide is a resource for designers, product managers, and developers, providing a common language around Doctorc's UI patterns. We use it to maintain modular front-end code and visual consistency across the web app.

inspired from yelp style guide

Foundation
General typography

Doctorc's typography pattern is called dType. Its foundation lies in traditional typographical measures. dType utilizes a bootstrap 3.x base cols system.

Learn about bootstrap Bootstrap Getting Started.

HEADERS

Header Level 1 36px

Header Level 2 30px

Header Level 3 24px

Header Level 4 20px

Header Level 5 18px
Header Level 6 16px
Color Palette
Doctorc's primary palette contains blue, green and warm greys. When designing for Doctorc, you are not limited to these colors, but they should be prominent in any consumer facing design.
Pantone
Coated 279 C
Blue #0093d5
Pantone
Pastels Neons Coated 915 C
Aqua #27b0ed
Pantone
Coated 7481 C
Green #06b45c
Pantone
Coated Cool Gray 8 C
Gray #828282
Colors
Backgrounds
Pantone Coated Cool Gray 8 C
.bg_color_dark_gray #828282
Pantone Coated 7481 C
.bg_color_green #06b45c
Pantone Coated 279 C
.bg_color_blue #0093d5
Pantone Pastels Neons Coated 915 C
.bg_color_aqua #27b0ed
Pantone Solid Coated 663 C
.bg_color_white #ffffff
Pantone Solid Coated 663 C
.medium_background_color #f5f5f5
Pantone Solid Coated 663 C
.background_color #f9f9f9
Borders
.left_border
.right_border
.top_border
.bottom_border
Text Colors
.normal_text
.mid_text
.subtle_text
.color_blue
.color_aqua
.color_green
.color_white
.color_gray
Text Sizes
.text_xxx_small 10px
.text_xx_small 12px
.text_x_small 14px
.text_small 18px
.text_medium 24px
.text_large 30px
.text_x_large 36px
.text_xx_large 44px
Font Styles
.font_regular
.font_medium
.font_bold
Buttons
Large Normal Small
Default
Primary
Info
Green
Red
Check Boxes

Learn how to implement iCheck its a 3rd party library .

.icheckbox_flat-blue
.icheckbox_flat-blue .checked
.icheckbox_flat-blue .disabled
.icheckbox_flat-blue .checked .disabled
Auto Complete

Learn how to implement Jquery Autocomplete

.ui-autocomplete-loading
Indicator

source attribution

Connecting...
Classes Used:
.loading_indicator
.bounce1
.bounce2
.bounce3
Implemetation:
                                
    <div class="loading_indicator">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
                                
                            
Switch
                                
    <div class="btn-group btn-group-sm">
        <button class="btn btn_info no_box_shadow switch">Button 1</div>
        <button class="btn btn-default no_box_shadow switch">Button 2</div>
    </div>

    jquery

    $(".switch").click(function(){
        if($(this).attr('id') === "btn_1") {
            sort_by_btn_selected("#btn_1", "#btn_2");
        }
        else {
            sort_by_btn_selected("#btn_2", "#btn_1");
        }
    });

    function sort_by_btn_selected(selector_selected, selector_unselected) {
        $(selector_selected).addClass("btn_info").removeClass("btn-default");
        $(selector_unselected).addClass("btn-default").removeClass("btn_info");
    }
                                
                            
Form Validation

Learn how to implement Jquery Form validation

Sliding Pane
This is the sliding pane demo

                                
    <div id="sliding_pane">
        <div id="sliding_pane_header">
            <div class="box box-primary">
            <div class="box-header">
                <div class="pull-right box-tools">
                    <button class="btn btn-danger btn-sm close_slide"><i class="fa fa-times"></i></button>
                </div>
                <i class="fa fa-cloud"></i>
                <h3 class="box-title sliding_pane_title"></h3>
            </div>
            </div>
        </div>
        <div id="slider_content"></div>
    </div>
                                
                            
Usage:
                            
    Via Jquery
    Show pane : sliding_pane_show();

    Hide pane : sliding_pane_hide();

    Pane content : sliding_pane_content(options);

    Basic Implementation:
        $(selector).click(function(){
            var options = {
                "title": "Sliding Demo",
                "body": "This is the sliding pane demo"
            };
            sliding_pane_content(options);
            sliding_pane_show();
        });
                            
                        
Stars
3.3
                            
    Implementation
        Script:
            <script src="/static/js/style.js"></script>
            $(document).ready(function() {
                bind_stars();
            });

        Html:
            <span class="stars">4.5</span>
                            
                        
Wizard

Learn how to implement Twitter Bootstrap Wizard Plugin its a 3rd party library .

HTML

<div id="rootwizard">
    <ul>
        <li><a href="#tab1" data-toggle="tab">First</a></li>
        <li><a href="#tab2" data-toggle="tab">Second</a></li>
        <li><a href="#tab3" data-toggle="tab">Third</a></li>
        <li><a href="#tab4" data-toggle="tab">Forth</a></li>
        <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
        <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
        <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1">
          1
        </div>
        <div class="tab-pane" id="tab2">
          2
        </div>
        <div class="tab-pane" id="tab3">
            3
        </div>
        <div class="tab-pane" id="tab4">
            4
        </div>
        <div class="tab-pane" id="tab5">
            5
        </div>
        <div class="tab-pane" id="tab6">
            6
        </div>
        <div class="tab-pane" id="tab7">
            7
        </div>
        <ul class="pager wizard">
            <li class="previous first" style="display:none;"><a href="#">First</a></li>
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next last" style="display:none;"><a href="#">Last</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>
    </div>
</div>

JS

$(document).ready(function() {
    $('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
});
Helper Classes
.no_padding .no_padding_left
.no_padding_right .no_padding_bottom
.no_padding_top .no_margin
.no_margin_top .no_margin_left
.no_margin_right .no_margin_bottom
.small_margin_bottom (5px) .small_margin_right (5px)
.small_margin_top (5px) .small_margin_left (5px)
.medium_margin_left (10px) .float_right
.banner .call_us
.wrapper .translucent_text
.spacer .banner_content
.also_known_as .banner_footer
.banner_footer_content .banner_partner_centers
.banner_footer_partner_centers .num_partner_centers
.strike_over .left_pane
.right_pane .home_banner
.blue_banner
Media Queries (max width 768px)
Text Sizes
.text_xxx_small 9.666px
.text_xx_small 10px
.text_x_small 11.33px
.text_small 14px
.text_medium 16px
.text_large 22px
.text_x_large 26px
.text_xx_large 31.33px