Develo Design

Develo Design Menu

Style Guide

Overview

CSS built using SASS, Scut and Bootstrap. Do not make any direct modifications to the CSS directly. Update the SASS files then recompile them.

Colours

All colours used are stored in styles/_variables.scss. Use them when creating new elements. Do not just add hex codes or RBG values. If a colour is not present then add it to the _variables.scss page with the other colours.


            .my-class
            {
                background: $orange;
            }

        
Blue
Grey
Green
Orange
Red
Light Grey

Type

Headings

There should only be one h1 tag per page. Add class .heading to the main heading item.

            
            <h1 class="heading">

                Style Guide

            </h1>
            
        

h2

h3

h4

h5
h6

Text

Make a paragraph stand out with class .lead


            <p class="lead">

                Make a paragraph stand out with class .lead

            </p>

        

Paragraph text is extended from Bootstrap

  1. Ordered list item
  2. Second list item

Blockquotes

            
            <blockquote>
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
            </blockquote>
            
        

"Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer posuere erat a ante."

Someone famous Source Title

Grid System

Bootstraps grid system is used through out the site. See their documentation for more information on how that is used.

Along with the Bootstrap grid we have a collapsible grid system. The following grid has 4 items per row, then collapses to 2 at the next media query.


            <div class="grid-4-to-2">


                <article class="grid-item" >

                    item 1

                </article>


                <article class="grid-item">

                    item 2

                </article>


                <article class="grid-item">

                    item 3

                </article>


                <article class="grid-item">

                    item 4

                </article>


            </div>

        
item 1
item 2
item 3
item 4

Create more collapsible grid classes in styles/_grid.scss. This crazy happy chappy is super responsive and has the attractive class name .grid-12-to-6-to-4-to-3-to-2-to-1:

            
            <div class="grid-12-to-6-to-4-to-3-to-2-to-1 grid-example">

                <article class="grid-item">

                    item 1

                </article>
                
                ...
                
            </div>
            
        
item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

Nesting Grids

Nest grids in grid items for more complex fluid layouts

            
            <div class="grid-4-to-2 grid-example grid-nested">

                <article class="grid-item">

                    <div class="grid-2">

                        <article class="grid-item">

                            item 1

                        </article>

                        <article class="grid-item">

                            item 2

                        </article>

                    </div>

                </article>

                <article class="grid-item">

                    item 3

                </article>

                <article class="grid-item">

                    <div class="grid-3">

                        <article class="grid-item">

                            item 4

                        </article>

                        <article class="grid-item">

                            item 5

                        </article>

                        <article class="grid-item">

                            item 6

                        </article>

                    </div>

                </article>

                <article class="grid-item">

                    item 7

                </article>

            </div>
            
        
item 1
item 2
item 3
item 4
item 5
item 6
item 7

Buttons

All buttons have the .button class. There are three main colour styles; .button-regular, .button-primary and .button-transparent.


            <button class="button button-regular">
                Regular
            </button>

            <button class="button button-primary">
                Primary
            </button>

            <button class="button button-transparent">
                Transparent Background
            </button>

        

Buttons have different sizes. The classes .button-large, .button-huge and .button-colossal(!!) will increase the button size. If you want to make them fluid then add the .button-fluid class to them.

            
            <div class="grid-4-to-2 buttons-example">

                <div class="grid-item">

                    <button class="button button-regular button-fluid">
                        Regular
                    </button>

                </div>

                <div class="grid-item">

                    <button class="button button-regular button-large button-fluid">
                        Large
                    </button>

                </div>

                <div class="grid-item">

                    <button class="button button-regular button-huge button-fluid">
                        Huge
                    </button>

                </div>

                <div class="grid-item">

                    <button class="button button-regular button-colossal button-fluid">
                        Colossal
                    </button>

                </div>

            </div>
            
        

Links

All links should use the red colour as the hover effect.

Form Elements

See the Bootstrap documentation for form control information.

Form Controls

Inputs

Text input with label

You can add placeholders using placeholder="", and you can also add icons over form elements so long as you add the over-input class, and add the icon as part of the form group.

            
            <form>

                <div class="form-group over-input">

                    <label class="sr-only" for="example-email">Email</label>

                    <input type="email" class="form-control" name="email" id="example-email" placeholder="Email" >

                    <i class="fa fa-user over-input-addon"></i>

                </div>

            </form>
            
        

Add error feedback by adding has-error or has-warning to the form group element and helper text with the class helper-block.

            
            <div class="form-group over-input has-error">

                <label class="sr-only" for="example-contact-phone">Phone</label>

                <input type="tel" class="form-control" name="contact-phone" id="example-contact-phone" placeholder="Phone" required>

                <i class="fa fa-phone over-input-addon"></i>

                <span class="help-block"> Please enter your contact telephone number.</span>

            </div>
            
        
Please enter your contact telephone number.

Checkboxes and Radios

To use our custom checkboxes and radios you need to include our pretty form control javascript plugin. Pretty form checkboxes and radios inherit the button styles.

Checkbox

            
            <label for="example-checkboxes">Checkboxes</label>

            <div class="pretty-forms">

                <div class="checkbox">

                    <label>

                        <input type="checkbox" value="Checkbox 1">

                        Checkbox 1

                    </label>

                </div>

            </div>
            
            jQuery( function( $ ){
            
                $( '.pretty-forms .checkbox' ).prettyFormControl();
            }
            
        

Radios

            
            <div class="pretty-forms radios row">

                <div class="col-sm-3">

                    <div class="radio">

                        <label>
                            <input type="radio" name="example-radio" value="1">
                        </label>

                        Radio 1

                    </div>

                </div>

                <div class="col-sm-3">

                    <div class="radio">

                        <label>
                            <input type="radio" name="example-radio" value="2">
                        </label>

                        Radio 2

                    </div>

                </div>

                <div class="col-sm-3">

                    <div class="radio">

                        <label>
                            <input type="radio" name="example-radio" value="3">
                        </label>

                        Radio 3

                    </div>

                </div>

                <div class="col-sm-3">

                    <div class="radio">

                        <label>
                            <input type="radio" name="example-radio" value="4">
                        </label>

                        Radio 4

                    </div>

                </div>

            </div>
            
        
Radio 1
Radio 2
Radio 3
Radio 4

Select boxes


            <div class="form-group">

                <label class="sr-only">Select Month</label>

                <select id="example-select" class="form-control">


                    <option value="01">January</option>


                    <option value="02">February</option>


                    <option value="03">March</option>


                    <option value="04">April</option>


                    <option value="05">May</option>


                    <option value="06">June</option>


                    <option value="07">July</option>


                    <option value="08">August</option>


                    <option value="09">September</option>


                    <option value="10">October</option>


                    <option value="11">November</option>


                    <option value="12">December</option>


                </select>

            </div>

        

Blog

Post Preview

Post preview items will display the post preview image only, and expand articles on click or hover. We have a custom function for generating this html.


            <?php echo develo_get_post_preview_html( get_post( $id ), 'additional-class' ); ?>

        

Post Extract

Post extracts will include the post meta, header and image, along with a the extract and a more button.


            // Select only one post
            $query = new WP_Query( 'p=73' );

            if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post();

                    get_template_part( 'templates/post', 'extract' );

                endwhile;

            endif;

        

Magento Custom Product Designer

Magento Custom Product Designer

Since we’ve had a large number of enquiries about the design tool we’ve made it into an installable Magento extension for your store. It’s completely native and requires no core hacks, you’re store will be 100% upgradeable and it will work with any other extensions. If you’d like to use the design tool on your next project or existing site please contact us.

More

Users

Meet the team

We have some cool hover effects for team members.


            <?php echo develo_get_team_user_html( $user, 'additional-class', $image_size ); ?>

        

Discuss My Project

We want to hear about your project! Provide us with a few details and we’ll get back to you for a chat.