<h2>List of Styles</h2>
<h3>Dimensions</h3>
<table style="border:1px solid black;">
<tr>
<td> Style </td>
<td> Purpose </td>
<td> Possible Values </td>
</tr>
<tr>
<td> title: </td>
<td> Sets the title of the application. Only available for Socks.app() </td>
<td> String </td>
</tr>
<tr>
<td> width: </td>
<td> Sets the width </td>
<td> Number (pixels) <br /> Percentage in String (‘100%’) <br /> ‘auto’ </td>
</tr>
<tr>
<td> height: </td>
<td> Sets the height </td>
<td> Number (pixels) <br /> Percentage in String (‘100%’) <br /> ‘auto’ </td>
</tr>
</table>
<h3>Layout and Positioning</h3>
<table style="border:1px solid black;">
<tr>
<td> top: </td>
<td> Absolute positioning: Distance from the top of its parent in pixels </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> left: </td>
<td> Absolute positioning: Distance from the left of its parent in pixels </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> right: </td>
<td> Absolute positioning: Distance from the right of its parent in pixels </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> bottom: </td>
<td> Absolute positioning: Distance from the bottom of its parent in pixels </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> displaceTop: </td>
<td> Relative positioning: Distance from the top of its original position in pixels </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> displaceLeft: </td>
<td> Relative positioning: Distance from the left of its original position in pixels </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> margin: </td>
<td> Sets margins of all four sides </td>
<td> Number (pixels) <br /> ‘auto’ </td>
</tr>
<tr>
<td> marginTop: <br /> margin: {top: } </td>
<td> Sets margin on the top </td>
<td> Number (pixels) <br /> ‘auto’ </td>
</tr>
<tr>
<td> marginLeft: <br /> margin: {left } </td>
<td> Sets margin on the left </td>
<td> Number (pixels) <br /> ‘auto’ </td>
</tr>
<tr>
<td> marginRight: <br /> margin: {right: } </td>
<td> Sets margin on the right </td>
<td> Number (pixels) <br /> ‘auto’ </td>
</tr>
<tr>
<td> marginBottom: <br /> margin: {bottom: } </td>
<td> Sets margin on the bottom </td>
<td> Number (pixels) <br /> ‘auto’ </td>
</tr>
<tr>
<td> paddingTop: <br /> padding: {top: } </td>
<td> Sets padding on the top </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> paddingLeft: <br /> padding: {left } </td>
<td> Sets padding on the left </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> paddingRight: <br /> padding: {right: } </td>
<td> Sets padding on the right </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> paddingBottom: <br /> padding: {bottom: } </td>
<td> Sets padding on the bottom </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> invisible: </td>
<td> If set to true, hides the element without affecting the surrounding layout </td>
<td> true <br /> false </td>
</tr>
<tr>
<td> hidden: </td>
<td> If set to true, hides the element and reclaim space (affects layout) </td>
<td> true <br /> false </td>
</tr>
<tr>
<td> scrollable: </td>
<td> If set to true and the content does not fit the slot, show scrollbar </td>
<td> true <br /> false </td>
</tr>
<tr>
<td> overflow: </td>
<td> If set to true, do not clip the overflowing content. </td>
<td> true <br /> false </td>
</tr>
</table>
<h3>Border</h3>
<table style="border:1px solid black;">
<tr>
<td> borderWidth: <br /> border: {width: } </td>
<td> Sets the border width for all four sides </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> borderColor: <br /> border: {color: } </td>
<td> Sets the border color for all four sides </td>
<td> Color </td>
</tr>
<tr>
<td> borderStyle: <br /> border: {style: } </td>
<td> Sets the style of the border for all four sides </td>
<td> ‘none’ <br /> ‘dotted’ <br /> ‘dashed’ <br /> ‘solid’ <br /> ‘double’ <br /> ‘groove’ <br /> ‘ridge’ <br /> ‘inset’ <br /> ‘outset’ </td>
</tr>
<tr>
<td> borderTop<style>: <br /> border: {top:{<style>: }} </td>
<td> Same as border, but only for top-side border. </td>
<td> See border* </td>
</tr>
<tr>
<td> borderLeft<style>: <br /> border: {left: {<style>: }} </td>
<td> Same as border, but only for left-side border. </td>
<td> See border* </td>
</tr>
<tr>
<td> borderRight<style>: <br /> border: {right: {<style>: }} </td>
<td> Same as border, but only for right-side border. </td>
<td> See border* </td>
</tr>
<tr>
<td> borderBottom<style>: <br /> border: {bottom:{<style>: }} </td>
<td> Same as border, but only for bottom-side border. </td>
<td> See border* </td>
</tr>
<tr>
<td> borderRadius: ♦ </td>
<td> Sets the radius for all four corners (for rounded corners) </td>
<td> Number(pixels) </td>
</tr>
<tr>
<td> borderRadiusTopLeft: ♦ </td>
<td> Sets the radius for top left corner </td>
<td> Number(pixels) </td>
</tr>
<tr>
<td> borderRadiusTopRight: ♦ </td>
<td> Sets the radius for top right corner </td>
<td> Number(pixels) </td>
</tr>
<tr>
<td> borderRadiusBottomLeft: ♦ </td>
<td> Sets the radius for bottom left corner </td>
<td> Number(pixels) </td>
</tr>
<tr>
<td> borderRadiusBottomRight: ♦ </td>
<td> Sets the radius for bottom right corner </td>
<td> Number(pixels) </td>
</tr>
<tr>
<td> outlineColor: <br /> outline: {color: } </td>
<td> Sets the outline color </td>
<td> Color </td>
</tr>
</table>
<table>
<tr>
<td> outlineWidth: <br /> outline: {width: } </td>
<td> Sets the outline width </td>
<td> Number(pixels) </td>
</tr>
<tr>
<td> outlineOffset: <br /> outline: {offset: } </td>
<td> Sets the offset distance between itself and the outline </td>
<td> Number(pixels) </td>
</tr>
<tr>
<td> outlineStyle: <br /> outline: {style: } </td>
<td> Sets the style of the outline </td>
<td> ‘none’ <br /> ‘dotted’ <br /> ‘dashed’ <br /> ‘solid’ <br /> ‘double’ <br /> ‘groove’ <br /> ‘ridge’ <br /> ‘inset’ <br /> ‘outset’ </td>
</tr>
</table>
<h3>Effects</h3>
<table style="border:1px solid black;">
<tr>
<td> opacity: ♦ </td>
<td> Sets the opacity (translucency) </td>
<td> Number between 0 to 1 </td>
</tr>
<tr>
<td> boxShadow: {top: } ♦ </td>
<td> Sets the distance from the top-most pixel of the element to the shadow in pixels </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> boxShadow: {left: } ♦ </td>
<td> Sets the distance from the left-most pixel of the element to the shadow in pixels </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> boxShadow: {blur: } ♦ </td>
<td> Sets the blurriness of the shadow in pixels </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> boxShadow: {color: } ♦ </td>
<td> Sets the color of the shadow </td>
<td> Color </td>
</tr>
</table>
<h3>Background</h3>
<table style="border:1px solid black;">
<tr>
<td> backgroundFixed: <br /> background: {fixed: } </td>
<td> If set to true, the background is fixed (does not move when scrolled) </td>
<td> true <br /> false </td>
</tr>
<tr>
<td> backgroundColor: <br /> background: {color: } </td>
<td> Sets the color of the background </td>
<td> Color </td>
</tr>
<tr>
<td> backgroundImage: <br /> background: {image: } </td>
<td> Sets the image to be used for the </td>
<td> background <span class="caps">URL</span> of the image </td>
</tr>
<tr>
<td> backgroundPosition: <br /> background: {position: } </td>
<td> Sets the position of the background </td>
<td> ‘top left’ <br /> ‘top center’ <br /> ‘top right’ <br /> ‘center left’ <br /> ‘center center’ <br /> ‘center right’ <br /> ‘bottom left’ <br /> ‘bottom center’ <br /> ‘bottom right’ <br /> ‘Number Number’ (x y) </td>
</tr>
<tr>
<td> backgroundRepeat: <br /> background: {repeat: } </td>
<td> Sets how the background should repeat </td>
<td> ‘repeat’ <br /> ‘repeat-x’, ‘x’ <br /> ‘repeat-y’, ‘y’ <br /> ‘no-repeat’, ‘no’ </td>
</tr>
</table>
<h3>Typography</h3>
<table style="border:1px solid black;">
<tr>
<td> textColor: <br /> text: {color: } </td>
<td> Sets the color of the text </td>
<td> Color </td>
</tr>
<tr>
<td> textAlign: <br /> text: {align: } </td>
<td> Sets the alignment of the text </td>
<td> ‘right’ <br /> ‘center’ <br /> ‘justify’ </td>
</tr>
<tr>
<td> textUnderline: <br /> text: {underline: } </td>
<td> If set to true, draws underline </td>
<td> true <br /> false </td>
</tr>
<tr>
<td> textOverline: <br /> text: {overline: } </td>
<td> If set to true, draws overline </td>
<td> true <br /> false </td>
</tr>
<tr>
<td> textStrikethrough: <br /> text: {strikethrough: } </td>
<td> If set to true, draws strikethrough </td>
<td> true <br /> false </td>
</tr>
<tr>
<td> textIndent: <br /> text: {indent: } </td>
<td> Sets the indentation of the first line of text </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> textShadow:{top: } ♦ <br /> text: {shadow:{ top: }} ♦ </td>
<td> Sets the distance from its top to the text shadow in pixels </td>
<td> Number(pixels) </td>
</tr>
<tr>
<td> textShadow:{left: } ♦ <br /> text: {shadow:{ left: }} ♦ </td>
<td> Sets the distance from its left to the text shadow in pixels </td>
<td> Number(pixels) </td>
</tr>
<tr>
<td> textShadow:{blur: } ♦ <br /> text: {shadow:{ blur: }} ♦ </td>
<td> Sets the blurriness of the text shadow in pixels </td>
<td> Number(pixels) </td>
</tr>
<tr>
<td> textShadow:{color: } ♦ <br /> text: {shadow:{ color: }} ♦ </td>
<td> Sets the color of the text shadow </td>
<td> Color </td>
</tr>
<tr>
<td> textTransform: <br /> text: {transform: } </td>
<td> Sets how the text should be transformed </td>
<td> ‘none’ <br /> ‘capitalize’ <br /> ‘uppercase’ <br /> ‘lowercase’ </td>
</tr>
<tr>
<td> textLeading: <br /> text: {leading: } </td>
<td> Sets the height of the lines </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> textKerning: <br /> text: {kerning: } </td>
<td> Sets the spacing between characters </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> textWordSpacing: <br /> text: {wordSpacing: } </td>
<td> Sets the spacing between words </td>
<td> Number (pixels) </td>
</tr>
<tr>
<td> textPreserveWhitespace: <br /> text: {preserveWhitespace: } </td>
<td> If set to true, the extraneous whitespaces in the text are preserved </td>
<td> true <br /> false </td>
</tr>
<tr>
<td> textNoWrap: <br /> text: {noWrap: } </td>
<td> If set to true, the text does not wrap to the next line </td>
<td> true <br /> false </td>
</tr>
<tr>
<td> fontSize: <br /> font: {size: } </td>
<td> Sets the size of the font </td>
<td> Number (pixels) <br /> In points (e.g. ‘12pt’) <br /> In ems (e.g. ‘1.2em’) </td>
</tr>
<tr>
<td> fontFamily: <br /> font: {family: } </td>
<td> Sets the font used </td>
<td> Font name (e.g. ‘Arial’) <br /> ‘serif’ <br /> ‘sans-serif’ <br /> ‘cursive’ <br /> ‘fantasy’ <br /> ‘monospace’ </td>
</tr>
<tr>
<td> fontStyle: <br /> font: {style: } </td>
<td> Sets the style of the font <br /> ‘normal’ <br /> ‘italic’ <br /> ‘oblique’ </td>
</tr>
<tr>
<td> fontVariant: <br /> font: {variant: } </td>
<td> Sets the variant of the font <br /> ‘normal’ <br /> ‘small-caps’ </td>
</tr>
<tr>
<td> fontWeight: <br /> font: {weight: } </td>
<td> Sets the weight of the font </td>
<td> ‘normal’ <br /> ‘bold’ <br /> ‘bolder’ <br /> ‘lighter’ </td>
</tr>
<tr>
<td> verticalAlign: </td>
<td> Sets the vertical alignment of the text </td>
<td> ‘baseline’ <br /> ‘sub’ <br /> ‘super’ <br /> ‘top’ <br /> ‘text-top’ <br /> ‘middle’ <br /> ‘bottom’ <br /> ‘text-bottom’ </td>
</tr>
</table>
<p>Styles marked with ♦ may not be supported by all browsers. In such cases, the style is simply ignored.</p>
<h2>Color</h2>
<p>There are three ways to represent color in Socks. You can use predefined color keywords or represent the <span class="caps">RGB</span> values in either integer form (‘rgb(0, 0, 0)’) or hexadecimal form (‘#<span class="caps">FFFFFF</span>’).</p>
<table style="border:1px solid black;">
<tr>
<td> </td>
<td> Equivalent <span class="caps">RGB</span> </td>
<td> </td>
</tr>
<tr>
<td> Color Keyword </td>
<td> In integer form </td>
<td> In hexadecimal form </td>
</tr>
<tr>
<td> ‘maroon’ </td>
<td> ‘rgb(128,0,0)’ </td>
<td> ‘#800000’ </td>
</tr>
<tr>
<td> ‘red’ </td>
<td> ‘rgb(255,0,0)’ </td>
<td> ‘#ff0000’ or #f00’ </td>
</tr>
<tr>
<td> ‘yellow’ </td>
<td> ‘rgb(255,255,0)’ </td>
<td> ‘#ffff00’ or #ff0’ </td>
</tr>
<tr>
<td> ‘olive’ </td>
<td> ‘rgb(128,128,0)’ </td>
<td> ‘#808000’ </td>
</tr>
<tr>
<td> ‘purple’ </td>
<td> ‘rgb(128,0,128)’ </td>
<td> ‘#800080’ </td>
</tr>
<tr>
<td> ‘fuchsia’ </td>
<td> ‘rgb(255,0,255)’ </td>
<td> ‘#ff00ff’ or ‘#f0f’ </td>
</tr>
<tr>
<td> ‘white’ </td>
<td> ‘rgb(255,255,255)’ </td>
<td> ‘#ffffff’ or ‘#fff’ </td>
</tr>
<tr>
<td> ‘lime’ </td>
<td> ‘rgb(0,255,0)’ </td>
<td> ‘#00ff00’ or ‘#0f0’ </td>
</tr>
<tr>
<td> ‘green’ </td>
<td> ‘rgb(0,128,0)’ </td>
<td> ‘#008000’ </td>
</tr>
<tr>
<td> ‘navy’ </td>
<td> ‘rgb(0,0,128)’ </td>
<td> ‘#000080’ </td>
</tr>
<tr>
<td> ’ blue’ </td>
<td> ‘rgb(0,0,255)’ </td>
<td> ‘#0000ff’ or ‘#00f’ </td>
</tr>
<tr>
<td> ‘aqua’ </td>
<td> ‘rgb(0,255,255)’ </td>
<td> ‘#00ffff’ or ‘#0ff’ </td>
</tr>
<tr>
<td> ‘teal’ </td>
<td> ‘rgb(0,128,128)’ </td>
<td> ‘#008080’ </td>
</tr>
<tr>
<td> ‘black’ </td>
<td> ‘rgb(0,0,0)’ </td>
<td> ‘#000000’ or ‘#000’ </td>
</tr>
<tr>
<td> ‘silver’ </td>
<td> ‘rgb(192,192,192)’ </td>
<td> ‘#c0c0c0’ </td>
</tr>
<tr>
<td> ‘gray’ </td>
<td> ‘rgb(128,128,128)’ </td>
<td> ‘#808080’ </td>
</tr>
<tr>
<td> ‘orange’ </td>
<td> ‘rgb(255,165,0)’ </td>
<td> ‘#ffa500’ </td>
</tr>
</table>
2009-11-26T07:17:36-08:00
185557
styles
76744
Styles
2009-05-17T12:39:30-07:00
30173