[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:
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.