Recent Posts

May 28, 2014

Oh Wow That’s Neat – 19: Responsive Boilerplate

With all of the great frameworks popping up it can be difficult to choose the "right" one. Besides doing some really great things, probably the two most popular frameworks [Twitter Bootstrap](http://getbootstrap.com/2.3.2/) and [Zurb Foundation](http://foundation.zurb.com/), can be a little overreaching at times when it comes to theming them. You may find that you have to overwrite and undo many styles to make them look unique. This is where web developer [James South's](https://twitter.com/James_M_South) [Responsive Boilerplate](http://responsivebp.com/) may prove to be that "right" one.

May 23, 2014

Quick Tip - 18: Automatically Update Placed Files in Adobe Illustrator

If you use Illustrator for interface design you probably take advantage of using placed files for some of your design elements. I've started using the heck out of them in order to make updating items across files much easier and quicker. As I started doing this I quickly realized that it's monotonous to update the placed files manually after making edits to them. Well, there's good news, you can set Illustrator to automatically updated them for you.

May 21, 2014

Oh Wow That’s Neat – 18: Morphing Buttons Concept

It used to be that websites and their interactions were much different than those from native software applications. Well this is not so much the case anymore. [Mary Lou](http://tympanus.net/codrops/author/crnacura/), a freelance web designer and developer from [tympanus.net](http://tympanus.net/), wrote an interesting article discussing a few different morphing buttons concepts that showcase some amazing possibilities for web interactions.

May 20, 2014

Normal, Condensed, or Expanded Font Faces With CSS font-stretch

Have you ever attempted to use a condensed or expanded font face from a particular font family using CSS? How did you do it? Did you create a new web font with a subset of the condensed or expanded versions? Well, thanks to CSS3 there's now a better way, [sort of](#sortof).

May 16, 2014

Quick Tip – 17: How to Diff CSS Live Edits in Chrome DevTools

If you're reading my blog I'll assume that you are familiar with how to live edit code within all browser developer tools. I use them all the time and can hardly remember what it was like without them. Chrome DevTools tend to be my favorite but FireFox and Internet Explorer continue to improve.

May 14, 2014

Oh Wow That’s Neat – 17: Open Source Ampersands

Paul Irish created and maintains a site devoted to Ampersands. The site is a collection of open source web fonts that only contain the ampersand character. He created it based off an [article from 2008](http://simplebits.com/notebook/2008/08/14/ampersands-2/) regarding the usage of ampersands and the fact that certain variants of the character in some fonts are more interesting than others. The article also points out that the ampersand character is often used only for display purposes and not in content so there is no reason not to use more interesting versions.

April 28, 2014

CSS Pseudo Classes for Form Elements

CSS provides us with a handful of pseudo classes that are specific to HTML5 forms. They allow us to create forms that are easier to fill out by highlighting fields that are required, optional, valid, invalid, etc.

April 25, 2014

Quick Tip - 16: Disable HTML Form Validation With novalidate

With HTML5 we have been given new input types (email, tel, url, number, etc.) and built in browser validation to validate them. This is great but you may want to disable this validation if you want to test your server side validation, use custom validation, or something else.

April 23, 2014

Oh Wow That's Neat - 16: Brick. Webfonts that actually look good.

For those of you who have taken advantage of web fonts you've likely noticed various levels of quality. Sometimes, in some browsers, they look great. Other times, in other browsers, they look thin grainy. And if you're like me you probably just cringed a little and dealt with it. Well, fortunately we now have help thanks to [Alfred Xing](http://alfredxing.com/) who has created [Brick](http://brick.im/).

April 21, 2014

Using CSS Generated Content

Back in the good ol' days, CSS was much more limited than it is today. If we needed to style something it had to be in the page which, in turn, led to bloated markup simply for design purposes. Luckily we are no longer in those days.

April 18, 2014

Quick Tip - 15: How to Fix ng-cloak Flicker in AngularJS

The ng-cloak directive was added to Angular in order to prevent the flickering of elements before your application has fully loaded. It then removes ng-cloak once it has had a chance to compile your views. However, there is still a flicker issue that occurs between when the view is first loaded and before Angular has had a chance to run.

April 16, 2014

Oh Wow That’s Neat – 15: The Magic of CSS

We pick up lots of pieces of knowledge over time when working with CSS and then if we don't use them often we can forget how to use them and then have to spend time either looking it up again or looking for where we used them in other projects.

April 14, 2014

SVGs are So Fresh to Defs

No, this is not a hip hop song about SVGs, sorry to those of you who were expecting that. This is another post about good ol' SVG graphics. So most of us know that there is a lot that you can do with SVGs and it can all be done in many different ways. The SVG `defs` element can be used to make SVG code simpler, cleaner, and better.

April 11, 2014

Quick Tip - 14: Centering the Grid in Illustrator

When you create a new Illustrator document the grid will always be aligned based off the upper left corner of the art board. Personally, I always want it to be aligned to the top center. How do you do that? Well, the simplest way that I've found is to actually just center the art board.

April 09, 2014

Oh Wow That’s Neat – 14: flexboxgrid.com

If you're ready to build out your next site using flexbox you are probably going to want to use a grid. Well, you're in luck because [Kristofer Joseph](https://twitter.com/dam) has created [Flexbox Grid](http://flexboxgrid.com/) with many of the features that you're used to with other div based grids and more.

April 07, 2014

What the :root Pseudo Class is and Why You Might Use it

The :root pseudo class, at first glance, is a little odd. It seems like it's simply a replacement for using the HTML tag as a CSS selector. There's a little bit more to it than that and in this article I will explain what the :root pseudo class is and why you might use it.

April 02, 2014

Oh Wow That's Neat - 13: subtlepatterns.com

Subtlepatterns.com is a great free resource for high quality repeating backgrounds for use in your designs. It was created and is actively maintained by Atle Mo.

March 31, 2014

Things You May Not Know About CSS Backgrounds

I have been using CSS background properties for quite a few years and have only used what I have needed. There are some pretty cool things that can be done with backgrounds that I was not so familiar with. In this article I'll highlight some of these not so common options.