The BarbLog

Design, front-end dev and other random thoughts

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 :-(

 

Talk Web Design 2014 – 7/5/14

twd-2014-29

Talk Web Design is a conference primarily aimed at web design students, organised by my MA course tutors, David Watson and Prisca Schmarsow and now in its third year. I was asked to photograph the event which was a great experience for me, but I engineered it so that I could still listen to the best part of each talk after taking photos during the first few minutes and between talks. I had been looking forward to being inspired by all the speakers, some of whom I’d already seen speak and others of whom I’d heard a lot about and wanted to finally see. They didn’t disappoint – the day was packed with all sorts of inspiration and information.

Read more →

Website Planning project: Revisiting the Warm Bean Coffee website

Task: revisit the Small Business coursework website and improve on it based on everything we’ve learned so far.

For this task my to-do list was as follows:

Global:

  • Introduce modularity by using PHP includes for head, navigation, footer and optional jQuery & jQuery UI libraries
  • Tweak link and footer colours
  • Add XML sitemap, .htaccess and robots.txt
  • Add a favicon
  • Tweak meta descriptions where appropriate and review SEO (though that had already been considered in the first iteration of the site)
  • Implement microformat (h-card) for the address and phone number in the header

Read more →

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