Figure 12-3: The standard version of the jQuery UI CSS file is easy to read.
Chapter 12
Understanding CSS for Libraries and Generators
In This Chapter
Discovering how libraries and generators use CSS
Viewing the CSS used by libraries and generators
Determining which elements to modify
Using modification aids
The third-party libraries and generators in this book have had one thing in common — they all rely on CSS in some way to accomplish their work. So far, the book has demonstrated that using CSS makes it possible to format page content and perform programming-like tasks. The third-party products you’ve examined all make your job easier by creating an environment in which you can focus on output, rather than on the means to obtain that output.
You’ve also been subject to the whims of each product’s developer because each product forces you to perform tasks in a specific way. This chapter helps you solve that problem, at least partially, by viewing and modifying the CSS used by these third-party products in order to see output in the way you’d prefer. For example, you might want to see rounded corners on controls, rather than square corners, and this chapter tells you how to make that sort of change. Of course, changes go beyond the visual to behavior so that you can obtain new functionality from existing libraries by augmenting the behaviors they provide.
Working with text-based programming environments makes it a lot easier for you to see how things work and then make modifications as needed. Browser-based applications are more accessible than compiled applications at the desktop (where the closed environment makes seeing how anything works nearly impossible). An open environment also makes it possible to find people (such as other developers) who will help you make modifications and even locate third party aids. The chapter helps you understand the need for community support when making changes to products — when enough people request a change, the change often gets incorporated into the product as a permanent feature.
The emphasis in this chapter is on modification and tweaking. Nudging a library or generator in a desired direction is completely different from rewriting it. When you find yourself spending a lot of time delving into third-party code, it’s time to think about whether the library or generator actually does meet your needs. There’s no lack of third-party products out there, so settling for a solution that doesn’t really meet your needs shouldn’t be an option. In addition, making too many modifications makes updating to the next version of the library cumbersome or impossible. Always work with the library or generator and make as few modifications or tweaks as needed to produce acceptable results.
Finding the CSS for a Library or Generator
There are a number of ways to find the CSS for a library or generator. The easiest way is for the developer to provide it to you directly. For example, when you work with jQuery UI, you must include a link to the CSS as part of using the library. This means you know where the CSS is located, and by viewing the URL, you can see how it works. As an example, check out the link for jQuery UI:
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
The href attribute points you to the CSS for the library. When you plug this URL into your browser, you see something like the code shown in Figure 12-1.
When a vendor doesn't provide the link to you directly, you can often find information about the product on another site. There's strong support from a variety of sources for tweaks on third-party libraries and generators. In many cases, all you really need to do is find the right support group, site, or forum (such as Stack Overflow, http://stackoverflow.com/)..
Your browser can also help you locate both the JavaScript and CSS used for a third-party product. Most browsers include a feature for viewing the page source. When working with Firefox, for instance, you right-click the page and choose View Page Source from the context menu. The source viewer will often turn references to external files into links that you can click and view.
Figure 12-1: Many libraries provide you with a link to the CSS used to give them a special look.
Unfortunately, the browser's source viewer might not be up to the task of telling you everything about the page. In this case, a third-party tool can help you locate and access both JavaScript and CSS files. For example, when working with Firefox, you can obtain a copy of JSView (http://jsview.softpedia.com/) — an add-on that will tell you which JavaScript and CSS files are attached to the current file (you can use this utility with Windows, Mac, and Linux systems). You can select the file you want to view from a drop-down list box, as shown in Figure 12-2. The figure shows the ExternalCSS.HTML example from Chapter 1; JSView correctly tells you that it has one CSS file attached, ExternalCSS.CSS.
Figure 12-2: JSView makes it possible to determine what is attached to the current page.
In order to view the CSS, you select its entry from the list. The code usually opens in whatever program your browser provides for viewing source code. Using a third-party tool like this makes it possible to locate all of the external links quickly and reliably. In addition, you can open more than one of the external links at a time.
It’s important to understand that real people, often individuals or small companies, create these libraries and generators. If you can’t find any other source of information about the library or generator — and really do need to make modifications or tweaks for some specific purpose — try contacting the makers of the product you’re using. They’re obviously interested in their product and would likely want to hear your ideas (a few won’t, but that’s the exception, rather than the rule). The best thing to remember is to try to locate another source of information first and only then ask for help from the product’s creator. However, don’t be afraid to contact the product’s creator — the worst that can happen is that the person will say no.
Viewing the CSS
Once you've found the CSS online, you'll want to view it. In at least some cases, the CSS will use plenty of white space and could include comments. For example, when you view the standard version of jquery-ui.css, you see a fully commented file with plenty of white space, as shown in Figure 12-3.
On the other hand, trying to view some JavaScript or CSS files can prove nearly impossible. For example, when viewing jquery-1.4.2.min.js, you see the mass of undecipherable text shown in Figure 12-4. The browser can read this text without any problem whatsoever, but any developer attempting to read it will encounter problems.
Figure 12-4: Some CSS and JavaScript files are not so easy to read.
You could handle the problem in a number of ways, but the easiest method is to use a third-party utility such as JavaScript Beautifier Online (http://jsbeautifier.org/). All you do is copy the code from the browser's code viewer, paste the code into the page, select the settings you want to use, and then wait a few seconds (often less) while the utility automatically adds whitespace so you can see what is happening with the code. Figure 12-5 shows the output from jquery-1.4.2.min.js. Even though this utility is called JavaScript Beautifier Online it works fine with all sorts of files. Just give it a try whenever you need to see packed source code.
After you make the code readable with a product such as JavaScript Beautifier Online, you can copy it out and place it on your local drive. As you work through the file you can add your own comments. The idea is to become thoroughly familiar with whatever code you’re working with before you make any decisions about modifications or tweaks. In addition, you need to be able to talk with anyone who knows more about the file in an intelligible manner.
Figure 12-5: Make the source code readable using a third-party utility.
Deciding What to Modify or Tweak
Some libraries and generators produce perfect (or close enough) results immediately and don’t require any sort of modification or tweaking, but the reality is that you don’t find them often enough. In many cases, you must make some sort of major change (a modification) or at least a small change (a tweak) for the library or generator to work as expected. For most developers, the issue of what to modify (or tweak) comes down to asking two important questions:
When should I modify? The answer to this question is based on a balance. You must decide whether the issue surrounding a particular library or generator is severe enough to cause users problems. Yes, there are fit and finish issues that you might consider, but the pressing matter is whether the problem is severe enough to cause delays in entering data or could cause the user to enter data incorrectly. The goal is to determine whether a problem will distract the user, or cause some other definable problem that could result in reduced productivity, increased security breaches, or significant down time.
How long should I modify? Once you determine that the problem must be fixed, you also need to consider how long to spend fixing it. Developers can experience problems with letting go of a problem after investing a significant amount of time in it. The goal of using a third-party library or generator is to save time. If you’re not saving time, then the library or generator simply isn’t a good fit for you and you need to look elsewhere. This may seem like a simplistic way to view things, but many projects are derailed when the developer fails to realize that the library or generator isn’t meeting the goals set for it by the developer.
Most developers will make certain kinds of modifications to libraries and to the output of generators because these changes are small, fast, and produce large returns in user efficiency. Here’s a list of the most common changes you find described in various places (both in books and online).
Graphical changes that make controls and other objects easier to use
Presentation modifications that make the selections or other functionality clearer
Content alterations that give the user precise selections or options
The one thing you want to avoid is making changes in how something works — making the library do something that it was never intended to do by modifying the base library code, rather than extending it or adding functionality through CSS changes. When you get to this point, you’re taking over for the library or generator developer and that’s a losing proposition for any developer. For one thing, you don’t have access to the developer’s source code. For another, you must keep the goal of working with the library or generator in mind so that you actually do save time.
Locating Modification Aids
Modification aids, tools or code that augment the base functionality of a library, come in many forms. You’ve already seen some of these aids in action in previous chapters. For example, Chapter 10 explores the use of ThemeRoller, which is merely a modification aid for jQuery UI in that it extends the functionality provided by jQuery UI. ThemeRoller is also a tool because it makes it possible to create something entirely new (in the form of unique themes) using a wizard-type interface. Some modifications require coding or other low-level techniques that appear in the chapters that follow this one. The following sections provide some pointers on finding and using modification aids that will meet your specific needs.
Searching for modification aids
Most of the modification aids you find are created by interested third parties who had a problem similar to the one you encountered. These third parties publish their answers to the problem so that you don’t have to reinvent the wheel. Of course, you have to be willing to look for the solution. Unfortunately, this requires spending some time with your favorite search engine, locating the solutions that might fit and then reading about them one at a time.
To reduce the time spent looking for solutions; make sure you define search terms carefully. In fact, it's important to consider the order of the search terms. Developing a technique and then trying several searches with it will eventually save you time and effort. For example, when working with Google, you can use the site: attribute in a search line to look for entries on your favorite site. If you want to look for something on Microsoft Developer Network (MSDN), you use search term site:msdn.microsoft.com to limit the search (where search term is the definition of the solution you need). The advanced search page (www.google.com/advanced_search) also provides access to a number of filters you can use.
Using other developer solutions
Some of the solutions you find are quite refined and combine controls to create a special setup. For example, look at the Ben's Sandbox solution (http://bseth99.github.io/projects/jquery-ui/3-jquery-ui-spinner-extensions.html) — shown in Figure 12-6 — for enhancing a jQuery UI Spinner with a Slider to make it easier for the user to see a specific selection range. Making changes like this will reduce the number of input errors that a user makes and will also reduce the time required to make the entry. Instead of typing numbers, the user can choose a number using the slider.
Developers are also constantly creating articles that will help you create some interesting modifications or tweaks of existing libraries of generators. For example, the article entitled, "Exploring the New jQuery UI Spinner – Beyond the Basics" at http://benknowscode.wordpress.com/2012/10/18/exploring-the-new-jquery-ui-spinner-beyond-the-basics/ describes how to define a spinner that displays letters instead of numbers, as shown in Figure 12-7.
Figure 12-6: Enhancements often involve combining controls.
Figure 12-7: Many articles you find will contain interesting ideas that you can use.
Notice that the spinner is at the top and bottom of the control. In fact, the spinner looks nothing like the jQuery version of the spinner, yet all you’re doing is modifying the CSS for the control. This particular example is so interesting that I describe it in more detail in Chapter 13 (and implement it in a different way).
It's important to realize that modification is a process. As a result, looking for articles that discuss this process is always a good idea. For example, the article entitled, "Tips for Developing jQuery UI 1.8 Widgets" (http://www.erichynds.com/blog/tips-for-developing-jquery-ui-widgets) helps you avoid the errors that many developers make when extending jQuery UI by creating a new widget.
Getting answers from other professionals
If you can't seem to find an answer anywhere for your question on how to perform a particular modification or tweak, there are many places where professionals go to get answers. One of the better places to ask is the Stack Overflow site (http://stackoverflow.com/). You generally get an answer quickly and the initial answers work quite a bit of the time (when an answer doesn't work, the forum members are usually interested enough to continue discussing your question).
Make sure you verify that the question hasn't been asked before by searching for it on the forum first. When using some of these forums, you need to define search criteria to ensure you find the answer as quickly as possible. When working on Stack Overflow, you define a set of tags at http://stackoverflow.com/tags to locate a specific answer.