how it works

1. Element
   • Skin
     • GraphicsSkin
     • Graphics
   • SkinState
   • Style
     • Selector
     • StyleProperty
2. StyleManager
3. Layout alignment
4. SVG

Element

• is an NSView
• Element has 3 parts: Skin, Style and State
• Every GUI component has 1 Element

Skin

There are 2 types of Skin classes:

1. GraphicsSkin
2. TextSkin (NSTextField)

GraphicsSkin

Is a NSView and has 1 or many Graphics classes

Graphics

The Graphics class is an NSView and has 2 CAShape classes attached:

1. LineShape
2. FillShape

There are 2 Shape layers so that we can update each one separately.

A core Graphic class is decorated to allow for many variations, Gradient, Solid, Translucent, with or without drop-shadow, SVGGraphic etc

Style

A style has Selectors, StyleProperties

1. A StyleProperty contains all the graphics attributes that can style a Skin
2. A Selector contains the address of which Element should be styled

SkinState

The state is just a string that changes over time when the user interacts with the Element. Can be overDownCheckedFocused etc. then the Element is styled accordingly, by looking for a style that matches this combination of states.

StyleManager

The StyleManager derives its styles by parsing a .css file It supports chain importing other .css files

Layout alignment

GUI components are aligned and positioned through .css layout rules. Float, clear, display etc. components can also be positioned manually with swift code.

SVG:

Multiple SVG vector graphics can be easily inserted in any Skin.