Responsive, Flexible-Height Sticky Footers in CSS

Standard

Since I’ve been in the game, front-end devs have been wrestling with sticky footers like it was going out of style. I’m no exception, but today I learned a trick that made things a lot easier.

Before we go on though, I’d like to explain the problem briefly. It’s common for websites to have a header, a content section and a footer. On pages with a lot of content, the content takes up enough vertical space to push the footer to the bottom of the browser window. But, on pages with little content, sometimes the content does not take up enough vertical space to push the footer to the bottom of the window. This leaves the footer sitting oddly in the middle of the screen.

There are several solutions, each with their own pros and cons.

The Old Way

The old way works well, except that it relies on the footer to be a fixed height at all times. In responsive sites, this is rarely the case. Of course, you could write JavaScript that detects the footer height and adjusts the CSS accordingly, but that’s neither clean nor performant. A CSS-only solution would be better.

The display: table Trick

My new favorite approach to the problem looks something like this:

The only real caveat to this solution that I’ve encountered so far is the styling limitations present with elements using display: table-row. Often padding, margin, etc. don’t behave as expected. This is easy enough to work around by adding a <div> or something inside the .page-row and styling that:

Why not Flexbox?

As I understand it, Flexbox handles sticky footers very well. If you’re in a position to be able to use Flexbox without worrying about browser support, go for it!

Getting a Image Size URL from the Advanced Custom Fields Image Field

Standard

On a recent WordPress project, I often found myself needing to get an image size URL an image uploaded via Advanced Custom Field’s image field.

The ACF image field allows you to return either the URL of the full-sized image, the image (attachment) ID, or the image object. How you configure this will depend on the method you intend to use to retrieve the URL.

Using wp_get_attachment_image_src

For this method, you’ll want to return the image ID. To get the image URL, we’ll use the following code:

Using the Image Object

You can also configure ACF to return the image object and extract the image URL like so:

Using Dashicons for Custom Post Types

Standard

With it’s admin redesign in version 3.8, WordPress also launched a sporty new icon font that powers the menu icons. Before, menu icons were just images linked to using the menu_icon parameter when you registered the custom post type. You can still do this, but today I learned that you can also use a Dashicon in place of an image for your CTP menu icons.

It’s easy: when you register your CPT, enter the classname of any Dashicon in the menu_icon parameter. WordPress will use that a your CPT’s menu icon.

For example, If I’m working on a Slide CPT, I can use the Slide Dashicon like so:

Something

Standard

A thought crossed my mind today.

A flawed something is better than a perfect nothing.

It would seem that less is not always more. Just start somewhere and do something. Take it one step at a time and you can’t lose.

Branding

Standard

A few months ago I ordered Branding Matters by Jason VanLue. I figured it’d give me a few pointers and, hey, who doesn’t want to support a nice guy self-publishing his first book? A few weeks ago I finally got around to reading it and it’s pure gold. It’s helped me understand what branding is what it is not.

Branding isn’t just a logo, color scheme or font. Branding is who you are, how you work, and what you want to be. It’s also is the way people (read: customers) feel about you. Good branding is when you can effectively tell people what to believe about you such that their ensuing decisions accomplishes your goals.

I’m a tinkerer. I’m also an idea person. I have more ideas than I ever have time for and I tinker too much on the ones I do pursue. I also suck at branding. Since I fail to establish goals and direction for things, when it comes time to make a big decision, I can’t make up my mind. My decisions are usually based on how I’m feeling at the moment (which, because I’m human, is always changing).

See, that’s where branding comes in. Branding provides a direction. It’s what you are and what you want to be. When you’ve got that down, making decisions gets whole lot easier. Make the one that takes you where you want to be. And since you’ve branded, you know where that is.

Blogs I Follow (Part 1)

Standard

I know it’s not a new idea by any stretch of the imagination, but I decided to start a series of posts giving everyone a bird’s eye view of the blogs I subscribe to and why. Nothing fancy, just a list of five or so at a time with the whats and whys.

dropshado.ws

This is David DeSandro’s Tumblr for front-end development tricks and resources. Though I admit some of it goes over my head, there is some great stuff in there.

The Pastry Box

I really like this idea — a thought a day from 30 of the web’s top movers and shakers. Some posts are quite long while others are just a paragraph, but you can always count on them to be thought-provoking.

Shawn Blanc

Shawn Blanc is my favorite voice in the tech/Apple/coffee arena. He’s positive, insightful and most of all, a great guy. I don’t read everything he posts, but I happily give him $3/month as a member.

Paul Adam Davis

Paul’s blog is a recent discovery, but a favorite non-the-less. He writes about everything from freelancing to WordPress techniques to UX and I’ve yet to be disappointed. He was also on my podcast once.

The Industry

The Industry is fast becoming one of the best voices in the design and startup world. They’ve got a lot of good reviews and and a lot of awesome people write for them. Also, they let me be on their podcast.

That’s it for now. Check back later for more.

Code Smells in CSS

Standard

Harry Roberts wrote a great article on CSS Wizardy about things he looks for in CSS that give him an idea about “its quality, its maintainability and its integrity…”

A few of my favorites:

Rulesets should only ever inherit and add to previous ones, never undo.

Basically, if at any point you’re removing previously-declared styles from an element, you’ve probably applied the styles too early. I’m sure I’ve been guilty of this one.

[IDs] are of no use to anyone and should never be used in CSS.

Only recently have I begun to agree with this vein of thought. There’s no harm in replacing #header with .page-header, but there are situations where it would be beneficial — especially on larger sites. This certainly doesn’t hurt his argument either.

Building BrandColors

Standard

A couple of weeks ago I launched BrandColors, a side-project of mine that is best described as a collection of major online brand hexadecimal color codes. The project has received a lot of positive attention, so I thought I’d give you guys a quick rundown on the idea and the build process. In typically me fashion, this is happening far too late, but as they say, better late than never.

The Idea

Before I tell you about how I built it, I want to throw out a little disclaimer — the idea for a site like this was not mine. Actually, I’d seen a page like this that I really liked but forgot to bookmark. I spent nearly a half-hour looking for it several days later and after I still could not find it, I said, “To heck with this, I’ll just build my own.”

Oddly enough, it would take me building my own to find the original Color Reference by @chris_frees. Props to him for coming up with the idea and then not getting mad at me when I built something like it.

The Build

One of the things I knew I wanted to do from the start of the project was make adding and maintaining colors super crazy simple. If the process was complex, time-consuming or boring, I knew I would never add enough colors to make it much of resource.

My solution was simple — a static HTML file with each color represented in the markup as a <li>. Using the power of the HTML5 data attribute, I added data-brand and data-hex attributes to each of the <li>s. Then, using jQuery, I appended <h2>s for the brand names and <span>s for the color values and filled them with the data-brand and data-hex values. I also used jQuery to set the background color of the <li> to the value of data-hex. The copy to clipboard functionality was easy as pie with the zClip jQuery plugin.

As result, adding new colors was as simple as adding a new <li> to the page, setting the proper values in the data attributes, and publishing.

I know this was a pretty brief write-up, but I wanted to publish it anyway. I hope you enjoy the tool!