Zyring Day 2 – styling with Bootstrap

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Styling Your Cities Page

There’s not much instruction given here, but I’ve played with CSS and Bootstrap a little bit before and am happy to just start mucking around. I generally enjoy thinking about design and layout and spent plenty of time messing around making posters in LaTeX or vector graphics in Inkscape during my PhD.

I’m going to aim for a simple layout a bit like this:

rubbish sketch of page

High quality mockup of my page

So first I need to make a 3×2 grid, which I know how to do if I was going to manually specify what goes in each box. However, in this case what I really want to do is just populate it automatically with stuff from the controller, keeping it in three columns. This took me a while to figure out – I used this StackOverflow question for guidance, but that initially caused me to overcomplicate things a bit.

Anyway once I got that working it was down to playing with styling — this took me ages as I’m still quite new to it, but it wasn’t hard to google for relevant tutorials for things like adding a darker background to the city names to make them more readable.

What I ended up with wasn’t great and needs to be fitted to the screen better, but it’ll do as a start – I don’t want to spend forever on styling right now as I’m keen to get into the mechanics of the site.

website screenshot

Well,  it’s a step up from the hand-drawn one…

Advertisements

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