Difference between revisions of "Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls"
| Line 9: | Line 9: | ||
=====Control Color Palette===== | =====Control Color Palette===== | ||
| + | The Sugar interface defines a strict palette for the control widgets, along with guidelines for using these colors for various states and control types. Custom controls should adhere to the same set of colors and associated rules in order to ensure that their behavior mimics those of the core Sugar controls, and can be easily inferred by those who are familiar with them. Though their name and primary uses define these colors, any color within the palette provided below may be used for various parts of your control where it doesn't interfere with the basic rules associated with them. | ||
| + | {|border=1 cellpadding=3 cellspacing=0 style="border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" | ||
| + | !style="background:#cccccc;"|Name!!style="background:#cccccc;"|Primary Uses!!style="background:#cccccc;"|Hex!!style="background:#cccccc;"|% Gray | ||
| + | |- | ||
| + | |Black||Palettes, Popups||#000000||100% | ||
| + | |- | ||
| + | |Toolbar Grey||Toolbars, Trays, Palette Groupings||#404040||75% | ||
| + | |- | ||
| + | |Button Grey||Default Button States||#808080||50% | ||
| + | |- | ||
| + | |Selection Grey||Selections, Panel Groupings||#A6A6A6||35% | ||
| + | |- | ||
| + | |Panel Grey||Panels, Desktop||#C0C0C0||25% | ||
| + | |- | ||
| + | |Text Field Grey||Text entry background||#E5E5E5||10% | ||
| + | |- | ||
| + | |White||Pressed states, multiline text areas||#FFFFFF||0% | ||
| + | |} | ||
=====Control Sizing===== | =====Control Sizing===== | ||
Revision as of 14:32, 1 May 2007
When to Use Custom Controls
We have created a set of control widgets to suit most basic needs for application development. Using these controls wherever possible ensures that the interfaces across activities remain consistent and clear, and also maintains the visual style of the interface. Nonetheless, their basic functionality may prove limiting in some cases, and we certainly hope to inspire new and exciting uses of the various capabilities of the laptops, including their collaborative nature, and don't want to stifle additional ideation and design. For this reason, we are providing a general set of guidelines for the creation of custom controls that match the visual style of Sugar and maintain some basic standards for compatibility and usability within the Sugar interface.
Before implementing a custom control, be sure that the need truly exists. In some cases, you may find that a combination of simpler controls may suffice. In other cases, more complex functionality can be accommodated though use of a palette. Additionally, be sure that the need is a functional one; Custom controls should have additional or different behavior that the current controls don't provide, and not simply define a different aesthetic for existing ones. Again, think carefully about the requirements for the control, and be sure that the functional need itself merits the work associated with creating the new control.
Control Color Palette
The Sugar interface defines a strict palette for the control widgets, along with guidelines for using these colors for various states and control types. Custom controls should adhere to the same set of colors and associated rules in order to ensure that their behavior mimics those of the core Sugar controls, and can be easily inferred by those who are familiar with them. Though their name and primary uses define these colors, any color within the palette provided below may be used for various parts of your control where it doesn't interfere with the basic rules associated with them.
| Name | Primary Uses | Hex | % Gray |
|---|---|---|---|
| Black | Palettes, Popups | #000000 | 100% |
| Toolbar Grey | Toolbars, Trays, Palette Groupings | #404040 | 75% |
| Button Grey | Default Button States | #808080 | 50% |
| Selection Grey | Selections, Panel Groupings | #A6A6A6 | 35% |
| Panel Grey | Panels, Desktop | #C0C0C0 | 25% |
| Text Field Grey | Text entry background | #E5E5E5 | 10% |
| White | Pressed states, multiline text areas | #FFFFFF | 0% |