Overview

Documentation

Overview

This module is for documenting the visual components/UX patterns used in your application. This module is a way to jumpstart the creation of your app or apps living style guide. The purpose of a living style guide is to provide your team with the how, when, and where instructions to use the various components that make up your application.

Description

This module has built in logic for organizing and managing the visual components of your application. For each component you can easily add a description, css code well, tips and warnings, and add multi-step details on how to build out your component

Typical usage scenario

A Living Style Guide (LSG) helps ensure that your visual components are being built consistently across your application. For instance if you have two developers each working on a different wizards in an application the LSG can give details on how that wizard should be built in the modeler.

Features and limitations

Create and manage your organizational categories and subcategories.Add details about your application’s brand.Easy to search style items.Use the new style items and follow the wizard instructions to create documentation for all of your apps components.This module inherits the styles of your application to automatically start to look like your appAnonymous and Admin user roles definedThis app does not manage your app’s theme

Configuration

1. Install the module in your project
2. Add LivingStyleGuide.Homepage to your navigation and the Default home page
3. Add sample data to the app. Under Settings > Runtime > After startup select, ASU_StubData

Branding

1. Click on the style guide editor dropdown on the top right and select “Brand Details”.
2. Click the browse button for the lead image to select your app’s logo. The lead image will be used as the Living Style Guide’s app logo in the top right and on the homepage.
3. Define up to 3 core values that embody the ethos of your applications brand and experience. Some examples would be inspiration, typography, and core users.
4. Under each Brand Value there is a spot for the title, description and image.

Organizing your Guide

Create categories and sub categories to organize the items in your guide.  The categories also serve as your primary navigation and the sub nav as your secondary navigation.

IMPORTANT: If you don’t set up Categories and Subcategories your style items will NOT display

Categories

1. Click on the style guide editor dropdown on the top right and select “Edit Categories”.
2. For each new Category you create the title is required, as it will serve as the  primary navigation in your app. SUGGESTION: If you are having trouble thinking of how organize your style item. Here are 4 starting categories to get you started:
   1. Functional Patterns:  These are UX patterns that showcase the functionality of your application. This can be as complex as a wizard or as simple as a button.
   2. Perceptual Patterns:  These patterns are the glue that hold the functional patterns together. They include the colors, typography and spacing
   3. Page Anatomy: These items help give your developers guidelines on how to construct different types of pages.
   4. CSS Classes: This last category is a less visual than others but will help your developers use these classes to  style your application with out the use of inline-styles
3. Create all Categories first before creating sub categories. You may need to refresh the page to see the category display as a nav item. NOTE: don’t worry about the order you can reorder once they are created.

Subcategories

NOTE: Every style item has to be linked to a subcategory to display.

1. After you create a Category go back to the Categories page and double click the category under which you would like to create a sub category.
2. Click the new button under the sub categories header.
3. Fill in the name, optional description, and change the category it falls under if you want.

Create Style Items

This section is where you will be spending most of your time.

New Item:

1. Click on the style guide editor dropdown on the top right and select “Add/Edit Styles”.
2. Click New under All Style Items header
3. Give your new style a name. When the Living Style Guide is in use this is the name your team can search for.
4. Describe this item in terms that would be most beneficial for your development team and upload an image of the item when the app is running. On this page you can also add quick bullet points of when it is best to use this item and tips when it’s best not to use this item.
5. New Item Step 3/4 is Optional.  If there is one more classes needed for this item to be shown drop this in the first field.If the item is made up of multiple modeler widgets you may want to consider creating one or more steps that detail how to create this item in the modeler. For each building step there is are fields for title, description, classes, and an image( a screenshot of the modeler works great here.)
6. The last page determines how this item will be displayed to your users. IMPORTANT: you must define the category and sub category in order for your item to display in the Guide.
7. Define how you want your item to be displayed by clicking one of the buttons. The preview area shows how it will display in the Guide.NOTE: For certain items that don’t require data, like buttons or headers you can select to show those items directly, by selecting HTML Render. For the HMTL render to work properly you need to use a class in step 3/4.