Code Docs & Advanced Customization

If you’re a developer or someone wishing to make advanced customizations to your content, this page is for you.

Topics:

CSS Helpers

Often times, you’ll want to “nudge” an element without creating an entirely new class. The included helper classes below will aid you in creating balanced content. Below are the available classes:

// text alignment
.text-center
.text-center
.text-right
.text-left
.text-justify

// mobile-specific
.m-center
.m-hide

// element floats
.aligncenter
.alignright
.alignleft

// text colors
.brand // primary color from theme options
.brand-alt // secondary color from theme options
.text_white
.text_black
.text-gray 
.text-dark 

// margin offsets


.mv0 // remove top and bottom margin (v = vertical)
.mh0 // remove left and right  margin (h = horizontal)

.mt0 // remove top margin
.mb0 // remove bottom margin

// 10 - 90 [property]+[axis]+[value]
.mt10  // margin-top 10px
.mb20  // margin-bottom 20px
// .mb30,.mb40,.mb50...etc

// padding offsets

.pv0 // remove top and bottom padding (v = vertical)
.ph0 // remove left and right  padding (h = horizontal)

.pt0 // remove top padding
.pb0 // remove bottom padding

// 10 - 90 [property]+[axis]+[value]
.pt10 // padding-top 10px
.pb20 // padding-bottom 20px
// .pb30,.pb40,.pb50...etc

.remove_top // remove all top padding and margins
.remove_bottom // remove all bottom padding and margins


// insets
.squeeze // 10% padding left + right
.squeeze-more // 20% padding left + right

SASS & CSS Customization

By default, the child theme automatically imports the parent theme’s stylesheet. In most cases, we recommend leaving this in place and adding your “overrides” after the initial import. This reduces the chance of missing out on any CSS updates.

At any rate, clients are clients and we have to get deep into the code at times. In this case, you have two options; A.) Copy the contents of the parent theme style.css into your child theme style.css. B.) If you’re familiar with SASS, the full source code is included. The latter option requires your site to be running locally. To use the SASS source, simply extract the sass-src.zip into your theme directory, run npm install and fire up the grunt script.

We’ll put out a video tutorial on this later if there’s enough interest. Let us know on Twitter!

Layout Hooks

If you need to add or modify the markup, there are plenty hooks that allow for this. In some cases, you may want to override a function entirely, while in other cases you may wish to make a slight change. See the child theme functions.php for example use.

/**
 * Markup Action Hooks
 * @see  layout.php

    smpl_header()
    smpl_logo_override()
    smpl_before_loop()
    smpl_before_entry()
    smpl_after_entry()
    smpl_after_loop()
    smpl_footer()

*/