Web Code Globe Web Code Globe


Core Concepts

LibraryLibrary Library is a place where you create and manage colors, gradients, shadows and images. The behavior of these library items is tailored to the needs of user interface design. For example, you can use the same color in several graphic shapes. Later, if you adjust the color, all shapes using it are updated automatically. The same is also true for gradients, shadows and images.

This feature is extremely handy, because you can adjust the color scheme of the user interface you are designing easily and in one place.

Moreover, colors, gradients and shadows can form relationships. A new color can be derived from an existing one simply by using the built-in operations. Gradients and shadows can also be derived from colors in the library.

Tree of Colors, Gradients and Shadows

By taking advantage of this feature, you can define a whole family tree of colors, gradients and shadows that depend on a single (or more) basic colors. When you adjust this basic color, all library items and shapes that directly or indirectly depend on it are updated automatically:

Adjusted Tree of Colors, Gradients and Shadows

For example, if you are designing a set of colorful user interface controls, you can derive all necessary colors, gradients and shadows from a single basic color. By adjusting this basic color later, you can easily change the whole color scheme of your entire document:

The same set of controls with different color schemes


Each library item has a name. WebCode generates these names for you, but you can (and probably should) provide your own, more descriptive names for your colors, gradients and shadows. These names are used for source code generation. You can use spaces in your names - WebCode automatically converts “Button Base Color” to “buttonBaseColor”. It will also not allow you to use names that are already reserved for code generation purposes, so you do not have to worry about any potential name conflicts in the generated source code. Library items can be renamed in their respective adjusting popovers.

Using the Library

LibraryLibrary The Library is divided into 4 sections: Colors, Gradients, Shadows and Images. To add a new library item (color, gradient, shadow or image), click the “+” button at the top of the corresponding Library section.

To remove a library item, select the item from the item list by clicking on it and press the DELETE or BACKSPACE key. Alternatively, you can select the Delete item in the Edit menu. To adjust an existing library item, double click the item in the list. Alternatively, you can reselect the same library item in the Inspector popup button to show the editing popover.

Copy & Paste Behavior

When you copy and paste some shapes between documents, all necessary colors, gradients, shadows and images are automatically copied to the target document as well. If the target document already contains the necessary library items, these are reused instead.