Tic tac toe: Day 1

I spent all morning fiddling with CSS and bootstrap stuff. I created the game grid using bootstrap so it would scale and look nice from mobile all the way to desktop. It ended up taking a lot of work because setting a height that scales with width is not built in and I had to do a couple CSS tricks just to get that to work, then it would break when I put in x’s or o’s so I had to take them out of the document flow. Then came the tricky part. I needed to set font size to scale with square height and line height to scale based on font size so the centering wouldn’t break. The first part wasn’t bad, but centering with line height didn’t seem to scale in direct relation to font size so I had to center things at a few different spots to get data points and then do a linear regression to find the relationship. I think it will change based on what fonts and characters you are centering but this should point you in the right direction: Include the following in your JavaScript file (requires jQuery).

var resize = function() {
   // Set font size to scale with square height
   $('.class-to-scale-font').css('font-size', $('.square').height()*1.06)

   // Set line height to scale with font size so centering doesn't break
   $('.square').css('line-height', 0.75*parseInt($('.board').css('font-size'))+'px')

Then I  tweaked the navbar to scale a little better and set up some of my base Javascript. So progress was slow, but what I have so far is pretty solid.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s