Skip to content

Latest commit

 

History

History
101 lines (76 loc) · 7.1 KB

design_document.md

File metadata and controls

101 lines (76 loc) · 7.1 KB
Raw

Design guidelines for Expertiza

This document provides the common design features to be followed while developing or refactoring views in the Expertiza environment.

Icon Library

Icons are available in 4 sizes : 16, 24, 32, 48. It is possibility that we might not have all sizes for all icons. Edit the number as per size chose, everything else will remain same.

Sr. No. Element Name Image Guide
1 Add assignment Add Assignment To add 'add assignment' icon, use path /assets/tree_view/add-assignment-24.png
2 Add Teaching assistant Add TA To add 'add TA' icon, use path /assets/tree_view/add-ta-24.png
3 Add Private Add Private To add 'add private' icon, use path /assets/tree_view/add-private-24.png
4 Add Public Add Public To add 'add public' icon, use path /assets/tree_view/add-public-24.png
5 Add Signup Sheet Add Signup sheet To add 'add signup sheet' icon, use path /assets/tree_view/add-signup-sheet-24.png
6 Assign Course Blue Assign Course Blue To add 'Assign Course Blue' icon, use path /assets/tree_view/add-course-blue-24.png
7 Assign Course Green Assign Course Green To add 'Assign Course Green' icon, use path /assets/tree_view/add-course-green-24.png
8 Assign survey to Assign survey to To add 'Assign survey to' icon, use path /assets/tree_view/assign-survey-24.png
9 Copy Copy To add "Copy" icon, use path /assets/tree_view/Copy-icon-24.png
10 Create Team Create Team To add 'Create Team' icon, use path /assets/tree_view/create-teams-24.png
11 Delete Delete To add "Delete" icon, use path /assets/tree_view/delete-icon-24.png
12 (General) Edit Edit To add "Edit" icon, use path /assets/tree_view/edit-icon-24.png
13 Edit Signup sheet Edit Signup sheet To add "Edit Signup sheet" icon, use path /assets/tree_view/edit-signup-sheet-24.png
14 List All List All To add "List All" icon, add class as "glyphicon glyphicon-list-alt"
15 List Submissions List Submissions To add "List Submissions" icon, use path /assets/tree_view/List-submisstions-24.png
16 Make public from private Make public from private To add "Make public from private" icon, use path /assets/tree_view/lock-off-disabled-icon-24.png
17 Private Private To add "Private" icon, use path /assets/tree_view/lock-disabled-icon-24.png
18 Remove from Course Remove from Course To add "Remove from Course" icon, use path /assets/tree_view/remove-from-course-24.png
19 Run Lottery Run Lottery To add "Run Lottery" icon, use path /assets/tree_view/run-lottery.png
20 Search in data Search in data To add "Search in data" icon, use path /assets/tree_view/view-publish-rights-24.png
21 View Review Report View Review Report To add "View Review Report " icon, use path /assets/tree_view/view-review-report-24.png
22 View Scores View Scores To add "View Score" icon, use path /assets/tree_view/view-scores-24.png
23 View Suggestions View Suggestions To add "View Suggestions" icon, use path /assets/tree_view/view-suggestion-24.png
24 View Survey View Survey To add "View Survey" icon, use path /assets/tree_view/view-survey-24.png

Buttons :

Sr. No. Element Name Image Guide Class
1 Button - Default style to be added Default button btn btn-default btn-md
2 Button - Success style to be added For accepting. btn btn-success btn-md
3 Button - Danger style to be added For rejecting. btn btn-danger btn-md
4 Button - New style to be added For create buttons alone. btn btn-primary pull-right new-button btn-md

Tables :

For the tables, we recommend using bootstrap table class to make tables looks unified. We already include bootstrap reference, feel free to reference that table styles. For react.js tables, we can still use react-bootstrap-table to make tables unified.

The class to be used in a table tag is table table-striped.

Notifications :

Sr. No. Element Name Image Guide
1 Success to be added For notification, add class as flash_note alert alert-success
2 Error to be added For notification, add class as flash_note alert alert-danger
3 Info to be added For notification, add class as flash_note alert alert-info
3 Warn to be added For notification, add class as flash_note alert alert-warning

Text :

  • General Font name: verdana,arial,helvetica,sans-serif

  • Headings Headings/ Main title of page should be given in <h2>Title</h2> tag

  • Font Size

    • font size of 13 px
    • line height 30px
    • (will be automatically applied)

  • Content Headings <h2>Title</h2>

  • Content Subheadings

    • font size of 1.2 em
    • line height 18px
    • (will be automatically applied)

  • Table data

    • font size of 15 px
    • line height 1.428 em
    • (will be applied autamatically)

  • Color

    • Menu bar - #FFFFFF; //for menubar with red background
    • Other titles/ text - #333; (it will be applied automatically)
    • Text on red buttons - #fff;

Forms :

All form elements must have the class form-control

If it is a online form (an input with a submit button), the form must be given a class form-inline. And appropriate width must be added to that element to make it uniform with the page.

Dropdowns and Toggling dropdowns :