The BarbLog

Design, front-end dev and other random thoughts


All of the posts under the "css" tag.

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

What I learned this week (23/10/13)

Webpage design:

  • When saving images for the web in PS, best option is to choose 2-Up, zoom to 150% and check quality there (check for artefacts appearing when reducing quality settings) in order to choose the best one.
  • Two things to reduce file size before saving for web: 1. Blur parts of the image that can be blurred, and 2. Reduce the number of colours where possible.
  • CSS shorthand for background properties: some browsers, even Firefox, can have problems displaying it so if in doubt, use longhand code.
  • Line-height settings: rule of thumb is 1.4x line height per 1 unit text size, but can vary, e.g. light text on a dark background is harder to read so increase line height.
  • Link colours: best to define them in the CSS right at the top of the stylesheet below the body settings, to ensure the links all render in the correct colour – also include various states eg. a:hover etc.

Useful tools:

Barbara October 23, 2013 Leave A Comment Permalink

get_footer() ?>