Here’s some stuff about CSS that I’ve been researching: read if you’re into that shit.
-----
Something that has been worrying me about this project is browser support. Some of the more useful responsive techniques are relatively new additions to the W3C standards, so are we going to run into issues before we even get started?
Well I did a little digging and there’s a great website called
Can I Use which documents browser support for HTML5, CSS3 etc.
One of the main headache-saving CSS rules I use is
box-sizing.
By default, CSS measurements for margins and padding are added onto whatever width you set to an element (so an 80% width box with a 15% padding will take up 95% of the actual space).
This is a pain because it forces you to keep track of every single measurement and make sure they don’t add up to the wrong number, which is tedious when you’re working with large amounts of elements.
box-sizing changes that by making the padding and margin relative to the width (so an 80% width box with a 15% padding will still take up 80% of the actual space and the 15% gets calculated within that 80% space).
:
element {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing:border-box
}
So what browsers support it? Turns out
a whole fuckin’ lot. Most recent browsers support it out of the box and many older versions support it with prefixes.
The only notable exception is Internet Explorer 7 and 8, which both make up a significant chunk of the browser marketshare. Luckily, Can I Use even links to a polyfill to get around this problem. So we can use this pretty safely.
The other thing is media queries, which are actually the thing that responsive layouts rely on to work at all.
:
@media screen and (min-width:768px) {
responsive rules go in here
}
The support for this is a bit different to box-sizing in that
pretty much everything under the sun supports it,
except every version of IE prior to 9. Fuckin color me surprised. But hey, this one has a polyfill too, so we can use it as well!
-----
On a non-technical side, I’m thinking it might be a good idea to take a screenshot of the forums index page and then annotate it in Photoshop (or something similar) to map out the basic page elements. The reason for this would be to figure out what elements we need to build and style for the new skin.
So something like this:
But more in-depth, of course. I would try and focus on major blocks rather than like individual text links or anything.
Here’s a base screenshot if you want one:
http://i.imgur.com/lMSzmIp.png
Only the Oddworld logo font. (Which has been used in my pupbenny logo. 
)
