Responsive Design With Path of Exile Exchange (poeex.info)

Recently I’ve been playing a game called Path of Exile which I can only describe as Diablo 3 the way it should have been made, on steroids. The game itself offers customization on a truly different level, fun end-game content, and a great community. Made by an indie development team in New Zealand that just keeps cranking out game-changing updates, this is one game you’ve gotta try. </plug>

Now, one aspect of the game that is unlike any I’ve seen is its currency system. For one, it’s actually stable, but the real fun is that it’s based around a bartering system comprised of items that can advantageously be used in different ways. Think about how there’s 5 nickels to 1 quarter, but now imagine that a nickel gives you food and a quarter gives you gas. As you might imagine, that 5:1 ratio might start changing, and that’s exactly the case of the currency system in Path of Exile.


To assist players with this change (as well as familiarizing new players with the 15 different pieces of currency), someone from the community has made the website www.poeex.info, where the exchange rates are easily compared and the ratios are crowdsourced. This has been extremely useful to me as well as the community, but recently I’ve noticed that the exchange rates sometimes get pretty complicated and not everything fits right. I decided that I’d give the problem a look, and ended up making a responsive version of the site.

This was honestly my first time using media queries, and it was a pretty good experience. I certainly could have used a way to specify an element to which width I could testing against (instead of the entire screen), but such a thing doesn’t seem to exist. Nonetheless, everything came together well and I’m happy with how the quick experiment turned out :-D

Hopefully poeex.info will check their email and decide to look into the design. But, even if they don’t, you can! Go give it a whirl!
 

About The Code

I use a few tricks in this code to get everything just right. (Eventually I’ll get around to devoting a full post to each!)

The first trick is the ghost vertical centering trick. Centering is often the first game-changer a css developer is confronted with. Horizontal centering can generally be handled with margin: 0 auto, but vertical centering is another ball game. In most cases, when the height of the element you’re centering is known, you can simply use

position: relative;
top: 50%;
margin-top: -xx /*half the height of the element*/

However, in the case of an unknown height, you’ll have to be a bit trickier. There are a few options to pick from at this point, but I prefer the ghost centering technique. The basics are that you take advantage of vertical-align: middle, a property that must be used with inline elements. Most people try out vertical-align outside of tables and nothing really happens, so they toss it aside at first, as I did. Later I came across a post from Chris Coyier on CSS-Tricks, which straightened things out for me: vertical-align is vertically aligning an element in relation to its siblings. With that in mind, you can quickly come to the realization that you can use a pseudo element that takes up 100% of the height of the container, and vertical-align your element in relation to that. Here’s the code:

<div class="container">
	<div class="element">
		My height might change!
	</div>
</div>
.container {
	width: 500px;
	height: 500px;
}
/*The Magic!*/
.container:before {
	content: "";
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}
.element {
	display: inline-block;
	vertical-align: middle;
}

Another trick that I use is what I call an Absolute Fit Layout (if someone has a better name for it, let me know!). The benefits of it are that the element will retain specific visual dimensions in relation to its parent’s dimensions. So, for instance, adding padding to your element with a background won’t frustratingly push the element to the right, but will instead subtract the padding from the calculated width (the same with border). In other words, it acts like the old box model, which you can also invoke using box-sizing: border-box. Here’s the code:

<div class="parent">
	<div class="element">
		I'm an Absolute Fit with you!
	</div>
</div>
.parent {
	position: relative; /*to set the position context*/
	height: 400px;
	width: 200px;
	background: #8FBCDB;
}
.element {
	position: absolute;
	/*these can be whatever you want!*/
	top: 20px;
	right: 0;
	bottom: 50%;
	left: 10px;

	padding: 30px;
	border: 3px dashed #153450;
	background: #447294;
}

Details aside, this quality is very desirable for form-fitting textareas or anything that may or may not have a border or padding, which is pretty common in application development. The downside is that an element using this layout is taken out of flow, and thus depends on its parent for flow positioning.

Hopefully this deep-dive into the code will be interesting for some folks, and perhaps eye-opening for others. As always, if you have any questions (or want to play Path of Exile with me!), just ask!

This entry was posted in Experiments. Post a comment or leave a trackback: Trackback URL.

3 Comments

  1. Posted May 9, 2014 at 10:24 am | Permalink

    what do you think of bootstrap3 architecture for projects like this? granted, this is a custom job, but i think it’d make a good bootstrap case example

    • Brent Grossman
      Posted May 9, 2014 at 10:43 am | Permalink

      Bootstrap’s grid system is a great place to start for things like this. I would definitely suggest working with a framework such as Bootstrap or Foundation.

      That being said, it won’t help with most of what makes this experiment tough to pull off. Things like vertical alignment, retaining an aspect ratio, and responsive font sizes are all things bootstrap’s magic doesn’t cover.

      • Posted May 9, 2014 at 8:59 pm | Permalink

        hey brent, i’ve wrestled out valign but it took a while. finally bootstrap makes for good reference and should really be treated like a building block. including font-awesome and perhaps the gallery. but from there – please go custom!

        i wasn’t aware that font size too could be responsive these days.. i’ll spend a weekend playing with that :)

Post a Reply to Brent Grossman

Your email is never published, nor shared. Entering your website is optional, but good for networking!

*
*

Available HTML
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>