Skip to content

Commit

Permalink
fix(documentation): Fixed asset urls (#75)
Browse files Browse the repository at this point in the history
  • Loading branch information
AdrianDampc authored and fragsalat committed Aug 24, 2017
1 parent 4414003 commit 375e3c3
Showing 8 changed files with 83 additions and 34 deletions.
2 changes: 1 addition & 1 deletion doc/general/1-intro.md
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ Fabric Design System includes:
## How can I use it?
Although it is up to you, how you want to use Fabric DS, based on our experience and industry best practices, we prepared following procedure:

![How use Fabric](/img/intro1.svg)
![How use Fabric](/src/style/assets/intro1.svg)


##Resources
10 changes: 5 additions & 5 deletions doc/general/2-colors.md
Original file line number Diff line number Diff line change
@@ -3,31 +3,31 @@
## Colors in General
GUIs (Graphical User Interfaces) present their features and functions visually. Color is used sparingly to draw attention to important elements and those that we want the user to take action on.

![Colors in general](/img/colors1.png)
![Colors in general](/src/style/assets/colors1.png)


## System Colors
Fabric design system differs between the primary **Color Palettes** (system colors) and **Scheme Colors**.

The system colors (pure red, yellow, green and grays) are separated from other palettes, to provide a way to impart visual continuity, communicate status information, give feedback in response to user actions and help people visualize data. The easier it is to use your product and quickly scan information, the less mistakes your users might make.

![Colors in general](/img/checkmart.svg)
![Colors in general](/src/style/assets/checkmart.svg)
<label>Success</label>
<ul class="color-list">
<li style="background-color: #C9FFD1"><span class="text">$snowy-mint: #C9FFD1</span></li>
<li style="background-color: #A0EBA6"><span class="text">$madang: #A0EBA6</span></li>
<li style="background-color: #1EB234"><span class="text">$forest-green: #1EB234</span></li>
<li style="background-color: #188F2A"><span class="text">$kohpayam: #188F2A</span></li>
</ul>
![Colors in general](/img/forbidden-swtone.svg)
![Colors in general](/src/style/assets/forbidden-swtone.svg)
<label>Error</label>
<ul class="color-list">
<li style="background-color: #FFDDDB"><span class="text">$pippin: #FFDDDB</span></li>
<li style="background-color: #FA9585"><span class="text">$geraldine: #FA9585</span></li>
<li style="background-color: #F44F41"><span class="text">$flamingo: #F44F41</span></li>
<li style="background-color: #C74236"><span class="text">$mojo: #C74236</span></li>
</ul>
![Colors in general](/img/attention.svg)
![Colors in general](/src/style/assets/attention.svg)
<label>Attention</label>
<ul class="color-list">
<li style="background-color: #FFFFCF"><span class="text">$bulb: #FFFFCF</span></li>
@@ -186,4 +186,4 @@ Most of the application is gray, pops of color catch a user’s eye.
## How to use Scheme Colors
Each scheme palette owns 6 shades of a specific color. To offer a well balanced user interface, each color of the scheme is assigned to a specific function.

![Color Theme](/img/colors2.png)
![Color Theme](/src/style/assets/colors2.png)
12 changes: 6 additions & 6 deletions doc/general/3-spacing.md
Original file line number Diff line number Diff line change
@@ -40,25 +40,25 @@ XXXL, $space-xxl: 4rem
## Grid
Design System is using 24 column grid.

![Grid](/img/spacing1.svg)
![Grid](/src/style/assets/spacing1.svg)

Gutter (column padding) width is 0.5 rem (8 px) which means that distance between columns is 1 rem. Column size depends on screen size.

![Grid](/img/spacing2.svg)
![Grid](/src/style/assets/spacing2.svg)

During screen design Designer needs to decide how many columns is needed for content area.

![Grid](/img/spacing3.svg)
![Grid](/src/style/assets/spacing3.svg)

Designer should also remember that on smaller screens. He needs to:

![Grid](/img/spacing4.svg)
![Grid](/src/style/assets/spacing4.svg)

## Layout
1440 screen, 24 col, 0,5rem margin, 1rem gutter
![Grid](/img/spacing5.svg)
![Grid](/src/style/assets/spacing5.svg)

## Spatial Concept
Using insets, stacks and inlines will help to organise layouts in a harmonious way.

![Grid](/img/spatial-concept.svg)
![Grid](/src/style/assets/spatial-concept.svg)
2 changes: 1 addition & 1 deletion doc/general/4-typography.md
Original file line number Diff line number Diff line change
@@ -13,4 +13,4 @@ Typographic hierarchy is created by:

Most commonly these methods are used in combination with each other. Fabric uses the color **“fiord”** for its titles and labels to arise a slight differentiation from other values.

![Example](/img/typography1.png)
![Example](/src/style/assets/typography1.png)
12 changes: 6 additions & 6 deletions doc/general/5-navigation.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
# Navigation
Navigation structure and used elements highly depend on system **Information Architecture** structure. Think about it before you make decision about your navigation and menu structure.

![Example](/img/navigation1.svg)
![Example](/src/style/assets/navigation1.svg)


## Context Links
The most natural way to move through the system is a system of well placed context links that leads to proper place.

![Example](/img/navigation2.svg)
![Example](/src/style/assets/navigation2.svg)


## Menu Structure
First level

![Example](/img/navigation3.png)
![Example](/src/style/assets/navigation3.png)

Second level

![Example](/img/navigation4.png)
![Example](/src/style/assets/navigation4.png)


## Tabs
Tabs can be used to divide page content into sections. It should be used to show only content relevant to specific user actions.

![Example](/img/navigation5.png)
![Example](/src/style/assets/navigation5.png)


## Overlays
Layers are very efficient in showing detailed data or advanced actions without leaving current context. They should be considered as a standard way to show details in Fabric based products.

![Example](/img/navigation6.png)
![Example](/src/style/assets/navigation6.png)

More details in [Overlays](../#/general/7-overlays)
8 changes: 4 additions & 4 deletions doc/general/6-structure.md
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ Don’t:


## Sheet
<div style="width:700px; height:600px; background-color:white ;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.26);"></div>
<div class="card" style="width:700px; height:600px;"></div>

Basic view component. Every view need to be built by Sheet or Tile(s). Sheet can be sliced into smaller pieces through grid.

@@ -37,15 +37,15 @@ Don’t:


## Tile
<div style="width:300px; height:300px; background-color:white ;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.26);"></div>
<div class="card" style="width:300px; height:300px;"></div>

<div style="width:700px; height:300px; background-color:white ;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.26);"></div>
<div class="card" style="width:700px; height:300px;"></div>

Alternative main view component. Every view need to be built by Sheet or Tile(s). Number of used tiles depends on needs. Tiles can be merged into bigger tiles. Standard tile width is 6 grid columns (minimum 3 grid columns)


## Side Panels
<div style="width:250px; height:700px; background-color:white ;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.26);"></div>
<div class="card" style="width:250px; height:700px;"></div>

### Left Panel
Should be used only when it is reasonable need for menu or fixed filters panel.
22 changes: 11 additions & 11 deletions doc/general/7-overlays.md
Original file line number Diff line number Diff line change
@@ -9,50 +9,50 @@ Do not use it when:
## Details Layer
It is the default layer solution for most of Fabric use cases. It is a simple and subtle solution do show element details without hiding screen information.

![Example](/img/over-ex10.svg)
![Example](/src/style/assets/over-ex10.svg)
<p>Use it to show limited details data or additional action elements.</p>

![Example](/img/over-ex11.svg)
![Example](/src/style/assets/over-ex11.svg)
<p>For a bigger amount of data use <b>Full-page Layer</b> or <b>Side Panel</b>.</p>


## Modal Window
Should be used ONLY for task stopping events (like critical error).

![Example](/img/over-ex11.svg)
![Example](/src/style/assets/over-ex11.svg)
<p>Use it for crucial decisions that interfere user workflow.</p>

![Example](/img/over-ex7.svg)
![Example](/src/style/assets/over-ex7.svg)
<p>Use it for crucial information that break standard user workflow.</p>

![Example](/img/over-ex8.svg)
![Example](/src/style/assets/over-ex8.svg)
<p>Standard decisions and editions elements should be placed next to main data view or on <b>Details Layer</b></p>

![Example](/img/over-ex9.svg)
![Example](/src/style/assets/over-ex9.svg)
<p>For standard system feedback use <b>Notification system</b>.</p>

## Full-page Layer
Whole page content is hidden under it.

It should be used only if default page content is not needed when user is looking for layer info. It also shouldn’t be used for limited amount of information.

![Example](/img/over-ex4.svg)
![Example](/src/style/assets/over-ex4.svg)
<p>Use it when you need to focus additional information about element.</p>

![Example](/img/over-ex5.svg)
![Example](/src/style/assets/over-ex5.svg)
<p>For limited amount of data, use <b>Details Layer</b>.</p>


## Side Panel
Side layers can be used on the right (only for filters and navigation elements), left or bottom edge of the screen.

![Example](/img/over-ex1.svg)
![Example](/src/style/assets/over-ex1.svg)
<p>Use it when you need to show additional information about element without hiding the main data.</p>

![Example](/img/over-ex2.svg)
![Example](/src/style/assets/over-ex2.svg)
<p>For limited amount of data, use <b>Details Layer</b>.</p>

![Example](/img/over-ex3.svg)
![Example](/src/style/assets/over-ex3.svg)
<p>Additonal decision options should be placed on <b>Details Layer</b>.</p>


49 changes: 49 additions & 0 deletions doc/general/8-feedback.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# System Feedback
System feedback elements should be used to inform user about important system actions.

![Example](/src/style/assets/feed-ex1.jpg)
<p>Inform about finished/successful actions.</p>

![Example](/src/style/assets/feed-ex2.jpg)
<p>Inform about system errors.</p>

![Example](/src/style/assets/feed-ex3.jpg)
<p>Inform about input errors (ex. wrong data format).</p>

![Example](/src/style/assets/feed-ex4.jpg)
<p>Skip obvious information.</p>

## Feedback Categories
### Neutral
General information

<h3 style="color:#F44F41">Error</h3>
Information about system problem

<h3 style="color:#1EB234">Success</h3>
Information about successful or finished activity

<h3 style="color:#FF9C0F">Warning</h3>
Information about action that can be potentially harmful

## Feedback forms
### Contextual Feedback
It is short feedback (text, icon) shown next to the linked area when feedback action occurs. It can be show for a short time (ex. 3 seconds) or it can stay until it is relevant.

Option to provide feedback next to associated element should be considered as default. Consider alternatives only if contextual feedback is not possible or not linked with any screen area.

![Example](/src/style/assets/feedback1.jpg)

### Notifications
Used for general system feedback.

![Example](/src/style/assets/feedback2.jpg)

For more info, check [Notifications](../#/components/notification).

### Modal Window
Used when system feedback breaks user activity and using a system can’t be continued without getting an info or making a decision.

![Example](/src/style/assets/feedback3.jpg)

For more info, check [Overlays](../#/general/7-overlays).

0 comments on commit 375e3c3

Please sign in to comment.