Authors ›
Joshua Johnson

Joshua Johnson

Equal parts editor, writer, designer, and photographer. Hit me up on Twitter, or check out my photos.

CSS / 27 Feb 2013

Zen Grids: A Responsive Grid System Built on Sass

Building grids was moderately complicated before responsive design, these days they can be downright intimidating. When you dive into a complex layout, it’s easy to get lost in all of the math and percentages. Sure, the hardcore nerds among us love to play with this stuff, but some developers just want to get to work!

Today we’re going to look at an awesome grid system that will help you set up your responsive grids with very little effort. It’s semantic, built for responsive design, completely flexible to the way you work, and powered by Sass. Meet Zen Grids.

CSS / 22 Feb 2013

5 Simple and Practical CSS List Styles You Can Copy and Paste

Who doesn’t love a good list? We use them constantly in our markup for a variety of different situations. Today we’re going to take a look at a few simple and practical examples that you can steal and use in your own work.

We start off with a fun animated vertical list, then style up a list with thumbnails and text, another with just images and finally an ordered list where the numbers are styled differently than the rest of the type. There’s a ton of great things to learn here so let’s jump in!

CSS / 15 Feb 2013

Code a Fantastic Animated Circular Thumbnail Gallery With CSS

Thumbnail galleries are a constant source of fascination for me. There’s so much more fun to be had than simply creating a grid of squares and calling it a day. Especially since CSS3 gives us so many powerful new tools to work with.

Today we’re going to mix up the boring old standard image gallery by turning it into a series of animated circles. Along the way we’ll learn a ton of helpful CSS knowledge that will help you in all manner of future projects.

Layouts / 8 Feb 2013

How to Use Centered Alignments: Tips and Examples

Today we’re going to go back to basics with a “design 101” discussion on alignments. Centered alignments are an easy place to go wrong and if you don’t know how to wield them properly, the result is a very poorly structured page.

Join us as we take a look at why centered alignments tend to be weak, where you should avoid them and how you should be using them.

Inspiration / 30 Jan 2013

20 Fresh Sites With Amazing Scrolling Effects

Scrolling effects are becoming more and more popular as a means of increasing interaction and user interest. Through clever background positioning, animations and a little JavaScript, you can bring your page to life in ways that will surprise and grab your users’ attention.

There’s a wide variety of tactics that you can use to create a unique scrolling experience on your site. Join us as we take a look at twenty fresh sites and how they use scrolling effects in different ways.

Graphics / 23 Jan 2013

Check Out the New American Airlines Logo

American Airlines has had the same logo for forty-five years. That’s definitely a pretty impressive stretch! They’ve decided to hang up their Helvetica though and look to not only a new typeface, but a new eagle and even a new livery design.

Read on to see the logic behind the new design and whether or not I think it’s another chapter in a long line of recent brand redesigns gone bad.

CSS / 21 Jan 2013

Build a Fun True or False Quiz With CSS

I’m constantly surprised by what you can achieve using only HTML, CSS and a little ingenuity. I love to think outside the box and attempt creative experiments just to see if I can pull it off.

Today’s random challenge is to create a fun little true/false quiz. Questions will be presented to the user and answers will be revealed only on click. To make the magic happen, we’ll turn to some pretty crazy methods and use features like active, focus and even tabindex! You’re bound to learn some quirky stuff so hit the jump and follow along.

CSS / 17 Jan 2013

6 Awesome Emmet CSS Time-Saving Tips

Emmet is one of the most useful text editor plugins that you’ll ever come across for developers. It has the seemingly magic ability to turn a tiny bit of work into a ton of code, which can save you an incredible amount of time and effort in the long run.

Previously, we took a look at some of the best features of Emmet from an HTML perspective, today we’re going to follow that up with some tips for how Emmet can improve your CSS workflow.

CSS / 16 Jan 2013

Code a Spinning Circular Menu With CSS

Don’t be a square, break outside your boring box and try on a circle for size. Today we’re going to build a circular navigation menu that spins to different points as the user hovers over an anchor.

Along the way we’ll have to overcome several obstacles like how to structure our HTML to be conducive to a remote hover and how to position all of the elements just right so that everything works. It’s a fun challenge and there’s a lot to learn, let’s get started!

CSS / 10 Jan 2013

Perform a Split Reveal With CSS

CSS can pull of a lot of really great image tricks: size manipulation, desaturation, even blur. One limitation that we run into though is that you can’t really slice an image into multiple parts. For instance, if you wanted to cut a photo in half and animate the separation, you couldn’t really do it with pure CSS. Could you?

Today we’re going to code up a work around that allows us to achieve this very trick without an ounce of JavaScript or extra files. Let’s see how it works.

Software / 8 Jan 2013

Create Outstanding Product Shots in Seconds With PSDCovers

Creating high quality 3D product mockups is a ton of work. I used to do print design work for various major store brands and I spent hours and hours toiling away in attempts to build attractive Photoshop mockups of various products.

If only PSDCovers.com had been around back then! This awesome resource is loaded with free packaging and product mockups that you can instantly apply your designs to in Photoshop. Sound too good to be true? Read on to see how it works.

Software / 7 Jan 2013

Generating Placeholder Content in Sublime Text 2

Everyone needs a little placeholder content now and then. Whether it’s a quick dummy image or a chunk of lorem ipsum, placeholder content can help fill the void when you need to flesh out a project but don’t necessarily have your pieces in place.

Today we’re going to take a look at how Sublime Text 2 can help you generate placeholder content automatically so you can save time and move on to the important stuff. Let’s check it out!