Styles guidelines Nov 19 2015

Colors

Primary Grays

gray1 f7f7f1
gray2 7ab3aa
gray3 079493
gray4 079493

Secondary Palette

blue1 045378
blue2 cae8f3
blue3 4eb3d8
blue4 045378

Palette Uses : Feedback's

green 045378
yellow cae8f3
red 4eb3d8
blue 045378
orange cae8f3

Palette Group Type Files

Gray for files type archives zip, tar, tgz, ekb a1a1a1
file type media mp4, mp3, mov 4176b2
File type images type png, jpg, gif, svg, ico 08b1bb
Purple for files type scripts js, php,esk 724891
Red for general documents files PDF, docx, xlsx, pptx, doc, xsl, ppt c62c30
Orange for plain text file type txt, css, xml, rss, html, csv, form f97c01

This Palette Group concerns only our app Tasks Priority Scale / Levels

Emergency E6172C
Urgent FD8B25
High Priority FEEF35
Medium Priority (Routine) 82B923
Low Priority (Discretionary) 82B923
No Priority (Deferral) 82B923

Fonts

Open Sans Light

Weight 300

Open Sans Normal

Weight 400

Open Sans Semi-Bold

Weight 600

Open Sans Bold

Weight 700

Examples:

h1. A Very Large header

h2. Another large header

h3. This is a medium header

h4. This is a moderate header

h5. This is a small header

Paragraph text. Security is a strong brand differentiator. Your customers deserve the respect they are entitled to. We also understand that growing your business is your main priority and have built Barricade with that in mind.

It's extremely easy for engineers and ops teams to setup, then we fade into the background for the majority of the time. We only alert you with important information and steps to remedy the situation.

p.eui-light-text Security is a strong brand differentiator. Your customers deserve the respect they are entitled to. We also understand that growing your business is your main priority and have built Barricade with that in mind.

It's extremely easy for engineers and ops teams to setup, then we fade into the background for the majority of the time. We only alert you with important information and steps to remedy the situation.


Button Examples:

.eui-button Can be used for buttons ADD - Upload File - Choose file


.eui-button.eui-primary Can be used for buttons and links in the header


.eui-button.eui-secondary


.eui-button.eui-tag Button to drag and drop


.eui-button.eui-save This button can be used for save the changements maked


.eui-button.eui-primary.eui-active Button Active


Button disabled


Date:

Form Examples:



Icons

PNG Sprite (to be discontinued)

Nav Icons

Login .eui-icon-logoutLink
Preview .eui-icon-previewSite
Settings .eui-icon-settingsLink
Trash .eui-icon-trashLink
Help .eui-icon-helpLink
Menu .eui-icon-menu
Dashboard .eui-icon-dashboard
User .eui-icon-user
Graph .eui-icon-graph
Users .eui-icon-users
List .eui-icon-list

Edit Icons

Cut .eui-cutLink
Copy .eui-copyLink
Paste .eui-pasteLink
Pasted .eui-pasted
Rename .eui-renameLink
Pencil .eui-icon-pencil
Delete .eui-icon-deleteLink
Delete .eui-icon-closeLink
Open .eui-icon-openLink

Arrows

Down Arrow .eui-icon-downArrow
Up Arrow .eui-icon-upArrow
Next Arrow .eui-icon-nextArrow
Prev Arrow .eui-icon-prevArrow

Folders

Folder .eui-icon-folder
Folder Open .eui-icon-folder-opened
General document .eui-icon-doc-gral

Status

Published .eui-icon-published
Updated .eui-icon-updated
Unpublished .eui-icon-unpublished

Timer

timeblue .eui-icon-timeblue
timeorange .eui-icon-timeorange
close .eui-icon-tclose

Image Types

png .eui-icon-png
jpg .eui-icon-jpg
gif .eui-icon-gif
svg .eui-icon-svg
ico .eui-icon-ico

Archives

zip .eui-icon-zip
tar .eui-icon-tar
tgz .eui-icon-tgz
ekb .eui-icon-ekb

Doc Types

pdf .eui-icon-pdf
docx .eui-icon-docx
xlsx .eui-icon-xlsx
pptx .eui-icon-pptx
doc .eui-icon-doc
xls .eui-icon-xls
ppt .eui-icon-ppt

Plain Text

txt .eui-icon-txt
css .eui-icon-css
xml .eui-icon-xml
rss .eui-icon-rss
html .eui-icon-html
csv .eui-icon-csv
form .eui-icon-form

Scripts

js .eui-icon-js
php .eui-icon-php
esk .eui-icon-esk
mp4 .eui-icon-mp4
mp3 .eui-icon-mp3
mov .eui-icon-mov

Icons Proposal

Font Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Additional Icons are via Font Awesome, the wonderful open source toolkit by @davegandy.

users
user
close
cog
cogs
edit
search
home
ban
bell
bolt
bookmark
bullseye
certificate
check
check-circle
check-circle-o
check-square
check-square-o
child
clock-o
code
code-fork
comment
crop
crosshairs
dashboard
database
desktop
dot-circle-o
download
exclamation
exclamation-circle
exclamation-triangle
external-link
external-link-square
eyedropper
filter
flag
gears
group
heart
image
inbox
info
key
keyboard-o
language
laptop
level-down
level-up
location-arrow
lock
magic
navicon
question
refresh
remove
signal
sitemap
sliders
spinner
star
tag
tasks
unlock
unlock-alt
upload
warning
wrench
Basic

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Item 1
  • Item 2
  • Item 3

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Colors

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Colors

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Colors

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Complite color

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Complite Colors

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Box Header

Sub title goes here with small font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu

Tables

# Title Title Title
# Title Title Title
# Title Title Title
# Title Title Title
# Title Title Title
# Title Title Title
# Title Title Title
# Title Title Title

Tasks priority scale / levels

Bug Fix Bloquer
Bug Fix non bloquer
Question Bloquer
Question
Change Request Bloquer
Change Request
Support Request