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

Building a CSS framework using snippets libraries

From: Managing CSS in Dreamweaver

Video: Building a CSS framework using snippets libraries

When you're working with Snippet libraries, building them is really the hardest part. Using it to create site content is actually quite easy, and it should be, because those are the benefits of using snippets; they make building things a little bit easier. Now, how you build your site content with your Snippet libraries is going to depend on how you organized and structure your library and the amount of options that your specific library gives you. In this exercise, we are going to use our explore theme in CSS Snippet library that we've been building in the previous exercises to build the initial global styles and layout for the new site.

Building a CSS framework using snippets libraries

When you're working with Snippet libraries, building them is really the hardest part. Using it to create site content is actually quite easy, and it should be, because those are the benefits of using snippets; they make building things a little bit easier. Now, how you build your site content with your Snippet libraries is going to depend on how you organized and structure your library and the amount of options that your specific library gives you. In this exercise, we are going to use our explore theme in CSS Snippet library that we've been building in the previous exercises to build the initial global styles and layout for the new site.

So we are going to be working on a new project here, and all we really want is sort of a jumpstart to the project, do all of our global styles written, the layout specific styles written, then after that, we can go in and sort of style everything for the project. So it's going to be sort of a leg-up, if you will. So what we want to do is start with a brand-new CSS file. So I've defined the 03_07 folder as my root directory, but we need a brand-new CSS file. So I am going to say Create New, right here, CSS. I am going to go to File and choose Save.

I am going to go to the 03_07 CSS folder, and inside that I want to go ahead and name this main.css. Now, at this point, I'm just going to start structuring the CSS Styles document the same way that we would normally structure one. I am going to let the Snippets library assist me in doing that. So I am going to switch over to the Snippets panel, open the CSS folder, and again, I am looking for the Explore Theme that we were working on earlier. Now again, if you don't have this, please refer back to the earlier movies in this title where we were sharing snippets and importing the snippet library into Dreamweaver.

Okay, so the first thing I want to do is I want to go down to the Utilities, and I am going to go ahead and placethe header in our file. So I can get rid of this comment, we know it's a CSS file, and I am going to go to the Utilities > CSS Header and double-click that, and it's going to insert that into our document. I am just going to change a few things here, and make it specific for the new project. So I am going to say style sheet for Hansel & Petal, that's our new client, and I am just going to do version 1.0. I am not going to put a modify date on there, and I'll leave the copyright the way it was before. I'll go down to the next section, and I am going to use a section indicator.

That is something that's going to tell people that we are moving from one section to the other. Notice we have just got a generic section name here, and we are going to change that to global constants, and we'll just leave that indicator at ^1, because it is our first option. So your global constants are going to be the styles like your basic page elements, your headings, your paragraphs, your HTML items, things like that, and we have an entire directory for our Global Constants. So I am going to go ahead and open that up, and the first thing I am going to do is place my html and body reset. I use that a lot, and again, that just sort of clears out the default page margins and paddings that certain browsers might place.

So we all start from the same spot. Next thing I am going to do is go down to the next line and just hit Return, and I am going to open up my tags. Now here, I have some choices. I could use Arial, Tahoma, or a Georgia font stack, whichever one that I want. For the design, we're doing for the Hansel & Petal site, the Tahoma makes a little more sense. So I am just going to double-click that, and that's going to import my body. Now notice that I've got sort of a default background color. It's just white. So that's a perfect setup for importing a graphic to edit that style later on. So don't assume that your snippets are going to come in finished.

In this case, we just have a couple of options here that we could go ahead and change anytime that we want. Also, notice that this one has a top margin of 25 pixels, which is going to sort of push everything down the page a little bit. We're doing that because it's specific to the Explore layout, which is why it's in the Explore theme. I'm going to go down the next line, and I am going to go back to my utilities and add another section indicator, and here we are going to do a CSS reset. So I am just going to type in css reset, change my indicator to 2 instead of 1, and then below that I am going to go into my CSS Resets.

Now, I am going to close some of these folders. I don't like having a lot of folders open when working with this, because it's really easy to get confused. In my CSS Reset, I noticed I have three of them: Eric Meyer's, the limited reset that we did, and Yahoo Interface 3.0 Reset (YUI 3.0 Reset). If you go out on Google and search for CSS resets, you are going to find version after version after version of these things. But I am just going to use the limited reset that we've done, here we go, and we get that on the page. Below that, I am going to return to my Global Constants, and inside my Global Constants, I am going to follow up with basic elements, and then directly after that, notice I whenever I have to link, I can double-click link globals and get those in there as well.

So 81 lines of CSS already written, right on the page, doing what we need it to do, and we really haven't had to code a single thing yet. Now, if I'll scroll up a little bit, you are going to notice that the css reset kind of interrupts our global constants. It just sort of inserts itself in there. The reason for that is the cascade. We want to go ahead and clear those values out for elements, and then the selectors below that are sort of reestablishing those values. So the order that those styles come in is really, really important. So remember that when you are building your libraries, you still have to understand the structure of your pages.

You have to understand the order that the styles need to appear in, or you are going to be causing more harm than good. So really approach snippets from the standpoint of I really know what I am doing with this. I know the order that I need to assemble these in, and I am just going to give myself as many options as I need for this particular topic. Okay, we are almost done. What I am going to do now is after the last item, I am going to go ahead and add another separator, and this particular section is going to be global classes. We'll go ahead and do 3 for indicator there. Below that, we are going to go into our Global Classes folder, and I am going to add the global classes and the Call Out Classes.

I am just going to sort of not put in the IE Globals. There we go. So, all those are looking good. We have all of our individual global classes and we have our callouts. Now, notice what happened here. The callout is added to the same line as the closing one. Now actually, syntaxually, that's not going to hurt anything, but readability suffers there. So I am going to hit Return to take that down to this next line, and remember, the period must remain in front of that. So you want to be really careful. If you ever have to go in and edit where the CSS was placed, you want to be really, really, really careful with that.

Okay, just below that, we are going to go ahead and add another section indicator, and this is going to change to number 4. The section name here is going to be top-level layout styles. Here we go. Now, I can close this Global Classes and Global Constants, and I am going to open up the Layout Styles, so I can see what's going on here. Now, here I have two different screen resolutions that we can target: 1020 and 930. Hansel & Petal is going to use the 1020. So I am going to go ahead and open up my 1020 styles.

The first thing I am going to do is add the wrapper for a 1020 width, so notice that, again, neutral background can be changed to another color or a background image, centers it on the page, and the width is targeting 1020. I am going to hit Return to go down the next line, and I am going to open up my headers, and I am going to do a header for 100x600. So instead of the Explore California site, where we had just that really, tall thin header, we're going to have a really wide, short header, more of a banner type header in this particular layout. Directly after that, I am going to go over to my Layout Styles and add my top-level layout.

So these are all of the individual settings for sidebar, mainContent, mainNav, so all of their layout. Notice that this code is extremely stripped out. It's not presentation at all. It's just layout. That is all that's there. So I am going to go ahead and save this, and we are only going to need to make a couple of minor modifications to our styles in order for it to give us a starting point for the Hansel & Petal. So the first thing we want to do is I am going to go up to the very top of the page, find the tag here, and I am going to change the background color. So again, it's one of the nice things about it. Fff is neutral.

You'll never notice it, but it does give us a property that we can go ahead and edit. So what I am going to do here is edit this to a5bf94. So a5bf94. So now we have a solid background color that we are going to be using for our tag, and it relates a little bit more with the color scheme and the theme of the Hansel & Petal Web site. I am going to scroll down a little bit and find the header selector, which is going to be found right at about Line 138 in mine; yours might be in a little bit different location, but it's in those main layout styles.

So in order to keep these now in alphabetical order, I am going to go up to the first property and hit Return. It gives me a blank line here, and then I am just going to type in background, and after that, type in a u, and I am going to let code hinting do the rest for me. When it goes down to the link, I'll hit Return, and I get to browse. Now, I am going to go up to the 03_ 07 folder, I'll go up to the _images directory, and the only image I've got in there is this Hansel & Petal banner graphic, and that's what I want to use. I am going to go ahead and click OK, and I only want it to show one time, and I'll type in a semicolon. There we go. So I'll go ahead and save that, as well.

Finally, we have one more thing to do here. Because we are using the sort of longer, skinnier background image, the main page content and things like that need to sort of move down a little bit. So I am going to find this mainNav, and I am going to change a couple of things here. I am going to change top margin to 133, rather than 233. Then I am going to scroll down and find mainContent. It should be right below that. I am going to add a margin-top property to that and give that 100 pixels. So that's going to push the mainContent down just a little bit. Now I am going to go ahead and save this, and I want to go to my Files panel and open up start.htm.

Start page already has link to the main.CSS in it, and you can see, there's not much going on here. It's just some place holder content. Now I want to Save All, and I want to preview that in my browser. Let's take a look at it. To be honest, this page looks terrible. But that's okay. It's because we still need to do things like hide this header text up here. We're going to hide that. We've got to add padding and margins to page elements, control navigation style. You can see over here, we still have bullets showing up, and all those other presentation styles.

We still have a lot of them in our library. That, however, is not the point. The point is look how fast we created a two-column layout with a CSS Reset using our snippets library. If our Explore theme library had extensive presentation styles snippets, the rest of our job would be even easier. Having organized, well-structured snippet libraries enable you to rapidly build complex style sheets. Properly planned, snippet libraries can be an amazing time saver, helping you to get the foundation of your site out of the way quickly so you can have more time to focus on specific design elements.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20813 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 12s
    1. Welcome
      1m 10s
    2. Who is this course for?
      1m 5s
    3. Using the exercise files
      1m 57s
  2. 1h 21m
    1. Controlling CSS in Dreamweaver
      2m 34s
    2. Style formatting options
      4m 59s
    3. Controlling shorthand notation
      6m 9s
    4. Building a style-focused workspace
      6m 10s
    5. CSS Styles panel overview
      8m 18s
    6. The Properties Inspector
      6m 39s
    7. Creating styles visually
      11m 32s
    8. Hand-coding styles
      8m 15s
    9. Code hinting and code completion
      7m 11s
    10. Modifying styles visually
      5m 24s
    11. Using the Code Navigator
      4m 47s
    12. Using CSS Inspect
      9m 52s
  3. 1h 14m
    1. Structuring style sheets
      4m 52s
    2. Writing a style header
      2m 40s
    3. Building a color guide
      6m 5s
    4. Writing a style sheet table of contents
      8m 46s
    5. Creating sections for styles
      9m 10s
    6. Using the CSS Styles panel to organize styles
      10m 29s
    7. Resolving conflicts
      7m 3s
    8. Organizing style properties
      9m 33s
    9. Writing a CSS reset
      5m 20s
    10. Writing global classes
      3m 57s
    11. Creating a style guide
      6m 6s
  4. 1h 7m
    1. Preparing custom starter pages
      11m 32s
    2. Building custom starter pages
      10m 8s
    3. Working with code snippets
      9m 54s
    4. Writing snippets
      11m 30s
    5. Importing snippets
      6m 3s
    6. Understanding snippets libraries
      8m 11s
    7. Building a CSS framework using snippets libraries
      10m 36s
  5. 52m 15s
    1. Writing a print style sheet
      10m 3s
    2. Creating print-specific styles
      10m 45s
    3. Preparing modular styles
      4m 33s
    4. Creating modular style sheets
      7m 9s
    5. Checking browser compatibility
      6m 25s
    6. Using conditional comments for Internet Explorer
      6m 58s
    7. Optimizing CSS with Dreamweaver
      6m 22s
  6. 38s
    1. Goodbye
      38s

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 Managing CSS in Dreamweaver.

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.