Join Jen Kramer for an in-depth discussion in this video Building the grid, part of Templating with Joomla! 3 and Bootstrap.
Now that we've got our files and our folder structure here configured inside of Joomla! I'm ready to start writing some HTML. Let me remind you again about what this website is going to look like. So, here's a picture of what it is that we're building. So, as you can see going across the top of the page, we have an image over on the side, and on the right side, we have some flags, those are the switching the language functionality, and the search box. We have a big long row here for our search, and then underneath, we have our main content and a column of information.
Then down in the footer, we have that stretching all the way across, on the left side we have some text that pertains to the copyright statement, and the footer menu, and then on the right side, we have an image. So, you can get a sense for how we are going to chunk this up into a grid. We have a series of rows that we're going to need to put in place, and we'll build those rows out here with Bootstrap. I am going to show you how to do that now. All right. Let's go ahead and start building some code here. So, everything of course is going to go inside of these body tags.
Right now, we are just working with HTML, and we are working with Bootstrap. If you need to learn a little bit about Bootstrap's framework and the scaffolding, in particular, if you go to getbootstrap.com, you can read the documentation, or go watch my course Up and Running with Bootstrap, and I'll walk you through the process of working with that. I am going to start with the header of the document. This of course is where the site identification is going to go. And in HTML5, we have a tag for dealing with that, it's the header tag. So, I am going to go ahead and start by using that header tag. I am going to start with header, and then in Bootstrap, we need to give this a class of "row-fluid" and "row-fluid" is the containing element that's going to contain all of our content here inside of our header.
So, then inside of this, I am going to break this into two pieces. I am going to start with a div with a class of span4. And this side of the header is going to refer to just the picture, the logo side of this. So, I am going to go ahead and add that now. First of all, I am going to say <a href="/">. This is a link back to the homepage, so that when somebody clicks this logo, they can go back to the homepage. The link that I'm coding in here just by putting a slash in here indicates that it should go back to the root of the website. That is what that little bit of code there is doing.
Then I am going to add '<image src="' and then Dreamweaver gives me this handy little browse function. I can go ahead and go to my Images folder, and pick the first logo here, the one with the green and yellow and say OK. And then I'm going to put an alt tag always; so, alt="kinetECO, Inc., click for home. This is something I always like to do with my alt tags here. This is an accessibility thing.
So, of course first of all you always want to have the Alt tag, it's readable by search engines and so forth. And of course, I am going to include the name of the company in that alt tag. But I am adding the 'click for home' for those people who are using this website using a screen reader. Now they know what will happen if they click on this particular image. That's what the additional little bit of text is here for. And for screen readers, I've added a period at the end of that followed by a space so that if a screen reader happens to be reading this page, it will sound like a sentence as opposed to a few words that will run right on into the next few words.
The last thing I am going to do is I am going to apply a class to this particular image. So, that class is going to be "pull-left". This is a floating kind of thing. That is the way you float an image inside of Bootstrap. I am going to go ahead, and close my image tag, and I am going to close my link. And so, that's the end of the first part of that particular row. We have div with a class of span4. Now I need to add the second part of the row, so I am going to go ahead, and put in a div with a class of "span8" because of course 8 and 4 is 12, and Bootstrap has a 12 column grid.
What will ultimately go here is going to be the language switcher, the two little flags, and the search box. Both of those are modules, and there's really no point in me trying to recreate these at the HTML level. In the end, I am going to drop in a little bit of code that will call for those modules that will go in this spot. So, for right now, I'm just going to put-in some text that says 'Put language switcher and search here'. And that's just a placeholder, we'll go back and we'll replace that with actual code at some point in time later.
The next thing I need to code is my navigation bar. So, I am going to go ahead and add that now. This will have a div with a class of "row-fluid". That of course is always how you start a row in Bootstrap. And in this row of information, we are just going to have the navigation bar. So that will be nav, and it will have a class of "span12. I am actually going to come back to this later, and I'm going to be adding some more code where this is concerned.
But for right now, obviously this is where my module, that will be the main menu was going to go in the long run. So, I am just going to go ahead and say 'navigation goes here</nav>'; nav of course is an HTML5 tag that indicates where navigation is supposed to go and /div. In my next row, I need to have breadcrumb. So, I am going to go ahead and put that in, div with a class of once again "row-fluid" followed by a div with a class of "span12".
And of course this is where the breadcrumbs are going to go. The breadcrumbs are modules, so I'll just put in some placeholder text; 'breadcrumbs go here' and close that div. And I hit Return a few times, so that I move the code up here on the screen so you can see it better. Now, I have the part of the website that is the main body. So, I have the content on the left side of the screen, and I have some testimonials on the right side of the screen, at least on the homepage.
On some of the inside pages of this website, I don't have a right column. So we'll deal with that later. There are many, many videos to come. But for right now, let's just go ahead and rough this out. So, we are going to have a div with a class of once again "row-fluid". And inside of this div, we are going to have two areas here. So, I'm going to have a div with a class of "span9" 'This is where the content goes' and we'll have a div with a class of "span3" 'This is where the right column goes' So, think about those as big areas. Obviously the content is quite long and quite involved on some pages, but ultimately, it also comes out of Joomla! under one call, we say the component goes here, and then in the column over on the right side, we are just going to spell this out.
This is where the right columns goes. Any modules that you have assigned to the right column of the web page will go here. And as I said, we'll deal with what happens if we don't have a right column later on in some later videos. Then finally, we'll add a footer to this website. So, I am going to add my footer tag. And that will have a class once again of "row-fluid", and inside of this footer, we have two sides to the footer as well. So, I'm going to go ahead and put-in a div class of "span9".
I am just going to drop in a paragraph of information here. So, © is the code for a copyright symbol; 2012 KinetECO, Inc. All rights reserved. Now, I am hard-coding this into my template. I could certainly make a custom HTML module, and assign it to this position. That way, my client would be able to go in, and update that copyright statement if they wanted to.
That is the image that's going to go in my footer. So, I am going to go ahead and say 'image src="' once again browse for that inside of Dreamweaver. I can say alt="KinetECO, Inc." Just like I did before, I am going to give this a class of "pull-right" to float this to the right side of the screen. Close my image tag, close my div tag, and my footer tag is closed. So, there we go! We've just roughed out the entire grid here that we need to put together our web page.
We've called out where all the content is going to go. We've dropped some images in. If we look at this on the front end of the website, it's not really going to look all that fabulous. You see that we have an image for our logo; we have an image in the footer; we have a bunch of stuff here on the page. It never looks like much in Dreamweaver. But if I go ahead and say File>Save, I can preview this in my web browser by clicking the little globe icon here, and saying Preview in Firefox. And this is what the page looks like right now. Again, doesn't look like much, we have a lot of work left to do.
But at least we've roughed in where this content is going for the moment.
- Reviewing the graphic designs
- Creating HTML based on the Bootstrap framework
- Converting the HTML to a Joomla! template
- Installing the custom Joomla! template
- Using Firebug and the Firefox Web Developer Toolbar
- Styling the navigation bars
- Creating a dropdown menu
- Modifying the template for tablets and phones
- Working with advanced template features, like overrides