This is an automated email from the ASF dual-hosted git repository.
andreww pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/royale-docs.git
The following commit(s) were added to refs/heads/master by this push:
new c7a3472 Update and rename styling.md to styles-skins-themes.md
c7a3472 is described below
commit c7a3472765d11f0d96e3adcbb67b0b677a8543db
Author: Andrew Wetmore <[email protected]>
AuthorDate: Sun Oct 11 11:15:47 2020 -0300
Update and rename styling.md to styles-skins-themes.md
Updated the file title and name, added a brief section on skinning, and
adjusted the layout.
---
features/{styling.md => styles-skins-themes.md} | 30 ++++++++++++++++---------
1 file changed, 19 insertions(+), 11 deletions(-)
diff --git a/features/styling.md b/features/styles-skins-themes.md
similarity index 65%
rename from features/styling.md
rename to features/styles-skins-themes.md
index 4c92184..83fc59b 100644
--- a/features/styling.md
+++ b/features/styles-skins-themes.md
@@ -15,16 +15,20 @@
# limitations under the License.
layout: docpage
-title: Styling
+title: Styles, skins and themes
description: Customizing the look and feel of your application
-permalink: /features/styling
+permalink: /features/styles-skins-themes
---
-# Styling
+# Styles, skins and themes
-Customizing the Look and Feel of your application
+Customizing the look and feel of your application
-Apache Royale can plug different style classes that can manage different
levels of styling features. Usually a Royale application will compose a Style
class at the Application bead level like this:
+Royale provides three features for adjusting the look and feel of your
application: styles, skins, and themes.
+
+## Styles
+
+You can plug different style classes into your Royale app that can manage
different levels of styling features. Usually a Royale application will include
a Style class at the Application bead level like this:
```mxml
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
@@ -36,11 +40,11 @@ Apache Royale can plug different style classes that can
manage different levels
...
```
-## Implementations
+### Implementations
- **SimpleCSSValuesImpl**: The SimpleCSSValuesImpl class implements a minimal
set of CSS lookup rules that is sufficient for most applications and is easily
implemented for SWFs. It does not support attribute selectors, descendant
selectors, or id selectors. It filters on a custom `-royale-swf` media query
but not other media queries. You can replace it in your app with other
implementations that handle more complex selector lookups.
-## Using Styles
+### Using Styles
- **SimpleCSSStyles**: Brings simple styles to Royale.
@@ -66,10 +70,14 @@ Apache Royale can plug different style classes that can
manage different levels
</js:PanelView>
```
-## Themes
+## Skins
-In Apache Royale, a theme is a predefined CSS file (and optionally other
assets like images) that holds the definitions of each component, so adding a
theme to your application or replacing the existing one will make your entire
application change all visuals like colors, fonts and drawings that make you
components and containers looks in a certain way.
+Skinning is a technique to change the appearance of a component by modifying
or extending its visual elements. Skins can have graphical elements like
images, or can use ActionScript classes that use the drawing API.
+
+_More information on skinning, with examples, is coming soon._
+
+## Themes
-In [Jewel](component-sets/jewel) UI Set styling and themeing is one of the key
concepts, you can learn more about it here:
+In Apache Royale, a theme is a predefined CSS file (and optionally other
assets like images) that holds the definitions of each component. When you add
a theme to your application or replace the existing one, all the visuals
(colors, fonts, lines, and drawings) in your your entire application change to
the new theme at once.
-- [Jewel Themes](component-sets/jewel/jewel-themes)
+In the [Jewel](component-sets/jewel) UI Set, themeing is one of the key
concepts. You can learn more about it here: [Jewel
Themes](component-sets/jewel/jewel-themes).
