Styling Yelp Camp Show Page 1

Hello! Now that the Yelp Camp App comments have their basic functionality we need to do some styling! I have been doing front end development for a couple years now (as a hobby) so I’m quite a bit more familiar with this part of the process. This post will be about the Yelp Camp styling that I am doing in a code along – later I will write some detailed posts about styling any page!

So far the Yelp Camp App is looking pretty bare bones. We have been using the default styling that comes with the Bootstrap library.

Here is the campgrounds/show page and code:

showpage

show

Lots of ick here. Not only is the page bland and forgettable, it’s also not easy to read. The only colour is in the photo, which isn’t sized or framed nicely. The comments are just there… with no outline, details or buttons. I’m a big fan of symmetry (which is not the only way to do things) so this left justification kills my eyeballs.

If I were creating this page for a personal application (rather than a code along) I would do the following:

  • put the whole campground post in a container
  • center it
  • add a nicer but still simple font
  • increase the font size in the body
  • separate comments into individual containers
  • add a like or up-vote button to comments
  • add a reply option to comments
  • make the photo slightly smaller
  • Round the edges of the photo slightly
  • Add links to similar posts at the bottom of the page
  • Select a palette of light colours and dress the page up a touch

But I’m not in charge for this one so bare with me as we follow the instructions in the code along!

Often in the code along we are learning things as we go, so often we work in a bit of a funny order. Since we already have a bunch of code written we will have to move some things around.

Note: We will be using Bootstrap’s grid system throughout this project. It is an easy to use, responsive layout. At some point I will write an entire post about it, but for now know that it’s awesome and it allows the person writing the code to decide how much space items will take up on various screen sizes.

First the whole chunk of code needs to be wrapped in a div with class container, then we will add a row, a column and a list. This will end up being a side bar with some information about other posts.

</pre>
<div class="container">
<div class="row">
<div class="col-md-3">YelpCamp
<div class="list-group">
<ul>
	<li class="list-group-item active">Info 1</li>
	<li class="list-group-item">Info 2</li>
	<li class="list-group-item">Info 3</li>
</ul>
</div>
</div>

Which will look like:

addedsidebar

Not to impressive yet, but it’s something. You can see that it is taking up only three of the available 12 columns. Eventually this will show similar listings and a map detailing the location of the selected campsite. For now we will leave it as is and start to sort out the picture, descriptions and comments.

Inside of the the row div we need to add another div, this time with class col-md-9 (taking up the remaining columns. The image, name, price per night, and description will all go inside a div with class thumbnail. To the image we will add class img-responsive. After the image we need to create another div with class caption-full and inside of that an h4 with the price (we don’t have this in the database yet so we will just hard code it in for now), this div has class pull-right. Still inside the caption-full div we will add the campground name(h4, a) and description(p). Outside of the thumbnail but inside the col-md-9 we will add a div class well with a div class text-right containing the Add New Comment button. To add some space it’s nice to put an hr(horizontal rule) element here. After that we will add the for each loop that adds the comments. This is all going to look like:

Screenshot from 2018-04-05 16-20-48

 

You can guess what most of the classes do, but here is a list of all bootstrap classes and what they do. Again I will write much more detailed posts on Bootstrap and styling later on!

afterbsstyle

Bam! Take a look at that beauty, and we haven’t even finished! There is still a lot of custom styling to be done in CSS. Not hecking bad though, eh? I’m going to do a separate post for the CSS page and then play some catch up on explaining some of the nitty gritty of styling.

As you can see this post is a whole lot of put this div inside this div with this class or that class. It sure doesn’t read nice, and isn’t a great way to explain it but I just want to get it out there first. Later on I will write posts that explain a lot more of the why and how. But this post is focused on the what and understanding/being able to implement is not the goal!

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: