Viewers: in countries Watching now:
Have you wondered if using a CSS framework will speed up your site development? In this course, senior author James Williamson introduces the types of frameworks available—including the most popular choices among working web developers—and provides an honest assessment of the pros and cons to using a framework. He guides you through downloading a framework, setting up a directory structure, and building a framework-based site, such as structuring the HTML and working with forms. A separate chapter explores layout grids, often included with CSS frameworks, which provide a simple system for laying out page content.
One of the hardest parts of using a framework is making the framework fit your preferred workflow. In many cases, you'll need to adjust what you're used to doing to work within the confines of the framework. In this exercise we're going to explore setting up an initial directory structure that takes into account personal preferences, as well as the needs of the framework. Now, there are two things that I want to make really clear here. One is that even though we're going to be using Foundation as the framework, this really applies to any framework that you could use.
So, if you're looking at another framework like YAML or Gumby or something like that just make sure that in terms of the directory structure, the concept of what we're talking about here really comes through because this really works with any framework. The other thing is I'm about to set a directory structure up the way that I like to work. That doesn't mean that it's going to be the way that you like to work. So, if I say hey, I'm going to do this with this folder, and this with this folder, and combine these files, that really means that it's just kind of like the way that I like to work, and the way that I like to develop sites. If you work with a different set of rules, then go ahead and do the same thing with the framework files.
But sort of set it up the way that you like to do it because in the end, that's really what's important that whatever framework you are working with fits your personal workflow as much as it can. Keep in mind also that a lot of frameworks out there only work if their files are related to each other in a certain way, or structured a certain way. So, it's sort of a double-edged thing. You need to be aware of how your workflow might influence your framework, and how the framework that you choose might also influence your workflow. I am in Dreamweaver here. You can do this within your explorer window or within a finder window on the Mac, or you can do it within any HTML editing tool or text editor that you might have if it has sort of built-in file management the way Dreamweaver does. Okay.
So it doesn't really matter where you do this if you're doing this along with me, or what program that you use. So, I'm actually looking in the 03_03 directory right now. It has a finished_files directory, but we're going to ignore that. We're just going to act like the Foundation folder is the only thing in here, because if you downloaded the Foundation framework, and expanded it, this is what you're going to see. Now, if I expand this directory, I can see inside of it we have the sample pages that we downloaded. There are a couple of text files in there. One is humans.txt, which is sort of a readme file.
The Foundation folder, if this is going to be your site's root directory, you don't need to do this. But if I have copied the Foundation package into an existing folder that's going to serve as my site's root, well then the Foundation folder itself becomes sort of extraneous and no longer needed. So what I am going to do is I am going to highlight all the files and folders inside that, and sort of drag them out into the root directory. And that's going to leave me with an empty Foundation folder that I can then go ahead and delete. So I am going to go ahead and get rid of that.
So essentially, I am just pulling up all those files out of the Foundation folder, and into the 03_03 directory, which is serving as the root directory for this particular site. The next thing I am going to do is just create a couple of directories. So, I am going to go back up to the root, and I am going to create a new folder. And this folder is going to be _assets. Now, for me, any folder that is not a subdirectory of my site always gets an underscore on the front end of it. It tells me two things, number one that it's not a subdirectory, and it's also going to cause it to show up at the top of any file name listing, so it's really easy to find.
Now, I am going to go ahead and create another directory. So I am going to right-click, and do another new folder, and this one is going to be _images. So, there are no images that download as a part of the Foundation framework, but any site that I work on, we can have images as well. So I will create an _images directory. Notice again the underscore goes along with that. So, _assets, going back to this folder for just a moment, when I'm developing sites and projects, I typically create an _assets folder that all the stuff that I use to build the site goes into, but that doesn't get uploaded.
So things like Photoshop files and Illustrator files, Word documents that clients have sent me, things like that. I always sort of organize them within the _assets directory. When I upload my site at runtime, this is the folder that gets cloaked. It doesn't actually get uploaded. So this is for my local development only, kind of is a one-stop place for me to organize all of the things that I use to build the actual site itself. And in terms of what we have existing within this framework, there aren't a lot of assets here, but there are a couple. So, what I am going to do is I am going to create another couple of folders inside of _assets.
So, the first folder I am going to create is I am going to go ahead and create a templates folder. Now, once I have a directory with underscore, I typically don't need to use underscore again. So it's just for root level directories that are not subdirectories. Inside the templates, I am going to put all of the starter HTML files, except for the index page. So, the store, sidebar, grid, contact, blog, all five of those, I am just going to drag them directly into the templates.
Now, you're going to note that one of the things I'm doing here is Dreamweaver is an incredibly powerful application. And as I move around files that are related to each other, meaning they have links out to resources like CSS files or links to other pages, Dreamweaver will go ahead and automagically update all those links for me as I move files around, which as a developer is just pure nirvana. I don't have to worry about maintaining link relationships. I can move files around and let Dreamweaver clean up the mess for me. Chances are most of you guys aren't using Dreamweaver or some of you won't be anyway.
So, I am going to click No because I am going to show you that if you're not using a tool like Dreamweaver that can do this for you, you're going to have to remember to do those things for yourself. So, I have got my Templates folder now, and it's populated. Next thing, I am going to go to my _assets, create a brand-new folder, and this is going to be documents. I almost always have a documents directory. And I'm just going to take the humans.txt, I am going to drag it in there. This is really more of a readme file. So it's just a way of sort of organizing that and getting it out of the way. Then I can close the _assets subdirectory. Now, what that means is those template files are there if I need to reference them, if I need to know how to create a certain type of layout, or if I want to reference for the syntax used for crafting layouts, they're in there for me.
And you will notice, for example, that I have all these guys here. So again, since I probably won't use these very often, but just because this is going to be sort of the starter template, if you will, I want that there just in case I decide to use these. I know it would be a lot quicker if I did a Find & Replace. And if you have that available to you, as I am sure you do, and whatever code editor or text editor that you're using, I would go ahead and recommend you using that, as a matter of fact, if you're using Dreamweaver, when you're moving around files and renaming directories, feel free to say updates instead of don't update.
You don't have to go down this road if you don't need to. All right, we're almost done. Just a couple of more left to do so that they're referencing the right place. There's one very easy way to test to make sure, and I am going to save this, that we were successful with renaming, reordering our directory structure, if I preview this page in a browser, the first thing I will notice is where the styles are working or not. Everything looks styled so that's fine.
Now finally, I want to mention that whether you're using the default directory structure that comes with whatever framework you're using, whether you're modifying it, or even integrating it with an existing directory structure, or you have already got a project going on, for example, this is one of the most critical steps when working with a framework. Setting up the initial directory structure correctly is massively important to the overall success and efficiency of the project. So, make sure you give it the proper focus and make sure that it's tailored to your own personal preferences.
There are currently no FAQs about CSS: Frameworks and Grids.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.