Integrating a Different Design for a Separate Blog Layout in Rails 5
Since our application has multiple layout options, this functionality gives our app the ability to have completely different designs on different pages.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

It is time to start looking at our blog. I'm also going to close out our cover template because I think we have what we need from there. Let's open up the finder and this is where we have all of our examples from. We downloaded all of the bootstrap source code and that includes a directory called Doc's which includes a directory called examples, inside of there that is where our examples are going to be. There's one called blog if I double-click it and double-click index, it's going to pop open the blog and this is kind of what our blog is going to look like. Some of it's going to be a little bit different but we can at least use this as kind of a base template that we want to base everything else on.

In order to get this started, we're going to do exactly what we did before. I'm going to right-click on both of these files and then say open with Sublime Text. This is going to give us both of our files. Now we've already gone through the process of seeing exactly what is needed in order to make everything work. We know that we don't need our boilerplate HTML, we do need our viewport, this is going to come in very handy when it comes to implementing the responsiveness. I'm going to bring in UTF 8 for the encoding. I'll cut that out.

Coming back now I'm going to close out all the files. Let's open up our blog layout, you can see we have a number of these things already in place because we already went through the process of installing everything there. I have now placed in the meta tags for UTF 8 encoding and for the viewport. Now that we have that in place let's switch back and let's see what our HTML looks like.

I'm not going to go into the exact same process we did last time we took a very tiny baby steps last time where we actually put all of the HTML in the home page file. I'm going to put more of this inside of the blog layout file. You can see that we have a nav header which will eventually put into a partial, I'm going to get rid of these alerts. We have some fun stuff planned later on for the alerts. I'm going to put our NAV here and I'm going to put some temporary comments. I am not a fan of code comments but when I am arranging code and when I'm sliding code in from a template I do like to use. Then I'll pull them out later. I'll say start of NAV and then if I come down here, I'll say end of NAV. This is simply for having a placeholder to know this is all of the code that I pulled in for the navigation bar. Now everything else here we have a blog header and then we have a container. Now the blog header I think that can go inside of here as well, but outside of the NAV. I'll say for a comment, start of blog header and then we can duplicate this and say end and paste everything inside of it just like we did there.

In the blog index page, now I am going to come down and you can see that this is of class container. Now just as a frame of reference here is the body tag and class container is here. Now if we scroll down and take a look at all of this content you can see that these are all blog posts. Then we have our widget and our footer and then javascript's and everything like that. Our container is going to be on every page. If it's going to be on every page of our blog then it makes sense for it to be in the layout file and that goes also for the row. The row is going to be on every page so I'm going to take both of those. Let's also slide it in here and we'll say start of container and row elements and paste those in and we'll eventually map these up so they'll will be set up right. For right now I just want to bring everything in and organize it properly. Now because we have these obviously we're going to have to come here and we're going to close these out. I do this right away just because I do not want to run into a situation where I have some div tags that are not nested properly. You will see annoying view bugs whenever you have something like that. That is everything we need there.

The next thing we're going to do is go into our actual content. As you can see here we have our content starting with column small 8. And if you're wondering what the difference is sometimes you've seen call them small and then other times we'll see call them medium. This relates to responsiveness and how it looks in the browser and we'll experiment with both options to see which ones are best fit for us. I'm going to take everything here and remember the little trick just put your cursor right at the beginning of the div tag and then slide all the way down and you'll see where it ends. And this takes us all the way to where the list of blogs is done. We could put this on our blog index page. I'm going to open up blogs index. I'm going to put at the very top. And let's push this all the way down so that it can kind of live by itself and we know that this is where everything ends. It's not going to be live content it's simply going to be the hard-coded values.

Now I'm moving down. Now we have this little widget. This little widget is eventually going to be a partial and it has the about content and it has all of that kind of stuff. For right now let's put it in the application layout file and that's going to be the sidebar. Come to the blog and let's see where we want this. We're going to be as long as it's after the yield we're fine. I'm going to say start of sidebar and then we'll say end of sidebar.

As you can see this is kind of monotonous but also it's very important that you have your code organized right because if you didn't you would find yourself in a situation where you have divs not lining up and you don't know where each component lives and it becomes incredibly frustrating. The footer is something we're going to pull out and eventually swap out with our own footer. If I come down, our footer is going to be here. I'll say start of footer, duplicate this and say end of footer. And paste that in and give us some nice indention and we are good to go.

Now this is probably going to look a little bit ugly but it should give us at least a good starting point. Coming back to our site here, hit refresh and you can see that is actually not horrible.

Last thing we're going to implement is our actual set of styles. We haven't implemented the styles for the blog so let's do that switching back into sublime and open up our blog.scss file and remember this has to go underneath bootstrap. Now we can switch over to blog.css and copy all this over, hit paste. Now if I hit save and switch over into the browser and hit refresh. Clicked on blogs, look at that.

  • git status
  • git add .
  • git commit -m "Implemented styles for the initial blog to layout"
  • git push origin design

In the next guide, we're going to start integrating at the top with our nav bar.

Resources