Odd & Even: Alternating Post Classes For Styling

Often a design calls for styling that makes an article archive (or any list of custom post types) easier to visually navigate. This can be as simple as altering the background color of every other post or something more involved depending on the situation at hand, but to do this we need alternating classes for each post in the loop. WordPress doesn’t do this out of the box, but adding this to your theme couldn’t be easier! Read more Odd & Even: Alternating Post Classes For Styling

CSS: Equally Spaced Horizontal Elements

Sometimes there are things you want to do in your layouts with CSS (Cascading Style Sheets) that you assume would be easy, but as you dive into the coding, it turns out what you thought should work just isn’t cutting it. Equally spacing elements across a horizontal area so that the first and last items are flush with the left and right borders respectively turns out to be a perfect example of this. For the lowdown on how to best accomplish this, read on! Read more CSS: Equally Spaced Horizontal Elements

Responsive Aspect Ratios With Pure CSS

One of the hurdles I faced when beginning to work with responsive designs was the lack of an obvious way to assign an aspect ratio to a container in CSS. This kind of thing can be handled with an image placeholder or Javascript, but neither is an elegant solution. Fortunately, with a little bit of digging, an answer soon presented itself! Read more Responsive Aspect Ratios With Pure CSS

Smart Design: Image Replacement

Custom logos and exotic heading fonts… two things that as designers we’re in love with when it comes to website aesthetics. That’s where image replacement techniques come into the picture but when it comes to maintainability, accessibility, and search engine optimization (SEO) they can quickly become problems if not dealt with properly. In this post I’ll talk about what needs to be considered and describe the technique I use the most. Read more Smart Design: Image Replacement

CSS3 Basics – Rounded Corners

Aaaah, rounded corners. One of those design elements that’s subtle and classy… but that used to mean running to Illustrator or Photoshop to generate, slice, optimize, and export images, merge them into a sprite and then finally place them into their containing elements with a careful juggling of x and y coordinates. Oh how glorious that this time robbing sequence of events is so close to being a complete thing of the clumsy ol’ past! Read more CSS3 Basics – Rounded Corners