Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
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.