Child pages
  • phz.io Style Guide
Skip to end of metadata
Go to start of metadata


LOGO:


phz.io Logo:
p is never capitalized
.io is in orange
phz is white if on a dark background
phz is navy if on a light background
 

COLORS:

THEMATIC 

 Orange: #FFA50D  
Navy: #2C3742  
Lgtgrey: #EBEBEB  
Steel: #828B8D  

Other Colors Used In Console

Red: “Red" (via the Inspira Site)
Green: #4DBD33

FONTS:


Font Family: 'Open Sans',  sans-serif

Never Bolded
Navy for dark font on light background
White for light font on dark background
FONT SIZES (Inspira Wrap Strap Theme):
Large Header: default h1
Sub-Header: default h2
Text: default h5
Sub-Text: 1.1 em


HEADERS:


Main header is left aligned 
All sub-headers, headers in boxes are right aligned 


TEMPLATE BUTTONS:

              • Box/rectangle- white
              • Navy text 
              • Right aligned header
              • Faint grey line under header
              • CSS Class: .template-btn 



SEARCH BARS

Pixel Width: 275 px

Search Icon outside of white text box

Light grey writing showing the searchable section(s)



SEARCHED VIEW

Use this format for the user view after searching via any search on the console:




WIDGETS:

Blue horizontal label on left of widget, white text (unbolded) 
Use graph and content style via Inspira theme
Example Code Block
div.col-sm-4.m-l-lg.m-b.widget-dashboard

          div.widget-title

            div.widget-title-container

              h5 Total Activities By Channel

            div.ibox-content.p-h-sm.widget-md.activitiesChartDiv

              canvas#barChart

Titles Plugin https://modernizr.com/

CSS Widget Titles
/* modernizr - used to rotate widget titles */

/* Class name via Modernizr */

.csstransforms .widget-dashboard {

  border-left: 34px solid #2c3742;

  padding-left: 1px;

}

.csstransforms .widget-title h5 {

  -webkit-transform: rotate(180deg);

}


.csstransforms .widget-title-container {

  /* Abs positioning makes it not take up vert space */

  position: absolute;

  top: 0;

  left: 0;


  /* Border is the new background */

  background: none;

  /* Rotate from top left corner (not default) */

  -webkit-transform-origin: 0 0;

  -moz-transform-origin: 0 0;

  -ms-transform-origin: 0 0;

  -o-transform-origin: 0 0;


  -webkit-transform: rotate(90deg);

  -moz-transform: rotate(90deg);

  -ms-transform: rotate(90deg);

  -o-transform: rotate(90deg);


}




TABLES

Tables should alternate light grey and white, have no vertical column lines, headers right aligned

CSS Classes: .table & .table-striped

put on the <table>



SCROLL


Scroll bars within page: not showing in UI, when you hover mouse over area that scrolls, orange scroll appears. 

Sample CSS
/*

  SCROLLBAR

*/

div::-webkit-scrollbar-track {

	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/

	border-radius: 10px;

	background-color: #F5F5F5;

}


div::-webkit-scrollbar {

	width: 5px;

	background-color: #F5F5F5;

}


div::-webkit-scrollbar-track-piece {

  background-color: #F5F5F5;

}


div::-webkit-scrollbar-thumb {

	border-radius: 10px;

	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)*/

	background-color: #F5F5F5;

  height: 5rem;

}


.hoverScroll::-webkit-scrollbar-thumb {

  border-radius: 10px;

  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)*/

  background-color: #ffa50D;

  height: 5rem;

}


div::-webkit-scrollbar-thumb:horizontal, div::-webkit-scrollbar:horizontal, div::-webkit-scrollbar-track:horizontal {

  display: none;

}
Sample Java Script
$("#templateListDiv").on('mouseenter', function () {
$("#templateListDiv").addClass('hoverScroll');
});
$("#templateListDiv").on('mouseleave', function () {
$("#templateListDiv").removeClass('hoverScroll');
});



Date and Time Format: 10/12/2016 9:00 PM 

Date pickers should always be set to the current date/time automatically.

Plugin Date Picker: https://github.com/uxsolutions/bootstrap-datepicker

Example Code Block
$('#startDatepicker').datepicker({
});



DROP DOWNS



TEXT FIELDS

*Not all text fields are required although this example shows what required would look like.

BUTTONS

Form buttons are steal and have CSS Class disabled, when user has filled out minimum requirements, the button turns navy and disabled class is removed.

classes for navy button: btn btn-primary

classes for grey button: btn btn-primary disabled




NEW & REPLACEMENT TERMS


  • Console: use in place of “platform” , “CMS”,- title of entire site
  • People: use in place of “Fans” 
  • Gamification: use in place of “Contests” 
        • Engagement: Use in place of “Campaign” 
        • Campaigns refer to email blast campaigns 
        • Always use Postal Code instead of Zip Code 



CHECK BOXES



NUMERIC DATA INPUT

CHARTS

www.chartjs.org/  *Using version 1.0.1, upgrading to latest release planned soon




EXPRESS: 

Express Listening: 
Express Loyalty:
Express Gamification:
Express Publish

BUILDER:

Twitter Listening 
Facebook App 
 
Loyalty Program
Gamification
Offers & Rewards 
Publish 
Web Form 
Rules Generator 
Communicate (Push, SMS, Email) 

NAVIGATION:

Build


Manage

Analyze and Report

Communicate


Tools 



  • No labels