Stylesheet Builder

Description

A new Style Builder is available for Alpha Anywhere Sass Styles. Alpha Anywhere styles that were released in older versions of Alpha Five (e.g. MobBlue, MobGreen, GrBlue, etc) are CSS styles. Newer styles (e.g. iOS, iOS7, AndroidLight, AndroidDark) are Sass styles.

Discussion

Alpha Anywhere Web Themes are defined using Sass syntax.

One huge advantage of Sass syntax is the ability to define variables for many of the setting in the stylesheet, especially colors. The Web Theme Builder allows you to adjust variables as well as modify and extend styles with additional classes, sub-themes, and more.

There are several ways to get to the Web Theme Builder. The easiest is to open the UX or Grid component and click the smart field button for Edit style in Style Builder property. This will open the Web Theme Builder for the style used by the component.

You can also select the Edit > Open Web Style Builder command from the menu when the Web Control Panel has focus to open the Web Theme Builder. When opened from the Web Projects Control Panel, you will be prompted to select an existing theme. If you choose to open a system style, Alpha Anywhere will prompt you to create a copy of the style prior to opening the Web Theme Builder. If you select a local or global style, the style will be opened without any additional prompts.

Customizing Web Themes 

The Web Theme Builder can be used to edit the following file types:

  • Style Tweaks
  • Inherited Styles
  • Sass Styles

The Web Theme Builder can be used to edit style tweaks, an Inherited style, or a Sass style. The Title bar in the Web Theme builder will indicate what type of file you are editing.

The Title bar for an Inherited Style. The style, Alpha2Coffee, inherits from the Alpha style.

Where are Styles Stored 

  • Style Tweaks 

    Style Tweaks are stored in the web root inside the css/StyleTweaks folder and are applied after the Sass style that they modify has been loaded. If a Web Theme has been tweaked, a folder of the same name as the style will found in the StyleTweaks directory containing a styleTweaks.json file. Do not edit the tweak file directly. Instead, use the Web Theme Builder or the Style sub-theme and CSS 'tweaks' property in the UX Component.

    For more information, see Style Tweaks.

    The Title bar for a Style Tweak.
  • Inherited Styles 

    Inherited Styles are either stored locally (the css folder in the web root) or globally (in the Shared Resources directory -- see Sass Styles below for more details) inside a folder with the same name as the Inherited style. Inside the style folder, you will find a styleInherit.json file. Do not edit the Inherited style files directly. Instead, use the Web Theme Builder.

    For more information, see Inherited Styles.

    The Title bar for an Inherited Style.
  • Sass Styles 

    Sass Styles are similar to CSS styles -- which were used in prior versions of Alpha Anywhere. They differ from CSS styles in that they allow the use of Sass markup. They are be stored in one of three places::

    Location
    Description
    system

    Styles are stored in the CSS folder in the executable folder -- these styles cannot be directly edited. If you want to edit a 'system' style, you must first make a 'local' or 'global' copy of the style. You will edit the copy of the style.

    local

    Styles are stored in the CSS folder in the Web Project folder

    global

    Styles are stored in a special folder that is visible to all web projects in your Workspace. The folder is called "Shared Resources" and is found in the WebProjects directory. For example, if your workspace is called "MyWorkspace", the global styles for the workspace would be found inside the "MyWorkspace.WebProjects/Shared Resources" directory.

  • If you try to edit a system style, you will be asked to make a copy of the style and save it as either a 'local' or 'global' style.

    When you make a copy of the style you can keep the same name as the source ('system') style, or you can give the style a new name. Since the local or global style is stored in a different folder than the system style, it is perfectly OK to use the same name as the source ('system') style. Be aware that if two styles of the same name exist, the most local style will be used -- e.g. a local style named 'Alpha' will be used in lieu of the 'Alpha' system style.

  • You can also create styles from scratch. This is done from within the Web Theme Builder using the File > New Style menu option. This will create a blank style that only contains the "General" part of the theme. Use the Select Part... dropdown to add the parts to your theme that you would like to style. Any part that is not defined will have no styling.

The Web Theme Builder Layout 

The Style Builder has two distinct modes:

Mode
Description
Adjust

Where you can adjust the Sass variables used in the style.

Code

Where you can directly adjust the Sass and CSS for the style and create new 'sub-themes' for different control types.

The tabs at the top on the screen allow you to switch between Adjust mode and Code mode.

  • Adjust Mode 

    The Adjust mode allows you to easily adjust the Sass variables in the style. For example, if you use the built-in Alpha stylesheet you will see that the predominant color in the style is a bright blue. By changing a single Sass variable, such as the Accent color, you can change the entire theme.

    Adjust Mode. The Accent Color has been changed to a darker blue.
  • Code Mode 

    Code Mode. The List part's base sub-theme is selected.
  • In Code mode the left side of the screen has a preview of the selected part on the top and the Sass/CSS on the bottom.

    The column on the right shows all of the "parts" defined in the stylesheet. Examples of "parts" include Textbox, Button, Accordion.

    For each object type one or more named sub-types can be defined. The sub-types are called 'sub-themes'. Generally, every "part" has at least one 'sub-theme' called 'base'. In the styles that ship with Alpha Anywhere, some parts only have a 'base' sub-theme. You can add as many sub-themes as you like to any part. Note that not all parts have a "Sub-theme" property available for setting the part's sub-theme.

    A sub-theme defines all of the CSS class names, icons, sizes, etc used to style the object.

    If you create a style by copying a system style, you will find a list of Sass variables located at the top of the Code window. You can adjust the variable values directly in the Code window or you can switch to Adjust mode to change the Sass variables.

Opening the Style Builder from a Component 

You can open the Style Builder directly from the UX and Grid component. The Edit style in Style Builder property appears directly below the 'Style name' property.

To learn more, watch the video below:

Style Builder

Web Themes are edited using the Web Theme Builder. You can easily adjust the entire appearance of a style by simply adjusting the Sass variables that control the style colors and you can also easily add new sub-themes for different control types.

In this video we show how you create a new style for buttons and we also show how the entire style can be changed from a 'blue' color to a 'green' color by editing a variable.

2016-03-26