CSS built using SASS, Scut and Bootstrap. Do not make any direct modifications to the CSS directly. Update the SASS files then recompile them.
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;
}
There should only be one h1 tag per page. Add class .heading to the main heading item.
<h1 class="heading">
Style Guide
</h1>
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
<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."
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>
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>
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>
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>
All links should use the red colour as the hover effect.
See the Bootstrap documentation for form control information.
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>
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.
<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();
}
<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>
<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>
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 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;
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.
We have some cool hover effects for team members.
<?php echo develo_get_team_user_html( $user, 'additional-class', $image_size ); ?>
We want to hear about your project! Provide us with a few details and we’ll get back to you for a chat.