fork on github
Teleopti logo

Overview

0

This is a living styleguide and anyone is able to contribute, however any changes made will need to be considered with the main project in mind.
These guidelines are strongly inspired by Material design which have been implemented in Google inbox and Android

-

Main concepts

0.1
  • Consistency
    By making the users recognize elements and behaviors we make the product faster to use.
  • Less clicks
    Keep the number of clicks in mind when building a view.
  • Scalability
    Consider how things works with any number of data items, from S to XL
  • Help the user
    "Nature doesn't like empty space, and neither do users". Never provide an empty form but suggest things or display placeholders. When the user arrive to your view, dont present an empty state even if there are no items to show - instead provide friendly instructions on how to get started.
  • Performance
    Avoid big bunches of data which doesn't fit on the screen. Consider aggregating data as an entry point.
  • Responsiveness
    Using the containers and elements from this Styleguide should result in a layout that works on desktops, tablets and phones.

Other things to keep in mind

  • Number of actions
    Reduce the number of actions displayed at the same time. Maybe some of the less important ones can be hidden until needed? For example, split similar actions in a context menu into several menus so a user don't get overwhelmed
  • Loading
    If something takes time, dont leave the users in the dark. Display a loading bar, a spinner or a message.
  • Sorting, searching and filtering
    We want to provide good ways for the user to find what they are looking for. Sort large amounts of data alphabetically or chronologically by default but give the user the option to change sorting order. If we show a large set of data, provide a filter to narrow it down. If there is a large amount of data available but not visible, provide helpful search functionality to bring up what the user wants.
  • JQuery and Bootstrap
    SignalR depends on JQuery, we do not use JQuery for other purposes. We want to phase it out eventually. Datepickers and timepickers comes from bootstrap, these we would also like to phase out.
  • Help
    Help the user understand what their actions will do, what can be done in your module, how to quickly get up and running and let the know if something goes wrong. Add useful tooltips on elements providing more information (3/4 words max => "create a user" for an icon "+" for example) or remind users that they can find more information on the wiki page for each module.
-

Getting started

0.2

To quickly get started building a view we provide a guide and a few examples of how to combine elements and containers to create basic layouts.

Think about your view
  • - What actions can the user perform?
  • - How much data does it need to contain?
  • - Will there be subviews?
  • - How often will it be used?


Questions like this helps you understand what to build
Lets start building By now you should have some idea about what the view will do, so go ahead an add a View header. If you are building a subview (like a settings page or a form), you dont need a view header.
Flexible boxes Now that we have a heading, lets add the grid. The flex grid is used to contain things in neat boxes. The boxes will fill as much space as they can on each row: if you have one flex box, it will take 100% of the row, if you have two boxes they will take 50% each and so on.
Planned panels Inside each flex box of our grid we can now add panels. Panels can in turn contain any kind and number of elements. A panel is like a mini-version of the view structure; it needs to be analyzed, it has a header and you can add the flex grid inside it for layout. The panel can have header and footer actions, these should only apply to the panel content so that each panel is self contained and understandable.
Now what?
  • - Reflect on how each panel, element, container and flexbox works together
  • - Add details such as loaders and tooltips
  • - Think of where to put future features
  • - Share a screenshot of your view
    • To get a quick template of all this, copy the "basic layout" example below.

-

Basic layout

0.3.1
-

Show Hide markup 
                 <div class="view-header with-fab with-desc">
   <div class="view-title">
     <h1><i class="mdi mdi-cake"></i> Hello world</h1>
     <p>This module will do great things when it grows up</p>
   </div>
   <div class="fab-wrapper">
     <button class="wfm-fab  material-depth-1"><i class="mdi mdi-plus"></i>
       <md-tooltip>
         Get started
       </md-tooltip>
     </button>
   </div>
 </div>
 <div class="con-row">
   <div class="con-flex">
     <div class="panel material-depth-1">
       <div class="sub-header">
         <h2>A humble panel</h2>
         <div class="head-actions panel-menu">
           <div tabindex=0 class="context-menu card-context">
             <i class="mdi mdi-dots-vertical"></i>
           </div>
         </div>
       </div>
       <div class="con-row">
         <div class="con-flex">
           Panels can host any elements you want, just break it up using the layout grid (row/flex).
         </div>
       </div>
       <div class="con-row">
         <div class="con-flex">
         This is a flexbox
         </div>
         <div class="con-flex">
         This is also a flexbox
         </div>
       </div>
       <div class="con-footer">
         <button class="wfm-btn wfm-btn-invis-default">secondary</button>
         <button class="wfm-btn wfm-btn-invis-primary">main</button>
       </div>
     </div>
   </div>
 </div>

Hello world

This module will do great things when it grows up

A humble panel

Panels can host any elements you want, just break it up using the layout grid (row/flex).
This is a flexbox
This is also a flexbox