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

Understanding snippets libraries

From: Managing CSS in Dreamweaver

Video: Understanding snippets libraries

Saving individual blocks of code as a snippet is a wonderful way to speed up coding in development. You can take the organization and scope of snippets even further by building Snippet libraries. Snippet libraries are organized collections of snippets built around a specific layout or element structure. While they take a little bit of work on the front end to build them, the ability that they give you to put together pages, or even entire sites, in minutes is well worth the time required to build them. Now in this movie we're going to examine the Explore Theme Snippet library that we imported in our last movie, and add some additional snippets.

Understanding snippets libraries

Saving individual blocks of code as a snippet is a wonderful way to speed up coding in development. You can take the organization and scope of snippets even further by building Snippet libraries. Snippet libraries are organized collections of snippets built around a specific layout or element structure. While they take a little bit of work on the front end to build them, the ability that they give you to put together pages, or even entire sites, in minutes is well worth the time required to build them. Now in this movie we're going to examine the Explore Theme Snippet library that we imported in our last movie, and add some additional snippets.

Now it's important that you have the starting library in place, so if you have not completed the previous exercise, please do so now before continuing with this movie. And I just want to switch over to my Snippets panel, and I can expand that out a little bit, so I can read these a little bit more and open up my Explore Theme. Now in the previous movie, we went over the structure of this in a little bit more detail, but I just want you to notice that there is a certain strategy behind how these styles are being separated out. And every single theme, or library, or project that you work on is going to be a little bit different.

Don't anticipate that you're going to be using the same structure every single time. What you should think about is if you're really trying to reuse your code, look at the project you're working on and imagine the pieces of that you can use in other projects. That will give you a good idea as to what organizational structure it needs to take. For example, inside the Explore Theme you'll notice we have several CSS Resets. We have Eric Meyer's famous Reset, we have own limited reset that we've used, and we have Yahoo's YUI 3.0 Reset. If you're going to Google search on CSS Resets, you're going to find pages and pages and pages of these guys that you can use, and you can build your own.

So I find it kind of handy, even within a theme, to have all those resets available so that when I create any project, I can just start using them. Our Forms is empty. We're going to take care of that in just a moment, but we have these Global Classes that we can use, our Global Constants that we can use. Notice that we have various Body tags, some that use Ariel, Tahoma the Georgia Font Stack. So we've got a lot of different things going on here. And outside of just the global things, we have specific Layout Styles targeting different screen resolution. We have different styles for the Home page. You'll notice that Navigation, we have some Base navigation styles, Home page navigation, Sub navigation, so if we're working a project, for example, that isn't going to use this Sub navigation styles, they're separated from the rest of them.

We don't have to worry about using those snippets to get started. That's the other thing that I want to point out. Please don't anticipate that you're going to be able to deliver a fully-realized CSS file from using snippets. What they really forced to speed the process up, just sort to get the base and the foundation in place, so that after you're done with that, you can go and style individual elements. Okay, well we're going to go ahead and continue to add some snippets to our libraries, and we're going to do that first by adding the Form styling that the Explore California Website uses. So we're going to add the form styling as part of our theme. So go over to your snippetSource.css.

This of course is a copy of the main. css file, and I'm going to scroll down a little bit to line 785. You'll find that on 785 our form styling begins. So what I'm going to do is I'm going to start, even with this comment on line 785. I'm going to select that, and I'm going to drag down and select all the way through line 852. You'll notice that is all of our global form styles. Directly underneath that, we have the individual form.

So first we're just going to take care of sort of the generic, sort of global form styles that any Explore California theme page is going to use. So with that selected, and notice we have a wide range of text selected, we're going to go ahead and right- click that and choose Create New Snippet. Now I've also highlighted the Forms folder, so if you haven't done that yet, just cancel out of that and go highlight that. So Create New Snippet. I'm going to go ahead and call this Global Form Styles, and my Description for this is going to be Global form styling for Explore Theme.

I also want to make sure it says Insert block, scroll through to make sure that everything has the closing curly brace, the proper opening curly brace and click OK. So it goes ahead and adds that over there and again I can preview that by highlighting the snippet and taking a look at it. Now I'm going to scroll down a little bit further to line 855. which is where our individual forms start, and I'm going to start with the support form so I'm just going to go ahead and take every single one of these guys out of here now. If I'm building another project, I now have three very distinct form looks: one that's using a multicolumn approach to forms, one that's using the more narrow form, one that's using sort of a basic, generic form.

So I'm going to have some options for these guys. So I'm going to start with the support form and highlight from 855 all the way down to line 902. You ought to be kind of careful about this. This thing will absolutely take off on you, if you let it. Make sure you get that closing color brace, and this should end right above the contact form. I'm going to go ahead and create a new snippet out of that. Notice that I just love right-clicking, and I think that's the easiest way to do it, so either right-click or Ctrl+click > Create New Snippet and we're going to go ahead and call this one Support Form Styles and the Description for this is Style for the support form in the Explore Theme.

Once again, we're going to Insert this as a block of code. Make sure you always do that. Preview is going to be set to Code. I'm going to make sure I got everything, and then we'll click OK. There is our next one. And next we're going to our contact form, so from line 904 to 940. Again, you may have to scroll back up a little bit. If you are like me, this thing it will absolutely take off on you. You want to make sure that it is just above the joint form, and you want to make sure you have everybody selected. So this is our contact form. We're going to go ahead and create a new snippet out of that. I'm going to call this Contact Form Styles.

The Descriptions that I'm going to give this one is Styling for the contact form in the Explore Theme. You can be a little bit more descriptive, if you would like. So we've going to make that Insert block. We're going to preview in Code and go ahead and click OK. And we have one last form to do. And this one is going to be the join form, so it starts at line 942. That's going to go all the way down to a 1002, so a good bit more going on here. And again, you can see it's just above the Sidebar, so line 1002, make sure you get that closing curly brace.

I'm going to convert that to a snippet as well, so I'll Create New Snippet. We're going to call this one Join Form Styles, and the Description for this one is going to be Styling for the join form in the Explore Theme. Once again, make sure this is Insert block, preview it in Code View and click OK. All right. So now we have all of our form styles over there. We have our Global Form Styles so we can use for pretty much everything.

Then we have the individual forms: Contact, Join and Support. Now you may have noticed that we didn't have to modify any of the styling of these styles. We just went and highlighted them and converted them and converted them. Depending upon the strategy of your library, you may want to strip out items, like background images or other presentational markup. Thankfully, we don't have any in our form styling, but in other places we did have to strip that information out. So in the case of our library, we would strip out any background images, but we would allow Color and Typography to remain as part of our theme. So you sort of set those ground rules very early on.

What is it that I want to be part of theme? What is it that I'm stripping out? What am I making neutral, and what am I keeping? And that's earlier strategy you need to take very early in the process. Now obviously this takes time, okay, but building an organized library around a specific design or a theme isn't only that hard to do. You'll obviously you want to take a good deal of time to think about how you're going to use this library. This will help you determine how it should be structured, when to provide snippet variations and how much detail your snippet code should have. Now that degree of planning will make you Snippet libraries easier to use and certainly make them more flexible in the long run.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20849 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.