css

CSS Facebook Chat Head mglaman Sat, 05/18/2013 - 11:07
I finally got my first codepen.io account, and created some CSS Facebook Chat heads. You can check out the pen, and play around with it.

A better responsive sidebar

Sidebar content always gives me a little twinge when it comes to responsive design. Typically a left sidebar will end up stacking directly above the content and a right sidebar directly below. This can be fine, unless your left sidebar has 5 different content areas and now the user has to scroll two screen lengths just to read an article. Or the right sidebar has an important call-to-action you apparent to each visitor, but it resides underneath the content on a mobile device.

Tips & Tricks: the WordPress Photo Gallery

With WordPress 3.5 came an awesome revamp of the media library that allows users to easily place a photo gallery from new and old images within the media library. The gallery shortcode was introduced and provides quite a few different features, all available from a user interface and not just shortcode attributes. There are a few things missing from the user interface that can let you make the most out of your photo galleries.

Responsive Images

Responsive design is all about the ever growing number of mobile devices that individuals can view a website on. Creating a fluid grid system to adapt to these different screen resolutions and widths is a major undertaking. CSS3 and modern browsers have made it easier to migrate away from image heavy websites; however, photos speak a thousand words and clients will want larger header images or photographs.

jsFiddle for your debugging needs

We all love JavaScript and what it can do, especially the various frameworks created to make the life of a developer easier. However, with scripting comes debugging, and debugging can take a lot of time. We all have our own ways of going about this process, but a few months ago at an interview I was introduced to jsFiddle.jsFiddle allows you to select your favorite JavaScript framework - or import a link to your own script file - and debug the code.