The BarbLog

Design, front-end dev and other random thoughts


All of the posts under the "Code" category.

Vertically center anything with CSS3 transforms

I had a variable height container, with variable amounts of text in it, but needed to vertically center part of the content regardless of the length of the rest of the content. Absolute positioning and display:table-cell weren’t viable options and I’d started to look for JavaScript solutions when I came across a super simple CSS-only method on zerosixthree.

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);

This didn’t work out of the box though, not sure why but I had to change the translate values from -50% to +61% which then resulted in a nice vertically centered div floated to the right of my container.

My application doesn’t rely on this working in all browsers – if the container isn’t aligned properly in IE8 and below the site is still usable just not as pretty, but I think we are at a stage in web design where we have to accept these things, life’s too short to make everything pixel perfect in every browser as long as it doesn’t hinder the user experience!

Having fun with some new tools

I’m currently working on my thesis project for the MA course (Spot That Shot) and I’ve been trying to use various new tools and techniques. This is my first project using Sass, and I don’t think I’m using it to its full potential yet but it’s already proven handy for handling rem units in my code, thanks to a mixin by ry5n that I found on GitHub. I’m also using it for colour variables.

I’m also aiming to take the principles of OOCSS (object-oriented CSS) on board and try to write it in a modular way. This does include some repeating, but ensures elements can be styled separately without changes affecting a seemingly unrelated element. It’s not pure OOCSS because I found that I didn’t quite get the hang of that – it probably takes much more planning time, practice and self-discipline than I currently have at my disposal (full time job + part time job + thesis project work = not that much time to learn difficult new things at leisure).

Adobe’s new-ish text editor Brackets is now my preferred text editor, replacing Notepad++ and Sublime Text 2. I like the monospaced typeface better than the ones in the other 2, and the interface is nicer (for me). I also used it to create my flat HTML holding page for Spot That Shot because it offers live previewing as you type which is pretty awesome! For the real project I can’t make use of that since it doesn’t support previewing of PHP files but I still quite like it. The only thing Sublime Text is better at is autocompletion of attributes; the autocomplete matches any part of an attribute when you type some letters (e.g. typing ‘mrgb’ offers ‘margin-bottom’ which is very useful) whereas Brackets only matches the beginning of words. Maybe they’ll update that at some point, for now it’s not a massive issue so I’m sticking with it.

And finally, I’ve been playing a bit more with WordPress as well, to get a feel for what files affect what parts of a website. The prospect of implementing Spot That Shot into WP, frankly, really scares me and I keep procrastinating because of that :-(


Icon fonts: How to make your own

This is the writeup to accompany my presentation slides about icon fonts.

Before we get into the ‘icon’ part of it…

If you use custom icon fonts, you will be likely embedding them using the @font-face CSS option. The most fail-safe way of doing so is by using the following syntax, as explained at first by Paul Irish and tweaked by Jon Hicks to arrive at this version:

@font-face {
font-family: 'Pictos';
src: url('pictos-web.eot');
src: local('☺'),
url('pictos-web.woff') format('woff'),
url('pictos-web.ttf') format('truetype'),
url('pictos-web.svg#webfontIyfZbseF') format('svg');

This is to ensure all browsers, including that pesky Internet Explorer, display the correct font files. Yes, that’s a smiley face there. Read the above articles to find out why!

Why use icon fonts?

Because they are awesome! There are four main reasons, though. Icon fonts are…
Read more →

Barbara February 17, 2014 Leave A Comment Permalink

Barbara December 7, 2013 Leave A Comment Permalink

First attempt at responsive design

I was working happily on my CSS for the ‘profile page’ assignment, thinking it would lend itself nicely to any screen size without major issues due to the mainly centered layout I chose (not intentionally I must say). But after James asked me if I was going to make it responsive it occurred to me that actually there is one thing in there that definitely won’t work on smaller screens… a table. Granted, it’s only a small and very simple table with 4 headings and one cell each for the content, but it still stopped looking good below a width of approx. 880 pixels.

It goes from this...

It goes from this… this!

…to this!

My first thought was to shove some JavaScript in there to change the HTML below 880px to make my table headings become the far left cells of every row and thus only have 2 columns, but this is not a JS exercise.  Plus that would have been the easy way out, right? So I browsed around for possible CSS solutions and of course CSS Tricks was where I found my answer. It’s not the most elegant solution in the world, but using the code in the article and tweaking it to my preferences eventually worked and my table now resizes. I spent a few minutes just stretching and shrinking the window to see the results… oh the small joys in life. My suspicion is that my markup is all over the place and could be simplified, but I’m not particularly used to working with tables so for now it’ll have to do.

I thought I would share this in case anyone else is looking for a solution to their table woes and more. Not only did I solve my problem but also learned a bit more about the :before pseudo-element which I haven’t tried to use before. It seems to be really handy! I might tweak the table further if I can to have 2×2 columns between 880 and around 550px, and only have the fully stacked version on really narrow screens – but first, spurred on by the enjoyment of learning new stuff, I think I might actually venture into more RWD and tweak my navigation a bit.

Barbara October 17, 2013 Leave A Comment Permalink

get_footer() ?>