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

Setting up a starter page

From: CSS: Frameworks and Grids

Video: Setting up a starter page

Choosing a framework for using one for the first time can be daunting. There is often so much going on, it's hard to wrap your head around what the framework is going to take care of for you and what you are going to have to do on your own. That's why I recommend using a starter page as a way of seeing what the framework's default styling is like and then using it to identify holes that might exist in the framework's styling. So I have my default starter page opened here within the browser and right now currently it doesn't have any styling attached to it whatsoever. So what we're seeing is the browser's default styles, not any one particular framework's styles. And what I have done when I set the starter up, what I like to do is try to put down all the different elements that I might use within a site, so you will notice that I have at the very top of this, Headings and copy.

Setting up a starter page

Choosing a framework for using one for the first time can be daunting. There is often so much going on, it's hard to wrap your head around what the framework is going to take care of for you and what you are going to have to do on your own. That's why I recommend using a starter page as a way of seeing what the framework's default styling is like and then using it to identify holes that might exist in the framework's styling. So I have my default starter page opened here within the browser and right now currently it doesn't have any styling attached to it whatsoever. So what we're seeing is the browser's default styles, not any one particular framework's styles. And what I have done when I set the starter up, what I like to do is try to put down all the different elements that I might use within a site, so you will notice that I have at the very top of this, Headings and copy.

If I scroll down a little bit, I have some Inline level formatting where I tackle ems, strong, superscripts, site, mark, abbreviation, things like that to see how the framework might style those types of elements preformatted code. As we scroll down, we have all the different types of list that I might be using, form elements and structured the way that I like to structure them which is within list. So I want to see if there's any built-in mechanisms within the framework, for example, to handle forms that are styled with list, because if not, that means that I'm probably going to have to modify the framework a little bit in order to construct forms the way I like to construct them and then at the very bottom we have Tables.

So essentially it's just sort of putting everything that my site might be using in a very generic way up in a page and then I can attach the framework's styles to it kind of see how the framework formats it. So I am going to go back into my Code Editor and what I am going to do is just move over a framework's style sheet and then attach it to this page so that I can see exactly how it handles styling those elements. And for this exercise, we are going to use Foundation, and I have got a custom downloaded Foundation that I created from the Foundation website.

You're free to use that from the exercise files here, we are in the 04_01 directory, or you can do your own custom downloaded Foundation if you'd like, it doesn't really matter. You can see that within the directory structure of 04_01--and if you're not using a program like Dreamweaver that shows a file directory structure, you can just open this up in your Finder window or your Explorer window or whatever file directory browser you want to use. So I am going to go in, and I am going to grab the CSS file out of here, and I just need the foundation.css, I don't need the app, I don't need Foundation minified, and that's one of the things that when you download a framework, you will have to go through any of the styles that come with it and determine, okay, what are you styling, all right? Use just the grid, or use the typography? Some frameworks are going to break those all out in the separate files, some of them like Foundation are going to keep them in one single file. So you sort of have to know where all the styles are.

I am going to take this, and I am just going to copy this down into the sample page directory into the _css folder. So I am just going to copy it right over there. I could link to it from there, that'd be fine, but I want to make this a little bit more realistic, so I am just going to drop it into my _css folder and then link to it from there. So all I need to do now is create the link within the page. So I am going to go back into my sample code, and I am going to go ahead and build that out. So I am just going to do a link, and I am going to link to the file that I just copied over, so _css/foundation.css, go ahead and set its relationship as a stylesheet and finally, give it a type which with HTML5--I don't think I really need to do that, but you know, might as well be thorough.

So one more thing I want to do, I might be testing multiple frameworks out at any given time, I might have downloaded say five or six, and I might be trying to choose from them. So typically, what I'll do is I want to identify it. So I am going to take this little xxx placeholder that I have here and since this is Foundation, I am going to go ahead and modify that as well. Okay, cool. So I am going to save that, go back out to my browser, and then refresh the page and cool. Now I am seeing the styling that's coming directly from the Foundation framework and one of the nice things about this is I can kind of jump down and see how it's going to handle my headings, what the flow of the text looks like, what the default margins and padding looks like, how it handles this Inline Formatting, like preformatted code, block quotes.

I can see how it handles List, I can see within the form elements, the Form elements, they start to look nice, but I still see the bullet there, so there is no real styling that accounts for laying a form out with list. So I know that if I am going to use Foundation, I am going to have to account for that, and I can see the sort of default Table styling as well. Now one thing to keep in mind when you're using a starter page like this one is that it's not always going to represent a framework's entire styling capabilities. So we are just sort of seeing the very, very basic default styling. Occasionally a lot of the element styling within a framework is actually based around a specific structure or what classes that have been applied.

So if an element in my starter page here isn't structured the way that the framework is built to be styled for, or if I don't have special padding classes or other classes applied to it, you might not see the framework's actual styling being reflected in it. So you need to be aware of that, but even then this type of page is a perfect opportunity for you to kind of experiment with how a framework is put together. You can research how the framework's formatting works, you comply class attributes, modify elements structured to test out this framework capabilities and styling as well.

Now more than anything else, this type of page is going to give you a comprehensive set of elements to test against, and it's going to give you a broad overview into how the framework's styling works. And to sort of point that out in a much bigger way, if you look in the exercise files in the finished_files folder, you are going to find sample pages built with a number of different frameworks. So I have them all sort of located in here in folders that represent that particular framework. And if you open it up within a browser, you get a really nice feel for how these frameworks are going to handle the default styling of these types of elements. So here is the 1140 framework, this is the Aeon framework, Amazium, Base, Blueprint, Bootstrap, Foundation which we were just looking at, Goldilocks, the Gumby framework, which is another one of my favorite ones, Kube, the responsive grid framework and Titan.

So there's a bunch of different one in here and obviously you're free to go download as many frameworks as you want and attach the starter page to them. I would recommend building your own starter page, you can certainly use mine as a default one if you want, but go out and build your own, the way that you like to work and structure elements the way that you like to work with them. The thing that that's going to do is it's going to show you which frameworks sort of are most closely aligned to the way that you like to work and structure pages, it's also going to show you where you need to do a little bit of work on the framework and how you're going need to modify those styles. Before we move on, one more thing here, I want to mention that in this chapter, we are going to begin to experiment with creating and styling pages around a framework.

Now I want to caution you that the purpose of these exercises is to prepare you for some of the things that you are going to encounter as you start using frameworks, not to learn or to advocate any one specific framework. So although we are going to be using Foundation as our framework of choice, the exercises are really meant to be representative of any framework that you might work with. As such, we are not going to do to deep of a dive into Foundation itself, rather we're going to use it as a means of exploring framework workflow.

Show transcript

This video is part of

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

30 video lessons · 13772 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 preferences from 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.