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