Join Ray Villalobos for an in-depth discussion in this video Scaffolding our main columns, part of Bootstrap 3: Advanced Web Development.
- View Offline
I'm going to do a search for that and then hit Add to Collection. And then the other one that I'm going to use is called Merriweather. And I just want the Serif version of this font so I'm going to add that to the collection. And then I'll click on this button down here that says Use. I'll scroll down. I'm going to go ahead and add all the weights for Merriweather, maybe not the ultra-bold ones. And then I'm going to scroll down here and get this piece of code. So I'm going to triple-click to select, and then hit copy, and then go back into our template. And before our CSS files I'll paste that line of code. This will bring in those fonts into my project.
Now the next thing that I need to do is add an ID to this page this happens to be the Home page. Its always a good idea to have an ID for every page in your document so that its easier to target this page with CSS. So I'm going to delete this Hello World. I'm also going to update the title. I'm going to call it Roux Academy Conference 2013 and then I'll do dash dash and then I'll do the name of this page, which is the Home page. Now next, I want to create a container class. This is the part of the page that has the entire layout.
So I'll do a section with a class of container. Now another thing that I like to do is always add comments everywhere on my websites. So at the end of every section or diff tag, I like to have a comment. So this is the container, and I'm going to put a comment at the end of it. Let me go ahead and align it a little bit better. That's another thing that you can do to make things a little bit easier to read. Is, just tab everything so that it's aligned nicely. Next, I'm going to add a div with a class of content, and also row.
Row is the technical term that you use in Bootstrap to define each row of your document. Content is a class that I'm defining to identify the main section of the code that's going to allow us to center this main layout on the page. Once again I want to put a comment right here. Now next, I want to put in my sections that are going to have my layout columns. So I'm going to do a section, and in this section, I'm going to do a class. And this is going to have a few classes right here. So first, I'm going to identify what this section is. So I'll call it main. And then I'm going to identify that this is a column. And I also need to specify how many cells are going to go in this column. So this is done by doing col-lg and then dash 8 for the number of columns. Now, I'm going to have two columns, so I need to do a second section and make sure that this one has another number that, when added to this original column, adds up to 12.
So this second section is going to be my side bar. And of course I want to add the comments right here, so this is the main section. Again, that is a class that I came up with. And this of course is the side bar. Now, notice something else that I'm doing, and it's something that I like to do in all my projects. Instead of having a bunch of divs I like to alternate between section tags and div tags. You can use them pretty much in the same way but having them alternate means that I'm not going to get confused when I see three div tags in a row. Which if I go into the main Bootstrap website, and I click on CSS, and I scroll down a little bit. You can see that whenever Bootstrap starts working with columns, you end up with a lot of divs.
so I'd like to make sure that they all have comments. And also that I alternate between divs and sections. It's a little bit easier to read. If you've been working with Bootstrap version two, you'll notice that this is a neunomic glature /g. In the old version of Bootstrap you used to use Span classes. Those were probably a little bit confusing since HTML also has span tags so they've moved that to this new column names. And so this is a really good layout now but it doesn't have any contents just so we can see what's going on I'm going to add some Greek text in here. Let me do just an h2, and this is just going to be main content. We'll delete this in a second, but I just want to show you, more or less, how our files are laying out.
I just added some Loren Ipsum text into a paragraph right here. I'm going to grab this, and just copy it and put it in the sidebar as well. I'll rename this headline sidebar so we can see what's happening layout wise. And I'll grab this paragraph and just make a few copies of it underneath each one of those areas. I'm going to save this and I'm going to go into my browser and I'm going to load this. And you can see what's happening already. We've got two columns. The main column area is right here. And it's about eight columns wide and four columns wide on the sidebar. So we've got a pretty good structure for our pages. Obviously it doesn't look very good yet, but we'll work on that in a different movie.
This is a really solid structure. The next thing I'm going to do is first get rid of all of this dummy content right now. And I'm going to save this file and I'll start making copies of this index page for every page that I'm going to have on this document. So I'm in sublime text so in the file area I can just right click and select Duplicate and I'll just make a copy of this file and call it. About, the about page, and what I need to do here is double click to open that file and I'll change this to about us. Make sure that I update the ID to about, just the first name of it. I'll save this file and I'll do the same thing for the rest of the files that I'm going to add into my document.
So I made a copy of my index file for each of the pages in my project, and I've updated the ids as well as the titles for every one of those pages. So since I've got the basic structure of my website finished, I can go ahead and commit and add these changes. So I'll switch back into my terminal, and I'll do a git add. Command the period and a git commit with a message. And I'll give this one the message, basic scaffold for website complete. So in scaffolding our structure, we've prepared all the different pages that we're going to use for this project. As well as created the basic structure for each one of those pages with different columns.
I did a couple of things to make my life easier in the future. One of them was to make sure that I used div and section tags alternatively so that it's easier to read the files later. I've also added comments to every single closing tag, which makes it easier to read the code on this page later as well. I've also added and ID for the body so that I can target each one of these pages separately with CSS. All these changes are designed to make our life easier later on when we start coding with HTML and CSS.
- Prototyping the site
- Working with a local web server
- Creating a baseline template with Git
- Scaffolding the main columns
- Making the site modular with PHP includes
- Adding basic navigation
- Adding a carousel
- Working with buttons
- Creating and activating tabs
- Adding page and structure LESS styles