Components

These components, created with SASS, are the basic elements that make up the Rent Dynamics Admin tool. Effort should be made to reuse these components before resorting to creating custom elements.

Colors

Our colors consist of primary and neutral colors that are meant to provide emphasis to interface elements.

Typography

Text is the most important part of an interface, and as such, it should be easily readable. Below, you will find the SASS variable and HEX code for each color variation

Font stack

We've chosen the system font for our typeface. This helps provide a natural-feeling, native experience.

Usage

Heading h1

Heading h2

Heading h3

Paragraph p

Buttons

Here is the information for all the buttons

Standard button

Use the standard button for most cases. This allows for a lighter visual page weight. Two classes are available for ease-of-use: .btn or .btn--standard

Standard

Standard

Primary button

Use the primary button to call attention to the strongest action on the form or page. Not every screen needs a primary action.

Primary

Link button

Use for secondary actions, and destructive actions such as “Cancel,” or to discourage/limit use.

Link button

Button variations

Use these button variations extremely sparingly for actions with disastrous consequences, or for unique circumstances.

Warning

Danger

Success

Disabled buttons

Use when an another action has to be completed before the button is usable.

Disabled

Disabled

Button group

Use groups when there is a close relationship to the actions. Normally used at the top of a page.

    
Button
    
Group
    
Yo!

Applying button classes

Buttons can be applied to the following elements: div, a, and button.

div

a

button

Tabs

Tabs can be used to easily group together similar information on the same page. This allows content to be viewed without having to navigate away from the page.

Horizontal tabs

Use horizontal tabs to provide navigation at the highest page level. Horizontal tabs should take up the full width of their parent. Add the .active class to indicate the currently selected tab.

    
Tab 1
    
Tab 2
    
Tab 3
    
 Users

Vertical tabs

Use vertical tabs to provide navigation at a sub-page level. Limit the container width to prevent connection being lost between the tab and the active highlight border. Add the .active class to indicate the currently selected tab.

    
Tab 1
    
Tab 2
    
Tab 3
    
 Users

Tables

Use tables to display tabular data. Especially useful for documentation.

Table format

When using tables, add the .table class, as well as a thead and tbody.

    

        

            
Table header 1
            
Table header 2
            
Table header 3
        
    
    

        

            
Table data 1
            
Table data 2
            
Table data 2
        
    

Forms

forms

Horizontal form

Use horizontal forms to speed up data entry. The label is right aligned with the text field. When applicable, you may use two columns to display two horizontal forms at once. Stacks when responsive. Although input fields fill to 100% of their parent, make sure to size them to fit the expected content.

    

        

            Full name
        
        

            
        
    
    

        

            Full name
        
        

            
this is read-only text
        
    

Toggle switches

Toggles can be used to replace checkboxes. They represent a variety of states, including on/off, active/inactive, yes/no, etc. These toggle switches are purely HTML/CSS, so their functionality needs to be operated with Angular or jQuery.

    




    




    

        

    
    Toggle label

Modals

Use modals to provide access to item-specific features. Modals allow for reduced navigation architecture and an ecapsulated experience.

Full screen modal

Full screen modals take up the full screen, with a max width of 1200px.

Launch modal


    

        
Modal title
        

    
    
...

Responsive

We use the responsive grid system from Bootstrap 3 (http://getbootstrap.com/css/#grid). Columns must be contained within a .row element.

col-sm-6

col-sm-6

col-sm-4

col-sm-4

col-sm-4

Icons

Icons are hosted via an Icomoon icon font. Custom icons are based on a 24px grid. Icons inherit their styling from their parent element (e.g. font-size, color).

.icon--rd

.icon--check

.icon--x

.icon--heart

.icon--heartCheck

.icon--user

.icon--officeBuilding

.icon--apartmentBuilding

.icon--townhomeBuilding

.icon--menu

Usage

Utilities

Various utilities to help layout the interface

.pull--right

.pull--left

.clearfix

.text--left

.text--center

.text--right