-
Notifications
You must be signed in to change notification settings - Fork 10
Styleguide
The Coastal Resilience styleguide arose out of a desire to align the look and feel of CR apps throughout the framework, in order to facilitate a smooth UI/UX and provide app developers with easy access to commonly used, styled components. The styleguide is composed of two resources, maintained by Azavea on the CR github:
http://coastalresiliencenetwork.github.io/GeositeFramework/
This page shows the styleguide components in the context of the framework, which enables developers to visualize what the component will look like in their apps. HTML for each component can be accessed by inspecting the element in the browser. This resource is helpful for:
- Browsing for nice-looking components to use in your app
- Evaluating component design in the context of the framework
Inspect the element markup and the associated classes to style your own elements similarly. The styles are added into the core framework, so they can be used directly, or a plugins custom CSS can be adapted to use the styles defined. Some custom jQuery UI components have not been included directly into the framework, as shown in the styleguide, but can be brought in directly by the app.
http://coastalresiliencenetwork.github.io/GeositeFramework/snippet_index.html
This page contains a list of CR components. HTML and CSS are shown and can be easily copied, ready to "drop into" an app. The "Class names and custom styles" and "Reserved class names" sections contain guidelines for implementing your own styles without conflicting with the framework.
The "in-context" styleguide and the "code-snippet" styleguide contain prominent links to one another. They both contain all of the same components.
Usage of styleguide components when building CR apps is highly encouraged in order to achieve consistent UI/UX across the framework. Some additional guidelines:
- Avoid adding additional libraries as much as possible
- Avoid using the reserved class names
An application using the styleguide components can be viewed at: http://dev.maps.protectingwater.org