[Part 1] The Horror! HTML + CSS Keyboard Woes

I’ve been co-developing a number of plugins for Mozilla’s Popcorn Maker web application. The codebase for Popcorn Maker is new to me, so I anticipated having a learning curve. I never would have guessed that the steepest part of that curve would be developing a keyboard with HTML and CSS!

I have experience with web development, and specifically creating HTML/CSS based designs, but somehow it never took. I always found the thinking required extremely taxing, and the troubleshooting tedious and fiddly.

Nothing has changed.

To be fair, designing this from scratch is only one of my options. I’m looking into other, pre-built, solutions but this is the best way to meet the functional requirements.

The Scaffolding

This particular design needs to be scaleable, which means no fixed widths allowed. I have very little frame of reference for good (read: efficient) website development practices, so I wrote a base structure that seperated the keyboard into basic rows within a container:

<div class="keyboard">
 <div class="keyboard_row">
 </div>
</div>

The styling is also fairly simple at this point – I’m still not sure how I’ll use the keyboard_row, but the container is styled thusly (ya heard):

.keyboard {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

So far so good, right? Now things get tricky. How to represent an individual key? The complexity starts when considering how to display the value of the key itself. Letters are easy, but ENTER, SPACEBAR and BACKSPACE take up a variable amount of horizontal room.

I love bootstrap. It manages to eliminate most of the pain I’m going through with a robust grid system that is purely CSS based (to my knowledge). Unfortunately, including external libraries isn’t the best choice with a web app like Popcorn Maker – it’s heavy on the client-side processing already, so the fewer files it needs to download to display properly the better.

This leaves me trying to figure out how to fit all the keys in 70% of a space. And not just fit! They also have to look professional, meaning that they conform to the basic principles of good print design.

And not just look professional! They also have to maintain that consistency at any resolution, scaling properly in every respect.

I’ve tried a few different things, but my brain is officially fried for the night.

I’ll post again with my solution, cuz it’s gonna be a doozy.