GruntPress

Introducing GruntPress, a boilerplate WordPress project that uses a Grunt workflow.

Working with WordPress locally can be a pain in the ass and GruntPress is a way to make more sense of the workflow. For example, I prefer to code wireframes and design in the browser where I can. The last thing I want to do is have to install WordPress, create a theme, and work with PHP loops while I’m laying things out. It’s so much easier to code in straight HTML and CSS while experimenting with layouts and components, but WordPress makes that rather difficult.

GruntPress on GitHub →

How it’s Organized

GruntPress represents my ideal workflow, which is to start with static development files before processing them to use on a working WordPress installation. In other words, there are two directories located in the root folder, one for development files and another for production with Grunt and its tasks installed alongside them.

This file structure allows us to use the development directory as a playground for static files like HTML wireframes while keeping them separate from our WordPress installation, located in production. Bower is even installed in the development/lib directory, making experimentation even easier and more manageable.

Working in Development

The development directory is a boilerplate for a simple website. It includes index.html at the root and a lib subdirectory that houses all Bower components, fonts, images, Javascripts and SASS/CSS files needed to build the foundation for a website.

Run the default grunt task in shell and Grunt will connect you to a local server, open a new browser window, and start watching your files for changes. Saving a file triggers the browser to refresh automatically for you to view your changes.

Moving Files to Production

GruntPress will prepare your development files and even move them over to the production directory for you. Run the process task and GruntPress will do the following:

  • Concatenate Javascript files
  • Minify the output concatenated Javascript file
  • Process and concatenate SASS files
  • Run Autoprefixr on the output CSS
  • Minify the output CSS
  • Produce a minified custom Modernizr build based on the features it detects were used
  • Compress image files down to their smallest size

Not bad, right?

Now that the files have been processed, we can move to production with the move command. Go ahead and check the production/lib directory. Everything will be there!

Wrapping Up

There are a few other things GruntPress can do out of the box, but you can read the documentation on GitHub for those little things. The point to get across is that GruntPress is an attempt to help separate the development and production workflows when working with WordPress projects.

You may prefer other tasks, components and resources than the ones GruntPress provides. That’s totally fine. The idea is not to be dogmatic and pretend that all projects are the same and must follow the same workflow. GruntPress simply provides a starting point for scoping that out and can be modified as needed. In fact, I may release a future version with way fewer components and dependencies. Then again, it’s more for me anyone else, so we’ll see.

Please enjoy and feel free to contribute!

GruntPress on GitHub →

Additional Resources

Foundation WP: A Foundation 5 WordPress Theme

I created a WordPress theme to help designers prototype web projects quickly using ZURB’s awesome Foundation front-end framework.

I’m a huge Foundation fan and use its grid for just about every project. It’s light, extensible and prevents me from having to re-write my own grid layout time and again. Foundation also comes with a crap-load of other components. I rarely use these in my production sites, but they are super handy for developing prototypes for client like a live wireframe in the browser.

I’m also a WordPress fanboy. It’s my go-to CMS because there’s rarely a project too big or too small where it wouldn’t work perfectly. If I have any role in integrating a back-end content management system into a web project, then I typically turn to WordPress.

So, I decided to unite the two in holy matrimony. Actually, I’m not sure if either one is technically male or female, so I’m sorry if I inadvertently made a political statement, a la Leslie Knope.

Download on Github →

What Foundation WP is Good For

Yes, there are other Foundation-based WordPress themes out there. In fact, you might even want to check out FoundationPress instead of FoundationWP.

What’s the difference? Very little, except that others might end up being updated more often. The reason I made FoundationWP was to specifically give me a clean template to develop prototypes. I can’t count the number of times I’ve installed Foundation into a WordPress theme, so this prevents me from having to re-create the wheel with every new project. Think of it as a generic boilerplate for WordPress theming.

At the same time, I wanted something that utilizes my preferred way of organizing files and assets. This is pretty close to how I organize every WordPress theme I make, except for the default Foundation files, which needed to remain as-is for future updates to the framework. Other than that, I can clone Foundation WP and start coding right out of the box. The repository even includes a full WordPress installation.

So, would I use Foundation WP to develop full websites? No, I would not and have a pretty lengthy explanation of my views on frameworks for production sites. However, this is perfect alternative to creating static wireframes for your projects and nailing down your layouts and functionality. Presto!

Go Forth and Create!

My hope is that Foundation WP makes the development process for designers smoother. I find that clients are often visual and want to experience something before they commit to a decision. Static wireframes can be great, but lack the pizzazz of being able to click and preview like a live prototype, especially with responsive web designs.

That’s exactly what Foundation was created to do. And now we can pair it up with WordPress to create even faster site prototypes.

Download on Github →

Other Resources

Animate.scss

I find myself in many situations where writing CSS animations becomes a major pain in the ass. The syntax is long, the math is confusing, and browser support is all over the map.

That’s why I was super excited to find Dan Eden’s Animate.css a couple of years ago. It packages up a metric ton of animations and simplifies what is traditionally a complicated process.

But Animate.css has its limitations. For one, it’s a massive library that will add another 56kb to your stylesheets. Sure, you can download a custom build to bring that down, but then it’s a pain to go back in and add back animations later if you want them. Secondly, it’s vanilla CSS. I’ve made the full transition to SASS and having to maintain both feels like a burden.

Introducing Animate.scss

That’s why I created Animate.scss. This is the exact same library of animations included in Animate.css but ported for SASS.

Download on Github →

Yes, there are other SASS ports of Animate out there. A simple search on Google will bring up at least a dozen. I just couldn’t find one that was as easy or flexible as I wanted it to be. In other words, I wanted something that could give me as few or as many as the animations as needed for my projects while allowing me to apply my animations with a simple mixin.

Installing Animate.scss

There are no dependencies to use Animate.scss. If you are already set up to use SASS on your project, then this will fit right in.

The simplest way to get started is to drop the Animate directory into your project where your other SASS files are located. Then, @import the library in your master stylesheet.

@import "animate.scss";

That will give you the full library of animations. If you want to pick and choose the animations that get imported into your project, then comment out the ones you don’t need in the animate.scss file.

// Import the animations
@import 
  // "_attention/attention.scss", // This will not import
  "_bouncing-entrances/bouncing-entrances.scss",
  "_bouncing-exits/bouncing-exits.scss",
  "_fading-entrances/fading-entrances.scss",
  "_fading-exits/fading-exits.scss",
  "_flippers/flippers.scss",
  "_lightspeed/lightspeed.scss",
  "_rotating-entrances/rotating-entrances.scss",
  "_rotating-exits/rotating-exits.scss",
  "_specials/specials.scss";

Want to import specific animations rather than full sets? Comment out everything in animate.scss and use @import to pull in the exact ones you need.

// Import specific animations
@import "_attention/bounce.scss";

Using Animations

Now that Animate.scss is all hooked up into your project, let’s start using some animations. Each animation is a SASS mixin, so you can apply them directly to your own class names.

.your-class-name {
  @include bounceIn();
}

Furthermore, the mixin offers some variables you can use to customize the animation.

.your-class-name {
  @include bounceIn(
    $duration: 1s,
    $delay: .2s,
    $function: ease, 
    $fill-mode: both
  );
}

Get Animate.scss

Animate.scss is available on Github. It’s not something I plan on actively maintaining, but am definitely open to contributions. Please submit a pull request if you have ideas to make this a better resource.

Download on Github →

Version 4.0

The last time I redesigned this website, the web was becoming a much more exciting place for web designers. I remember reading Ethan Marcotte’s article on responsive web design and immediately trying to figure out how to make my own website all fluid and squishy.

Fast forward to the present and we all know that responsiveness is more than just squishiness. We now know that website performance is just as much a design consideration than our colors, fonts and layouts and we’re starting to have serious discussions on the differences in user experience between touch and click screens.

If my last redesign was reactive to one great new idea, then I hope this one is a reflection of the many great ideas and better practices happening today. So, in the spirit of sharing, I’ve open sourced my website.
 

Download the site on Github →

 
I wish I had written more posts during the redesign, but I promise to share what I learned in bits and pieces, moving forward. However, here are a few of things I was able to squeeze in:

Please feel free to fork my WordPress theme from Github, contribute to it, or use it for your own work. Let me know if you use it. I’d love to see what you build.