Zyring Day 13 – styling the list of apartments.

[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 the Apartments List page

Strangely, I wasn’t really enthralled by the prospect of figuring out the off-by-one error from the last tutorial I did three weeks ago, so I decided to ease myself back in by doing a relatively self-contained tutorial on styling. I don’t want to spend ages on styling as it’s really not the focus of what I want to learn right now, but I will at least implement a basic grid of apartments.

I follow the same basic approach as for styling the list of cities, and this is what I end up with:

Basic styling for the list of apartments.

Basic styling for the list of apartments.

Not exciting, but it’ll do for now.

I also decide I don’t like the circles on the Cities page, so I go for ‘beer mats’ throughout:

Images for cities now have rounded corners.

I like beer.

OK, this has hopefully got me back into the right mindset for this project.

Advertisements

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…