-
8/10/2019 Basic Css Settings for Developers
1/13
Basic css settings for
developersMarch, 2014
-
8/10/2019 Basic Css Settings for Developers
2/13
The Grid
Grid
16 px 1168 px
-
8/10/2019 Basic Css Settings for Developers
3/13
Columns and margins
Columns
800 px32 px 32 px64 px 240 px
-
8/10/2019 Basic Css Settings for Developers
4/13
Grid Variations.Columns can be further divided.
GridVariations
Option #1
Option #2
Option #3
-
8/10/2019 Basic Css Settings for Developers
5/13
The Baseline8px baseline grid to help with vertical alignment of
page components and
help to create vertical rhythm on the page.
GridVariations
8 px
-
8/10/2019 Basic Css Settings for Developers
6/13
Open Sans LightABCDEFGHIJKLMNOPQRSTUVWXYZAbcdefghi
jklmnopqrstuvwxyz0123456789!=$%?&()
Open Sans
RegularABCDEFGHIJKLMNOPQRSTUVWXYZAbcdefghijklmnopqrstuvwxyz0123456789!=$%?&()
Open Sans
BoldABCDEFGHIJKLMNOPQRSTUVWXYZAbcdefghijklmnopqrstuvwxyz0123456789!=$%?&()
Open Sans SemiboldABCDEFGHIJKLMNOPQRSTUVWXYZAbcdefghi jk
lmnopqrstuvwxyz0123456789!=$%?&()
Arial
RegularABCDEFGHIJKLMNOPQRSTUVWXYZAbcdefghijklmnopqrstuvwxyz0123456789!=$%?&()
Arial
BoldABCDEFGHIJKLMNOPQRSTUVWXYZAbcdefghijklmnopqrstuvwxyz0123456789!=$%?&()
Roboto
LightABCDEFGHIJKLMNOPQRSTUVWXYZAbcdefghijklmnopqrstuvwxyz0123456789!=$%?&()
Roboto
RegularABCDEFGHIJKLMNOPQRSTUVWXYZAbcdefghijklmnopqrstuvwxyz0123456789!=$%?&()
Roboto
BoldABCDEFGHIJKLMNOPQRSTUVWXYZAbcdefghijklmnopqrstuvwxyz0123456789!=$%?&()
Fonts
Fonts
-
8/10/2019 Basic Css Settings for Developers
7/13
H1.Open Sans Light[font-size:32px line-height: 40px
color:#000000 text-align:left margin: 32px 0 32px 0]
Open Sans Light[alternative][font-size:28px line-height: 32px
color:#ff7e2e text-align:left margin: 32px 0 32px 0]
H2.Open SansLight [font-size:28px line-height: 32px
color:#000000 text-align:left margin: 32px 0 32px 0]
H3.Roboto Light [font-size:22px line-height: 32px color:#000000
text-align:left margin: 0]
Roboto Light [alternative]
[font-size:22px line-height: 32px color:#ff7e2e text-align:left
margin: 0]
Fonts
Fonts
-
8/10/2019 Basic Css Settings for Developers
8/13
H4.Roboto bold [font-size:22px line-height: 32px color:#666666
text-align:left margin: 0]
H5.Roboto Bold [font-size:18px line-height: 24px color:#000000
text-align:left margin: 0]
H6.Roboto Light [font-size:16px line-height: 24px color:#000000
text-align:left margin: 0]
paragraph.Roboto Regular [font-size:14px line-height: 24px
color:#4d4d4d text-align:left margin: 0]
small font.Open Sans Regular [font-size:12px line-height: 16px
color:#888888 text-align:left margin: 0]
Fonts
Fonts
-
8/10/2019 Basic Css Settings for Developers
9/13
Spacing
Spacing
32 px
32 px
32 px
Title header 32px
Lorem Ipsum es simplemente el texto de
relleno de las imprentas y archivos de
texto. Lorem Ipsum ha sido el texto de
relleno estndar de las industrias desde
el ao 1500, cuando un impresor (N. del
T. persona que se dedica a la imprenta)
desconocido us una galera de textos y
los mezcl de tal manera que logr
hacer un libro de textos especimen.
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam.
Sed do eiusmod tempor incididuntLorem ipsum dolor sit amet,
consectetur adipisicing elit, sed doeiusmod tempor incididunt ut
labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud
exercitation ullamco laborisnisi ut aliquip ex ea commodo
consequat.
Lorem ipsum
Lorem ipsum dolor sit amet
-
8/10/2019 Basic Css Settings for Developers
10/13
Icons
Icons
Accelerate
Innovate
Optimize
Inform
Revenue Management
Cable
Events
Transformation
Frameworx
Business Agility
Agile IT
Product Lifecycle
Business ProcessOptimization Big Data
Cloud VirtualizationCloud
Partner/VendorManagement
Customer ExprienceManagement
Machine 2 MachineWireless
Data AnalyticsBig Data
Training
Innovation Social Media
Announcements
Security & Privacy
Digital ServicesMobile & Smartphone
-
8/10/2019 Basic Css Settings for Developers
11/13
Recommended icon sizes
MORE INFORMATION
24x24 px32x32 px48x48 px72x72 px96x96 px
Iconsizes
Branding
Documentation:https://drive.google.com/a/mercurycreative.net/folderview?id=0B9Eon7aPC05fb1hVejJ5VjF4dlE&usp=sharing
-
8/10/2019 Basic Css Settings for Developers
12/13
On rollover links should change colour, and underline if under
24px.
Links
Links
Link Normal
Link Pressed
a:[font: roboto regular size: under 24px color: #ff7e2e
text-decoration: none]
hover:[size: under 24px color: #ff7e2e text-decoration:
underline]
hover:[font-family: opensans bold font-size: 14px]
a:[font-family: opensans bold font-size: 14px box-shadow: 0 1px
1px #e6e6e6]
Border: 1px #b3b3b3Color: #b3b3b3 Backgrund-color:#b3b3b3Color:
#ffffff
Backgrund-color:#ff7e2eColor: #ffffff
Border: 1px #ff7e2eColor: # ff7e2e Backgrund-color:1px
#29abe2Color: #ffffff
Backgrund-color:#bc001eColor: #ffffff
Border: 1px #999999Color: #999999
box-shadow:0 2px 0 #999999
Backgrund-color:#999999Color: #ffffff
box-shadow:0 2px 0 #666666
Backgrund-color:#ff7e2eColor: #ffffff
box-shadow:0 2px 0 #c64106
Border: 1px #ff6633Color: #ff6633
box-shadow:0 2px 0 #993300
Backgrund-color:1px #29abe2Color: #ffffff
box-shadow:0 2px 0 #006699
Backgrund-color:#bc001eColor: #ffffff
box-shadow:0 2px 0 #660000
NormalDefault Secondary Success DangerPrimary
NormalDefault Secondary Success DangerPrimary
Normal
Pressed
-
8/10/2019 Basic Css Settings for Developers
13/13
Recommend using 16:9 images at any size that aligns
with the grid.
Slides, banners and backgrounds could be a variety
of shapes and sizes as long as there is alignment
with the grid.
Images
Images
