Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Setting up a directory structure

From: CSS: Frameworks and Grids

Video: Setting up a directory structure

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.

Setting up a directory structure

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.

And then we have the robots.txt, which you can modify and update to tell search engines and other spiders what's going on with that site, whether they should index this site or these pages or not, that sort of thing. We also have all of our templates, we have our index starter page. We have two directories, one for the external JavaScript libraries, and another one for the external Style Sheets. So let's go about maybe modifying this directory structure to the way that I like to work. The first thing I am going to do is get rid sort of an unnecessary directory structure.

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.

I could even grab them and use them as a starter page, but they are not actually going to be part of the site deployment. The next thing that I'm going to do is I have to make a really big decision about style sheets and JavaScripts. Now, with most frameworks that you download, you're going to have multiple style sheets and maybe even a couple of JavaScript libraries. A lot of them will download popular libraries like jQuery or a Modernizr, that sort of thing. And one of the first things you want to do is double check and make sure they're using the most recent version of jQuery or the most recent version of Modernizr, you may even need to replace those.

But in terms of the directory structure, everybody always does their sites a little bit differently. One of the things I always like to take a look at is how people structure things. I have seen a lot of people combine CSS files and JavaScript files into a single folder and call them something like Resources. I don't typically do that. I really like to separate them. It's just easier from an organizational standpoint and certainly if you're on a team environment. However, these names aren't really going to work out for me because style sheets, it looks like it's a subdirectory of your site. So, I am going to click that name, and I am going to change that to _CSS.

Now again, Dreamweaver is going to prompt me, and I am just going to say Don't Update. Actually, if I wanted to save time, I would say Update, but I want to show you, for those of you that might be not using Dreamweaver, one of the ramifications of renaming these folders. Same thing for JavaScript. I am just going to go ahead a rename that one. I will do _scripts. Javascripts is cool and fun, but it's not entirely accurate. So again, I am not going to update. So now I have _css, _scripts, _assets, and _images. Perfect. I have my index.html file, which is really going to act as my sorter file.

I am going to open this file. And one of the things I am going to notice is I have some references to these external directories. If I scroll down, as a matter of fact, I can see that I have references to style sheets, Foundation minified, stylesheet apps, and the JavaScripts folder. So of course, those links to those resources is now broken. So one of the things I am going to need to do is I am going to need to go ahead and change those out. You'll also notice that there are a lot of options inside this index file. So, some of the references are even in comments. Now, since this is going to serve as a starter file for me--and in some projects I might need those, in some projects I don't--it's going to be very helpful for me to go ahead and change them everywhere.

So I am just going to take style sheets and change that to _css wherever it's found. I can do a Find & Replace here. I'm sure most applications that you guys use will have a Find & Replace. But there aren't that many of them. So I am just going to do it by hand. So again, for the style sheets, I am going to do _css, and make sure it's linking there. And for JavaScripts, I am going to go ahead and make sure that just says _scripts. And I have to do that wherever these guys might be found. So I am actually going to have to scroll down a little bit, because at the very bottom of the page, I have some JavaScript calls.

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.

The JavaScript is used for a lot of the demos here, so if the tabs are working, which they are, if the modal work window is working, which it is, then we were successful. So, we went ahead and did that. So looking over here at my directory structure, I now have a clean download of the framework that's organized the way that I like to work. This finished_files obviously has something to do with the fact that it's within exercise files. Just try to imagine that, that's not there. This is exactly how I would structure a new project. Now, I could at this point start building a brand-new project based off of this , or I could save it as a starting point for future projects just sort of organizing it the way that I like to use it so that I don't have to keep doing that every time I do a new Foundation-based project.

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.

Show transcript

This video is part of

Image for CSS: Frameworks and Grids
CSS: Frameworks and Grids

30 video lessons · 13417 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Frameworks and Grids.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.