Save Time with Sass Using ‘@extend’

With every new project I do my best to look for ways to save time with my code. This not only helps me avoid getting lost in redundant code, but also saves me time, and as we all know, time is money!

Coding CSS with Sass is already a huge time saver and one of its features goes a long way to eliminate the need to repeat any code. Here’s how to use ‘@extend’ to quick create different types of buttons.

See the Pen Sass @extend by Richard (@barkins) on CodePen.

Although using the ‘@extend’ feature is a fantastic way to save time, there are other ways to save time with Sass. Creating a Sass Mixin for example would be an excellent alternative.

Filed under: SassTagged with: ,

From Photoshop to WordPress Guide

Taking a Photoshop website mockup and converting it into a WordPress theme can be a daunting task, but in the following series I demonstrate how, with the help of some essential tools, it’s easier than you think.

This guide assumes you have basic knowledge of Photoshop, know how to work with MAMP and phpMyAdmin and have an active website hosting account.

In the guide, I work with Sublime Text 2 in conjunction with CodeKit on Mac OS X. I use Sass to code my CSS and give a brief overview of its usage. Along with each video, I provide the working files needed to follow along, you can find links below the video.

Working Files:

Part 1: Photoshop PSD of the Homepage

Part 2: Photoshop PSD of the sample page (listing)

Part 3: Static HTML/CSS Files

Part 4: Basic Theme, Only Includes Index.php Template

Part 5: Database Search and Replace PHP Tool

Part 6: Disqus Plugin & WordPress SEO by Yoast Plugin

Filed under: Front-end Web Development, WordPressTagged with: , , ,

Creating a jQuery Slideshow with WP_Query in a WordPress Theme

In the following video guide I go through the steps to installing WordPress on a local machine with MAMP and integrating multiple WordPress Loops into a theme.

The guide includes the following:

  • Installing WordPress using MAMP
  • Modifying the default loop with WP_Query
  • Installing the Flexslider jQuery slideshow
  • Integrating a Loop into the Flexslider jQuery slideshow

Download starter theme to follow along with the video:

Filed under: WordPressTagged with: , , , ,

CSS3 Animations for Beginners

CSS3 Animations can be great and very simple to implement onto any website. In this post, I will break down what is required to create a simple CSS3 Animation with a handful of live examples.

See the Pen Floating Phone by Richard (@barkins) on CodePen.

Simple Example

See the Pen CSS3 Animation by Richard (@barkins) on CodePen.

Step 1: Style the Element

Pick an HTML element on your page you want to animate and apply the following styles to it:

#box {
  font-family: sans-serif;  
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;

Step 2: Applying the Animation

Now the second part of the equation comes in. The part where you specific exactly what the animation does:

@keyframes boxy {
  0% {

Lets Break it Down

When selecting an element to animate via CSS, here’s a list of animation properties available to you.

Property Name Definition Examples
animation-delay Specifies when the animation should start after the page loads. 0s, 3s, 10s
animation-direction Defines whether an animation should be reversed or alternate. normal, reverse, alternate
animation-duration Indicate how long an animation should take to complete its cycle. 3s, 5s, 120ms
animation-interation-count Specify how many times an animation repeats. 1, 3, 5, infinite
animation-timing-function Configure how the animation transitions between each keyframe. ease, ease-in, ease-out, ease-in-out, linear
animation-name The same name paired with @keyframes bouncy-ball, animated-item

Bouncing Text


#animate {  
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite; 

@keyframes texty {
  0% {
   /* transform: rotate(90deg);*/
  100% {
   /* transform: rotate(0deg);*/

See the Pen CSS3 Animation: Text by Richard (@barkins) on CodePen.


One final element to consider within the @keyframes code is the transform property. It can be used to scale or rotate an element.

Here’s an examples of its usage:

@keyframes phone {
   0% {

I will leave you with one final thought. Although animations can be cool they can also be distracting, so just like so many things in HTML and CSS, just because you can do it, doesn’t mean you should.

Filed under: CSS3Tagged with: ,

WordPress Plugins I Can’t Live Without


If you worked with WordPress for any length of time, you have I’m sure come across some invaluable plugins you just can’t live without. Every plugin is like a good tool fit for a specific job. This list is a compilation of plugins I use with all my WordPress instillations. Which plugins can you now live without?

I plan to continue to maintain and update this list, keep checking back.


Simple automated backups of your WordPress powered website.

Ninja Forms

Forms created with a simple drag and drop interface. Contact forms, Email collection forms, or any other form you want on your WordPress site.

WordPress SEO by Yoast

Improve your WordPress SEO: Write better content and have a fully optimized WordPress site using Yoast’s WordPress SEO plugin.

Disqus Comment System

The Disqus comment system replaces your WordPress comment system with your comments hosted and powered by Disqus.

Intuitive Custom Post Order

Intuitively, Order Items (Posts, Pages, and Custom Post Types) using a Drag and Drop Sortable JavaScript.


Duplicate, clone, backup, move and transfer an entire site from one location to another.

Advanced Custom Fields

Advanced Custom Fields is the perfect solution for any wordpress website which needs more flexible data like other Content Management Systems.

Page Restrict

Restrict certain pages or posts to logged in users.

Filed under: WordPress