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

                                
    <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 .

First
Second
Third
Forth
Fifth
Sixth
Seventh

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