UI Guidelines

These UI guidelines aim to showcase Countly UI elements and provide guidance for a consistent UI. All elements displayed here already have related CSS definitions, please consult this guide before creating a new element.
Contextual table rows Opened table Row (text above the table) font-size: 12px; (text above the table) font-color: #636363; (table head) background-color: #F3F3F3; (table head) height: 34px; (table head) font-size: 11px; (table head) font-color: #636363; (table head) text-transform: uppercase; (rows) height: 26px; (rows) background-color: #FFFFFF; (rows) font-size: 12px; (rows) font-color: #636363; background-color: #FFE4C9; This is a draggable icon. It has to be placed in the most left column. If you hover over the icon, there is a color change of the icon and mouse cursor changes to cross. (icon) font: FontAwesome; (icon name) fa fa-reorder event-order Lists with ordering If it’s necessary vertical tabs could be used. Preffered version is the horizontal one. Active tab Inactive tab This version of content tabs is used in Overview and Crashes. Vertical version is used in In-App purchases section. Dashboard tabs (label) font-size: 10px; (label) color: #666666; (label) text-transform: uppercase; (label) font-size: 10px; (label) color: #666666; (label) text-transform: uppercase; (number) 30px Oswald; (number) color: #333; (background) color: #FFFFFF; (number) 30px Oswald; (number) color: #666666; (background) color: #F9F9F9; This dropdown style is used for table editing. Items are left-aligned. Delete option should be always placed as the bottom item. Table edit dropdown (item) font-size: 13px; (item) color: #636363; (item) padding: 8px 20px; (box) padding: 10px 0; Top bar menu tooltip Retention tooltip Library used is tooltipster. Texts inside tooltips should be brief and short. Tooltips are shown on hovers, if it makes sense. Tooltips font-size: 12px; font-align: center; line-heigh: 18px; (font) color: #FFFFFF; background color: padding: 6px 14px; Push tooltip Times of Day tooltip For some plugins a grid view can be used. Grid is usually placed in the top-section of the plugin, in the place of chart. It should be responsive - if the window width is smaller, the grid transforms from 4 column to 3 column. Grid width: 300px; (headline) color: #636363; (headline) text-transform: uppercase; (headline) font-size: 14px; (headline) font-family: Ubuntu; (number) color: #3a3a3a; (number) font-size: 38px; (number) font-family: Oswald; (label) color: #636363; (label) font-size: 12px; (label) text-transform: uppercase; (label) font-family: Ubuntu; Notifications are used as an instant indicator of action success / fail. Notifications (subheadline) font-weight: 300; (subheadline) font-size: 14px; (subheadline) line-height: 19px; (subheadline) display: block; (subheadline) margin-top: 8px; (headline)color: #636363; (bottom text) font-size: 13px; (bottom text) line-height: 13px; (bottom text) display: block; (bottom text) color: #777; (bottom text) margin-top: 12px; Icons (green) ion-checkmark-circled (green) color: #2FA732; - if you want to use another icon, we can discuss it. Drawer examples