UI-IA-deploy

UI/IADocumentation P a g e | 2
Table of Contents
What is Responsive Design?................................................................................................................4
Responsive PatternLibrary ismeantto be a comprehensive collectionof responsive interface
patterns created by and collected for the community.......................................................................4
Description Based on SXSW Presentation “Beyond Squishy: The Truth About Responsive Design”......4
Description Based on SXSW Presentation “Intentionally Dealingwith Responsive Design”..................5
Description Based on SXSW Presentation “The Page is Dead”...........................................................6
Future Questions:...........................................................................................................................6
Which Browsers are optimized for Responsive Design in the APII Site?..................................................6
Resources ..........................................................................................................................................6
IE8.....................................................................................................................................................9
IE9 & IE10 ..........................................................................................................................................9
Chrome..............................................................................................................................................9
Firefox ...............................................................................................................................................9
What is Mobile Web Design?.............................................................................................................10
What Not to Do................................................................................................................................10
IMPORTANT PREFACE *
.....................................................................................................................10
Transferring SASS to CSS................................................................................................................10
Setting up SASS(One Time Setup) ..............................................................................................10
Editing SASS/CSS (Every Time)....................................................................................................11
FINDING FILES TO EDIT *
....................................................................................................................12
WHAT IS A PARTIAL?*
.......................................................................................................................12
SASS COMMENTS *
...........................................................................................................................13
MIXINS.............................................................................................................................................13
ExhibitA: Mixin.........................................................................................................................13
Exhibit B: Function.....................................................................................................................14
MIXINS LIBRARY:...........................................................................................................................14
RESPONSIVE MIXINS: ....................................................................................................................18
Breadcrumbs....................................................................................................................................22
DESIGN EXAMPLE..........................................................................................................................22
INCLUDES.........................................................................................................................................22

VARIABLES *
.....................................................................................................................................24
COLOR VARIABLES:.......................................................................................................................24
FONT VARIABLES...........................................................................................................................25
PRIMARY VARIABLES.....................................................................................................................25
SPRITES *
..........................................................................................................................................26
SPRITE UI PATTERN LIBRARY:.........................................................................................................26
COLOR CODING SASS IN ECLIPSE........................................................................................................27
CSS3 PIE...........................................................................................................................................28
How are the screenshots arranged?...................................................................................................29
Glossary...........................................................................................................................................30
Works Cited.....................................................................................................................................32

Responsive Design
What is Responsive Design?
Responsive designallowsenduserstoview webpagesatmultiple screenwidthswithoutthe restrictions
of fixed-widthviewing.Thismakes sitesvisuallyandfunctionallymore accessible viamobile devices,
tabletsandsmallerbrowserswithouthamperingoptimalbrowsersizesfordesktopweb-basedviewers.
The average screensize forbase usershas beengoingupoverthe yearsbut webstandardsforaverage
screenwidthis1024x768 pixelsi
.
Responsive PatternLibrary 1
ismeantto be a comprehensive collectionof responsive interface patterns
createdby andcollectedforthe community.
Description
Based on SXSW Presentation “Beyond Squishy: The Truth About Responsive Design”
Responsive webdesignhashitthe scene like abomb,andnow designerseverywhere are showingoff to
theirbossesandpeersbyresizingtheirbrowserwindows."Look!The site issquishy!"While creating
flexible layoutsisimportant,there'sawhole lotmore thatgoesintotrulyexceptionaladaptiveweb
experiences.Thissessionwillintroducethe Principlesof AdaptiveDesign:ubiquity,flexibility,
performance,enhancementandfuture-friendliness.We needgobeyondmediaqueriesinorderto
preserve the web'subiquityandmove itina future-friendlydirection.
Speaker:Brad Frost
Full Slides:http://www.slideshare.net/bradfrostweb/beyond-squishy-the-principles-of-adaptive-design-
17070713
SOME SCREENS – Brad FrostSquishyDocument (audiofromeventalsorecorded)
1 http://bradfrostweb.com/blog/web/this-is-responsive/

Description
Based on SXSW Presentation “IntentionallyDealing with Responsive Design”
The strategyof responsive designhaslongsince beenacceptedasthe wayto deal withcreatingweb
sitesthatappearcustom-tailoredtoanyandeverydevice.Mediaqueries,responsiveimage strategies
and modernsemanticshave ledtothe rapidadoptionof the idealsof dealingwitheverypossibility
simultaneously.Whatisn'treadilyapparentaboutthismethodof webdevelopmentthoughisthatthe
hierarchyof contentoftensuffersasa resultof the one-size-adapts-to-all strategy.Intentional design
buildsuponwhere responsive designleftoff,offeringclearwaysof creatingdynamicallyrestructured
html usinga light-weightlibraryandauthoringstrategy,therebyincreasingthe layoutoptionsand
flexibility,reducingdevelopmenttime andlesseningthe necessityof media-query-drivenstylesheet
overrides.Determinedbyadevice type /inputmethodmatrix,amore accurate contextisusedtocreate
a backwards-compatible,scalable,flexible front-end.

Description
Based on SXSW Presentation “The Page is Dead”
Responsive webdesignischangingthe definitionof a"page,"as itaimsto addressthe growingvarietyof
device formfactorsand locationswhere contentisconsumed.Additionally,asthe webevolves,rules
and limitationsmustbe betterunderstoodinordertocreate trulyunique content.Thissessionwillfocus
on designphilosophyanddevelopmenttechniquestocreate andadapt yourcontentfor maximum
impact,regardlessof where andhowitisconsumed.Topicswill include:•Properelementsforthe
propercontent• Designforcontext• AdaptyourUI andadapt your content• Designwithratiosvs.
designwithpixels•Knowthe limitations•Designingwithlimitations•Letthe limitationssetyoufree.
Future Questions:
 Why botherwith responsive web design?
 What are the principlesof adaptivewebdesign?
 What are the biggestchallengesfacingpeople creatingadaptiveexperiences?
 What are the limitationsdoesresponsive designimpose onthe creative process?
Which Browsers are optimized for
Responsive Design in the APII Site?
Chrome,Firefox,IE9and IE10 have beenoptimizedforresponsivedesigncompatibility.
Resources
 (ThisisResponsive) - http://bradfrost.github.com/this-is-responsive/
 (Frost, BeyondSquishyThe principlesof adaptive design#adaptive) --
http://www.slideshare.net/bradfrostweb/beyond-squishy-the-principles-of-adaptive-design-
17070713

Browser Compatibility
IE8
 Unlike otherbrowsers,IE8isfix width.Thisbrowserhasbeenoptimizedforscreensaveraging
1024px in width.
IE9 & IE10
 InternetExplorerversion9and 10 have beenpreparedasresponsivedesigns. The page design
respondstothe widthof the browserscreensize toimprove viewingexperience.Insome places
whenbrowsersizesgetbelow optimal viewingwidths itemshave beenwritteninatabletor
mobile style.All functionalityisstill availablebutmaybe laidoutslightlydifferentlythanthe
weblengthversions.
Chrome
 Chrome has beenpreparedasa responsivedesign.The page designrespondstothe widthof the
browserscreensize toimprove viewingexperience.Insome placeswhenbrowsersizesget
belowoptimal viewingwidths itemshave beenwritteninatabletor mobile style.All
functionalityisstill available butmaybe laidoutslightlydifferentlythanthe weblength
versions.
Firefox
 Firefox hasbeenpreparedasaresponsive design.The page designrespondstothe widthof the
browserscreensize toimprove viewingexperience.Insome placeswhenbrowsersizesget
belowoptimal viewingwidths itemshave beenwritteninatabletor mobile style.All
functionalityisstill available butmaybe laidoutslightlydifferentlythanthe weblength
versions.
MOBILE WEB

What is Mobile Web Design?
Mobile webdesign relatestodesigningapplicationsorwebsites thatlookgoodonmobile browsers
(generally480px inwidth foriPhonesor240x320px forsmall phones).
What Not to Do
 Examplesof whatnotto do, WTF MOBILE WEB, http://wtfmobileweb.com/
 (WTF QR Codes),http://wtfqrcodes.com/
 (Mobile WebBestPractices)
 (Mobile WebStrategy)
SASS/CSS
Tips, Code and Tutorials
Important sections to read noted with asterisk (*)
IMPORTANT PREFACE *
On websitesusingSASS2
,donotunderanycircumstanceseditthe .cssfiles.Addall new csstothe
existingSASS files.
Transferring SASS to CSS
Setting up SASS (One Time Setup)
1. Step1 http://rubyonrails.org/ (Install rubyandsassinside mybit9progfolderbutyouwill also
needa “project”forsass)
a. Addconfig.rbtoprojectwithappropriate data
b. # Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "stylesheets/images"
javascripts_dir = "javascripts"
2 A ListApart (Blog) writes on why to love sass with multipletutorials.

# You can select your preferred output style here (can be overridden via
the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded
# To enable relative paths to assets via compass helper functions.
Uncomment:
relative_assets = true
# To disable debugging comments that display the original location of
your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv
scss sass
2. Step2 Install Ruby/SassDeveloperToolkit
a. Adddk.rbto projectwithappropriate data.
3. Step3 http://sass-lang.com/
4. Step4 opencommandpromptenter:
a. ONE TIME:
i. Gem install sass
ii. Gem install compass
iii. (optional forsprites) Geminstall lemonade
iv. (optional) Geminstallbourbon (BourbonMixinLibrary)
v. (optional) Geminstallsass-rails
vi. YUI Compressor(Google fordirections:itcompressesCSSandJavaScript – this
can alsobe done withinthe config.rbbutbe careful editingthiswithout
knowingwhatyouare doingandDO NOT COMMIT IT)
vii. Bootstrap(optional butGoogle fordirections –createsan excellent layoutfor
NEW sites)
viii. (great for new sites, adding css, typography defaults and
scaffolding):
@import "compass/css3";
@import "compass/typography";
@import "compass/typography/links";
@import "compass/typography/lists";
@import "compass/layout/grid-background";
@import "compass/layout";
@import "blueprint/scaffolding";
@import "blueprint";
Editing SASS/CSS (Every Time)
1. OpenTerminal (commandprompt)
2. As longas youare workingonyoursass filesyouwill needtoleave terminal openwiththiscode,
if for any reasonyouneedterminal youwillneedtoopenanew one andleave thisone running.

3. EVERY TIME YOUWORK THIS NEEDS DONE:
a. Cd (thenthe locationof yourstylesheetsfolderforme thislookslike:
cd C:bit9progdevworkspacesAPIIAPII_2srcmainwebappresourcesstylesheets
b. compasswatch
c. Leave terminal openandcompasswill dothe rest.Itis now compilingyourchangesand
buildingyoursassfiles.
d. Edita .scssfile
e. Openthe correlating.cssfile,waitforeclipsetopopup file change approval (choose
yes):
FINDING FILES TO EDIT *
You can findthe appropriate sectionstoeditbyvisitingthe .cssfilesandthe file locationandline
numberwill be locatedabove eachitem(example):
/* line 58, ../sass/sprites/_org-icon.scss */
.org-icon-sprite, .org-icon-org-icon-small, .org-icon-org-icon, .org-icon-org-logo-hp
{
background: url('images/org-icon-sf0648c224e.png') no-repeat;
}
In the above example the file locationisinsidethe sassfolderabove the existingfolderwhere youfound
the css. The file thatthe itemyouwishto editisconsideredapartial.
WHAT IS A PARTIAL? *
A sasspartial is notatedwithaspace “_” before the name of the file.
A partial file isfora groupof similarcss,butis exportedwiththe entireCSSorimportedintomultiple
css. To importa partial a code needstobe addedat the top of the file:
@import "partials/fonts"; //* _fonts.scss must remain at top after colors */
@import "partials/buttons";

The above code impliesthattwofilesare beingimportedtothe topof yourcss. These filesare located
withinthe same folderasyourmainscss withinanotherfoldercalledpartials.
SASS COMMENTS *
Commentscanbe made inthe same way youwouldnormallycommentonacss file.
Add yournoteswithin /* Comment*/. Thiswill addthe commenttoyour scss (sassfile) and
will be transferredtoyour.cssfile.
If you wouldlike the commentnottotransfertoyour .css file andonlyappearonyour sassfile
add to lines //* Comment*/ .
MIXINS
Mixins3
are the Sass equivalentof macrosinotherprogramminglanguages. MixinsandSassFunctions
4
are bothblocksof code that youdefine once andcanthenre-use anywhere.
The difference isthatamixiniscalledwith@include andinjectsitscontentswheneverit’scalled,while
a functioniscalledwithoutanyspecial keywordandreturnsavalue. Compassisa libraryof mixinsfor
SASS,andit includessome veryuseful stuff like border-radiusandbox-shadow.Butof course,youcan
alsodefine yourownmixinsandfunctions.Sohere are a couple useful onesthatIre-use onevery
project.
 (Useful SASSMixins)
Exhibit A: Mixin
The following mixin can accept arguments and do calculations. The output of this mixin (in this
case) is a CSS rule and will be unfurled where ever you @include it.
@mixinmy-padding-mixin($some-number) {
padding:$some-number;
}
Now we use the @include directive to insert our mixin’s code.
.my-module {
@include my-padding-mixin(10px);
3 If you’ve programmed before you could think of them as functions,procedures,or methods, but they aren’t
technically any of these concepts because their function is to generate code at compiletime not execute code at
run time.
4 Use functions when you need to calculate a value that may be reused somewhere else. target / context
= result 650px / 1000px = 65%

}
And here is the output CSS code.
.my-module {
padding:10px;
}
Exhibit B: Function
A function is very similar to a mixin, however the output from a function is a single value. This
can be any Sass data type, including: numbers, strings, colors, booleans, or lists.
The following function can accept 2 arguements, $some-number and $another-number .
The value returned are those two variables added together.
@function my-calculation-function($some-number, $another-number){
@return $some-number + $another-number
}
This time around we replace the common value of the padding property with what a snippet
of SassScript to call our function, pass it the arguments and include in our output CSS code.
.my-module {
padding:my-calculation-function(10px, 5px);
}
And here is the output CSS code.
.my-module {
padding:15px;
}
MIXINS LIBRARY:
@mixin block {
float: left;
display: block;
clear: both;
}
//* LINK COLORS: THIS MIXING (LINKS) STYLES ALL LINK COLORS */
//* TO USE THIS CODE IN SCREEN.SCSS TYPE @include links; to change the link color
from dark blue (the default) */
//* Add @include links($your-color); */
@mixin links($link: $link, $visited: $link, $hover: $link, $active: $link, $focus:
$hover, $transition: '.15s color ease-in-out') {

color: $link;
text-shadow: 0px 1px 0 darken($link, 40%);
&:link, &:visited { color: $link; }
&:hover, &:focus { color: shade($link, 35%); outline: none; }
&:active { color: shade($link, 15%); outline: none; }
@include transition($transition);
}
//* FONT MIXINS------------------------------------------------*/
@mixin baseline($default: 0, $background-default: none repeat scroll 0 0 transparent)
{
outline: $default;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
vertical-align: $baseline;
background: $background-default;
}
@mixin font-size($sizeValue: 1.6){
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}
@mixin normal {
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: $none;
text-indent: 0px;
text-shadow: $none;
}
//** FONT SIZE **/
@mixin font-size($sizeValue){
font-size: $sizeValue + px;
font-size: ($sizeValue / 10) + rem;
line-height: (($sizeValue / 3 + $sizeValue), $sizeValue);
margin-bottom: ($font-base-line-height / 2, $sizeValue);
}
//** HEADING (size, line height, margin etc.) **/
@mixin flat-heading {
font: bold 80px Sans-Serif;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
@mixin otto {
color: $white;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),

0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
//** TEXT SHADOW **/
@mixin text-shadow($shadow) {
-webkit-text-shadow: $shadow;
-moz-text-shadow: $shadow;
-o-text-shadow: $shadow;
text-shadow: $shadow;
}
@mixin font-tagline($color: $medium-gray, $size: 10, $mb: 9px) {
color: $color;
font: $size italic Gerogia, Serif, Arial;
margin-bottom: $mb;
text-transform: uppercase;
}
//** UL, OL (lists) **/
@mixin flatten-ul() {
list-style: none;
margin: 0;
padding: 0;
}
@mixin opacity($opacity: .50) {
-khtml-opacity:$opacity;
-moz-opacity:$opacity;
-ms-filter:"alpha(opacity=$opacity * 100)";
filter:alpha(opacity=$opacity * 100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=$opacity);
opacity:$opacity;
}
@mixin vendorize($property, $value) {
-webkit-#{$property}: $value;
-moz-#{$property}: $value;
-ms-#{$property}: $value;
-o-#{$property}: $value;
#{$property}: $value;
}
//*********BORDER RADIUS -----------------------------------------------***********/
//* DEFAULT BORDER RADIUS SETUP: */
//* This code sets a mixin to automate adding browser support for webkit, moz, khtml,
and border-radius */
//* to add code to screen simply add @include border-radius(#px #px #px ect.); --
replace # with a real number */
@mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {
@if $vertical-radius {
@include experimental(border-radius, first-value-of($radius) first-value-
of($vertical-radius), not -moz, -webkit, -pie, not -o, not -ms, not -khtml, not
official);
@include experimental("border-radius", $radius unquote("/") $vertical-radius, -
moz, not -webkit, not -o, not -ms, -khtml, official);
behavior: url("/apii/resources/js/PIE/PIE.htc");
}

@else {
@include experimental(border-radius, $radius); }
}
@mixin box-shadow($first-shadow: 0, $second-shadow: 0, $third-shadow: 0, $shadow-
color: $white) {
box-shadow: $first-shadow $second-shadow $third-shadow $shadow-color;
-moz-box-shadow: $first-shadow $second-shadow $third-shadow $shadow-color;
-webkit-box-shadow: $first-shadow $second-shadow $third-shadow $shadow-color;
-o-box-shadow: $first-shadow $second-shadow $third-shadow $shadow-color;
-ms-box-shadow: $first-shadow $second-shadow $third-shadow $shadow-color;
-khtml-box-shadow: $first-shadow $second-shadow $third-shadow $shadow-color;
-pie-box-shadow: $first-shadow $second-shadow $third-shadow $shadow-color;
}
//* END DEFAULT BORDER RADIUS SETUP */
//* top to bottom gradient */
@mixin gradient($bg: $white, $position: top, $first-color: $white, $second-color:
$dark-green, $first-percent: 25%, $second-percent: 187%) {
background-color: $bg;
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from($second-color),
to($first-color));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient($position, $first-color $first-percent,
$second-color $second-percent);
/* Firefox 3.6+ */
background: -moz-linear-gradient($position, $first-color $first-percent, $second-
color $second-percent);
/* IE 10 */
background: -ms-linear-gradient($position, $first-color $first-percent, $second-
/* Opera 11.10+ */
background: -o-linear-gradient($position, $first-color $first-percent, $second-
}
//*********LINKS-----------------------------------------------***********/
@mixin hoverActiveFocus($property, $value) {
&:hover, &:active, &:focus {
#{$property}: $value;
}
}
@mixin tab ($tab-color: $dark-green, $font-color: $white) {
color: $font-color;
background: $tab-color;
padding: 1em;

text-decoration: $none !important;
}
//*********OTHER-----------------------------------------------***********/
@mixin select {
background: url(../../images/input_bg.png) repeat-x scroll center top $white;
border: 1px solid $dark-blue;
@include border-radius(3px 3px 3px 3px);
float: left;
margin: 13px 10px;
padding: 4px 4px;
color: $dark-gray;
}
@mixin form {
margin: 0em;
font: $consolas;
@include normal;
display: inline-block !important;
}
@mixin form-defaults($bg: $white, $p: 8px, $width: 50%) {
margin: 0.5em 0 1.5em 0;
@if $bg == $white { color: $black;
} @else if $bg == $light-gray { color: black;
} @else { color: $white; }
border: 1px solid $light-gray;
padding: $p;
width: $width;
}
@mixin bg-color($bg: transparent) {
@if $bg == transparent { color: $black;
} @else if $bg == $white { color: $black;
} @else if $bg == $light-gray { color: $black;
} @else { color: $white; }
}
RESPONSIVE MIXINS:
@mixin full-width {
#two-columns #col-1, #two-columns .col-2, #two-columns input, #two-columns div
{
width: 100% !important;
margin-bottom: 20px;
}
.message-notice p {
padding: 20px;
position: relative;
}
} /* TO MAKE A PAGE FULL WIDTH VS TWO COLUMN */
@mixin footer-menu {
font-size: 2.2vw;

width: 227px;
min-height: 20px;
ul.nav {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
@include box-shadow (0px 0px 9px rgba(0,0,0,0.15));
padding: 0 15px 10px;
margin-left: 0;
@include border-radius(10px);
list-style: none;
position: relative;
display: inline-table;
width: 196px !important;
&:after {
content: "";
clear: both;
display: block;
}
a {
text-shadow: 0 0 0 transparent;
&:hover {
color: $dark-green;
}
}
li {
clear: both;
&:hover > ul {
display: block;
}
ul {
display: none;
li {
background-position: 0px 17px;
padding-left: 20px !important;
margin-top: 0;
&.last {
padding-bottom: 20px;
}
}
}
}
}
}
@mixin smaller-screen {
.larger-screen{
display: none;

}
.smaller-screen {
display: block;
border-bottom: 0px;
margin-top: 0px;
ul.nav li {
width: 100%;
background: $white;
@include border-radius(.5em);
padding: .5em !important;
border: 2px solid $white;
margin: 7px 0 0 -11px;
text-shadow: 1px 1px 1px 0 $white;
text-align: left;
&:hover, a:hover {
background: $dark-green !important;
color: $white !important;
text-shadow: 1px 1px 2px $white;
}
} /* END ul.nav li */
.toggle {
margin-top: 30px;
}
.row-more, li.row-medium {
display: none;
&:hover {
visibility: visible;
background: $light-gray;
color: $black;
cursor: pointer;
}
}
.table-more-toggle {
cursor: pointer;
}
} /* For footer menu */
}
@mixin main-toggle {
.main-toggle {
img {
margin: 0px 0px 0px 10px !important;
&:hover {
background: $white;
@include border-radius(.2em);
}
}
}
}
@mixin body-logged-in {

#main-menu, #footer-menu, #main-menu ul, #footer-menu ul, .inactive {
display: none; /* THESE WILL BE VISIBLE UPON TOGGLE */
}
}
@mixin body {
.active, .logged-out #footer-menu, .logged-out #footer-menu ul {
display: block !important;
}
#left-menu {
position: absolute;
z-index: 101;
.fixed {
position: fixed;
overflow: scroll;
background: repeat $dark-blue;
height: 100%;
margin-top: 0em;
padding-top: 1em;
@include box-shadow( $white 0px 2px 3px 0.1em,
$black 0px 2px 2px 0.2em,
$dark-blue 0px 4px 7px 0.2em);
}
}
h1.title, h2.title, h1, h2 {
font-size: 35px;
}
h3, h4, h5, h6 {
font-size: 22px;
}
.description, p {
font-size: 16px;
}
#container {
width: 80%;
}
#container.toggle {
margin-left: 31%;
margin-right: 0px;
padding-bottom: 15%;
width: auto;
overflow-x:hidden;
}
#topMenu span {
right: 0px;
}
[id*="MaintTable_filter"] {
margin-top: 0em;
} //* SEARCH */
}

Breadcrumbs
Breadcrumbsor breadcrumb trail isa navigationaidusedinuserinterfaces.Itallowsuserstokeeptrack
of theirlocationswithinprogramsordocuments.The termcomesfromthe trail of breadcrumbsleftby
Hansel andGretel inthe popularfairytale. –Wikipedia
Breadcrumbs typically appear horizontally across the top of a web page, often below title bars or
headers. They provide links back to each previous page the user navigated through to get to the current
page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail
for the user to follow back to the starting or entry point. A greater-than sign (>) often serves as hierarchy
separator, although designers may use other glyphs (such as » or ›), as well as various graphical
treatments. --wikipedia
Typical breadcrumbs look like this:
Home page > Sectionpage > Subsectionpage
or
Home page : Sectionpage : Subsectionpage
or
home page : section page 1 : sectionpage 2
DESIGN EXAMPLE
#breadcrumbs {
color: #6d6d6d;
font-size: 10pt;
font-family: "Droid Sans", Helvetica, Arial, sans-serif, Arial, Verdana, sans-
serif;
margin-bottom: 5px;
text-transform: uppercase;
border-bottom: 0px;
margin-left: -12px;
}
#breadcrumbs b {
background: url("../../images/breadcrumb-separator.png") no-repeat center right
transparent;
padding: 0 12px;
}
INCLUDES
A SASSinclude referencesamixin.
//*********BORDER RADIUS MIXIN-----------------------------------------------
***********/
//* DEFAULT BORDER RADIUS SETUP: */

//* This code sets a mixin to automate adding browser support for webkit, moz, khtml,
and border-radius */
//* to add code to screen simply add @include border-radius(#px #px #px ect.); --
replace # with a real number */
@mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {
@if $vertical-radius {
@include experimental(border-radius, first-value-of($radius) first-value-
of($vertical-radius), not -moz, -webkit, -pie, not -o, not -ms, not -khtml, not
official);
@include experimental("border-radius", $radius unquote("/") $vertical-radius, -
moz, not -webkit, not -o, not -ms, -khtml, official);
}
@else {
@include experimental(border-radius, $radius); }
}
The SASS for this:
The CSS that is built from this:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
Keepin mind that this databelongs inside a css selector towork. Ie.
.css-class, #ORIDtag-name {
}
.css-class, #ORIDtag-name {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
behavior:
url("/apii/resources/js/PIE/PIE.htc");
}

VARIABLES *
SASSallowsuserstodefine reusable variables,whichcanbe usedforany type of value butare especially
useful forcolors:
1
2
3
4
5
6
7
8
// firstwe set the variables:
$darkgrey: #333333;
$lightblue:#001eff;
// nowwe can use themin our code:
.myClass{
color:$darkgrey;//* BECOMES #333333 */
}
A {
color:$lightblue;
} //* BECOMES #001eff */
COLOR VARIABLES:
//* ALL DEFAULT COLORS ARE IN THIS PARTIAL SASS FILE */
//*=GLOBAL COLOR VARIABLES -----------------------------------------------*/
$transparent: transparent;
$white: #ffffff;
$light-gray: #f3f3f3;
$medium-gray: shade($light-gray, 15%);
$dark-gray: shade($light-gray, 55%);
$black: #000000;
$red: #c20000;
$bright-red: #F02020;
$dark-red: #af3125;
$orange: rgb(255, 165, 50);
$tan: #d7b85f;
$medium-tan: #ECE0CD;
$main-bg: #d2c493; //*tan*/
$dark-tan: #A79966;
$yellow: #FFFF99;
$light-yellow: #FDFAD7;
$bright-yellow: #FFC925;
$blue: #253654 !default;
$medium-blue: #1870a9;
$dark-blue: #253654 !default;
$fb-blue: tint($dark-blue, 30%);
$green: #19A291 !default;
$bright-green: #81bc2e;
$light-green: #B9E0D5;
$medium-green: #B5C4B8;

$dark-green: mix($dark-blue, $green);
$link: $dark-blue;
$button: $light-gray;
FONT VARIABLES
//*=FONT VARIABLES ------------------------*/
$baseline: baseline !default;
//** FONT SIZE **/
$font-base: 15px;
$font-base-percentage: (($font-base / 16px) * 100) + 0%;
//** HEADERS **/
//** LINE HEIGHT **/
$font-base-line-height: 1.2em;
$font-base-line-height-half: $font-base-line-height / 2;
//** FONT FAMILY **/
$consolas: "Consolas", monospace, arial, veranda; //*used in form modules*/
$helvetica: Helvetica, Arial, sans-serif;
$arial: Arial, Helvetica, Verdana, sans-serif;
PRIMARY VARIABLES
//* VARIABLES */
//*=GLOBAL VARIABLES-------------*/
$none: none;
$icons-sprite: sprite-map("icons/*.png", $new-position: 100%, $new-spacing: 15px,
$new-repeat: no-repeat);
//*********BROWSERS***********/
$browser-all: webkit moz ms o; //* Default browser prefixes: WEBKIT, MOZILLA, MS,
OPERA */
$web: webkit; //* Default browser prefixes: WEBKIT */
$moz: moz; //* Default browser prefixes: MOZILLA */
//*********SHADOWS-------------------***********/
$select-shadow: 0 3px 0 $medium-gray, 0 -1px $white inset;
//*********BORDER RADIUS------------------***********/
$default-border-radius: 5px;
$blueprint-grid-columns: 24;
$blueprint-container-size: 950px;
$blueprint-grid-margin: 10px;
// Use this to calculate the width based on the total width.

// Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-
container-size -- it will be calculated for you.
$blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) /
$blueprint-grid-columns - $blueprint-grid-margin;
SPRITES *
An image CSSSprite isa collectionof imagesputintoasingle image. Thiscanbe done manuallywithCSS
OR dynamicallyusingSASS5
(mucheasier).
Compass-style.orghasmanytutorialsonhow to use sass to make buildingspriteseasier.
SPRITE UI PATTERN LIBRARY:
//* This file is for sprites */
//* Sprites are currently not being defined or used in this project but need to be
added in */
//* to do this add the following line to the top of the appropriate .scss files
(screen, ie and print) */
//* @import "my-icons/*.png"; */
//* @include all-my-icons-sprites;*/
//* http://compass-style.org/help/tutorials/spriting/ */
@import "icon/*.png";
$icons: sprite-map("icons/*.png");
background: $icons;
$icon-sprite: sprite-map("icons/*.png",
$new-position: 100%, $new-spacing: 15px, $new-repeat: no-repeat);
$box-padding: 5px;
$height: icon-sprite-height(some_icon);
$width: icon-sprite-width(some_icon);
.somediv {
height:$height + $box-padding;
width:$width + $box-padding;
}
.actions {
.new { @include my-icons-sprite(new); }
.edit { @include my-icons-sprite(edit); }
.save { @include my-icons-sprite(save); }
.delete { @include my-icons-sprite(delete); }
}
$mysprite-layout:smart;
5 Compass Sprite Images work likeconfigurablevariables butrequiretheir own folder and pages. There aremany
add-on gems that make this even easier.

@import "mysprite/*.png";
COLOR CODING SASS IN ECLIPSE
You need to associate the .scss file type with the native Eclipse CSS Editor in Eclipse [Part 1]. After you
do that, you need to add the .scss file type to the native CSS Editor as well so the CSS Editor will be able
to open it [Part 2]. Here are the steps for eclipse (I’m running Eclipse Java EE IDE for Web Developers,
Indigo):
———- [Part 1] ———-
1. Go to Window –> Preferences
2. Drill down to General –> Editors –> File Associations
3. In File Associations pane, click the ‘Add…” button on the top right.
4. For “File Type:”, enter *.scss and then click OK.
5. Find the *.scss entry in the File Associations list and select it.
6. After selecting *.scss, on the bottom pane “Associated editors:”, click the “Add…” button.
7. Make sure “Internal editors” is selected on the top, then find and select “CSS Editor” and then
click OK.
This associated the file type .scss with eclipses native CSS Editor. Now we have to configure the
native CSS Editor to support .scss files. To do this, follow this steps:
———- [Part 2] ———-
1. Go to Window –> Preferences
2. Drill down to General –> Content Types
3. In the Content Types pane, expand “Text”, then select “CSS”.
4. After “CSS” is selected, on the bottom “File associations:” pane, click the “Add…” button.
5. For “Content type:”, enter *.scss and then click OK.
6. Click OK to close out the Preferences window.
All done. All you need to do now is close any .scss files that you have open then re-open them
and wha-la, css colors in Eclipse for .scss files!
Hope this helps. – http://stackoverflow.com/questions/7614612/is-there-an-eclipse-editor-for-
sasss-scss-files-or-syntax-coloring-plugin

IE (Microsoft Internet Explorer)
TIPS, Tutorials and Code
CSS3 PIE
Before IE9, InternetExplorerwasnotcss3 compatible.Tomake pre-IE9versionscompatible CSSPIE
comesinhandy. Anywhere thatcss3 isincludedandneedsimplementedinolderversionsof IE,addthe
followingcode (replacingthe filepath):
Be surethat the behavior code is only entered once per class.

Screenshots
How are the screenshots arranged?
Beloweachscreenshot6
youwill see anannotationof whichbrowseritisfrom and the screenwidth (IE8
isfixedwidth,optimizedforscreenwidth1024px).The followingscreenshotswere takenonor after
3/11/2013.
6 In this document, when a screenshotis reference, it means an image of a computer screen. See glossary

Glossary
A
A sasspartial
A partial is notated witha space “_” before the name of
the file...................................................................... 12
B
Breadcrumb
Breadcrumbs or breadcrumbtrail is a navigationaid
usedinuser interfaces. It allows users to keep track
of their locations withinprograms or documents.
The term comes fromthe trail ofbreadcrumbs left
by Hansel and Gretel in the popular fairytale......... 22
breadcrumbs
Some commentators criticize path-style breadcrumbs
because theyduplicate functionalitythat properly
subsists in the browser............................................ 22
Breadcrumbs
Some commentators andprogrammers alternatively
use the term"cookie crumb" (or some variant) as a
synonym to describe the previouslymentioned
navigationtechnique. Cookiesare pieces ofdata
stored ina webbrowser machine bythe visiting
websites in a HTTPcookie file. However, cookie
crumb is rarelyor ever referredto as this tokenof
data. This is another technologyusedonthe web
that is different from the navigational method...... 22
C
CSS PIE
Before IE9, Internet Explorer was not css3 compatible.
To make pre-IE9 versions compatible CSS PIE comes
in handy. Anywhere that css3 is includedandneeds
implemented inolder versions ofIE, addthe
following code (replacing the file path):................. 28
I
IE8
IE8 stands for Internet Explorer version 8..................... 9
Internet Explorer version 8 has beenbuilt using Internet
Explorer Developer tools to croos-browser test and
optimize screens. Keepinmind a version of"Chrome
Frame" is available for IE8 that will greatlyimprove
browser compatibilityandthe speedof Java Script
and Jqueryin IE8. ...................................................... 9
image CSS Sprite
An image CSS Sprite is a collectionof images put intoa
single image. This can be done manuallywithCSS OR
dynamicallyusing SASS (much easier)................... 26
M
Mixins
Mixins are the Sass equivalent of macros inother
programminglanguages. Mixins and Sass Functions
are both blocks of code that you define once andcan
then re-use anywhere............................................. 13
O
optimal viewing widths
With so manydifferent resolutions (800×600,
1024×768, etc.), browsers (Internet Explorer, Firefox,
etc.), and platforms (Windows, Mac, Mobile ,etc.) in
use, it is verydifficult to designa page that looks
good (or at least looks the same) inall
configurations............................................................ 9
P
pixels
A minute area of illuminationona displayscreen, one
of manyfrom whichan image is composed. Pixels
are sometimesreferredto as resolutionsizes for
imagery...................................................................... 4
R
responsive design................................................................ 9
Responsive web design(RWD) is a web designapproach
aimedat crafting sites to provide an optimal viewing
experience—easyreading andnavigationwitha
minimum of resizing, panning, and scrolling—across
a wide range ofdevices(fromdesktopcomputer
monitors to mobile phones)...................................... 9

The Arkansas Medicaid Episode BasedPayment System
is built for page widths of 480px (mobile screensize)
and larger. The additional screenoptimizations are
in 650px width(tablet size), 760px (smallcomputer
screen), 850px (small computer screen), 1024
(average browser width), and 1170px (large average
browser size)............................................................. 9
S
SASS
On websites usingSASS , do not under any
circumstances edit the .css files. Addallnew css to
the existing SASS files.....10, 11, 13, 22, 23, 24, 26, 27
Sass Functions
Sass gladlylets you addcalculations andlogic ina way
that CSS wouldnever abide. But doesthat meanyou
should goaroundadding anddividingjust
anywhere?Find out how you can use pure Sass
functions to make reusable logic more useful and
your working Sass file more readable..................... 13
SASS include
A SASS include references a mixin............................... 22
screenshot
A screen dump, screencapture (or screen-cap),
screenshot (or screenshot), screengrab(or screen
grab), or print screen[1]is animage takenbythe
computer user to record the visible items displayed
on the monitor, television, or another visual output
device. Usuallythis is a digitalimage usingthe (host)
operatingsystemor software running onthe
computer, but it canalso be a capture made bya
camera or a device interceptingthe video output of
the display(such as a DVR). That latent image
converted and saved to animage file such as to .JPG,
.BMP, or .GIF format is also called a screenshot..... 29
sprite
A web page withmanyimagescantake a longtime to
loadandgeneratesmultiple server requests. Using
image sprites will reduce the number of server
requests and save bandwidth................................. 12
Sprite Images
Compass Sprite Images work like configurable variables
but require their ownfolder andpages. There are
manyadd-on gems that make this even easier...... 26

Works Cited
(n.d.).Retrievedfromhttp://www.the-haystack.com/2012/07/09/great-works-of-fiction-presents-the-
mobile-context
(2013). RetrievedfromMozillaFirefox:http://www.mozilla.org/en-US/firefox/new/
Chrome.(2013). RetrievedfromGoogle Chrome:https://www.google.com/intl/en/chrome/browser/
39% while #poopin referenceon competewebsite.(n.d.).Retrievedfrom
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
69% accessmobile in retail storesreferenceon compete.com.(n.d.).RetrievedfromCompete:
71% of mobile usersexpecting mobile sites to load asfastif not fasterthan desktop sitesby
compuware.com.(n.d.).Retrievedfromhttp://compuware.com/d/release/592528/new-study-
reveals-the-mobile-web-disappoints-global-consumers
74% of mobile visitorswho will abandon a siteif it takeslonger than 5 secondsto load by gomez.com.
(n.d.).Retrievedfromhttp://gomez.com/wp-
content/downloads/19986_WhatMobileUsersWant_Wp.pdf
76% of usersaccess mobile while waiting in line referenceon compete.com.(n.d.).Retrievedfrom
80% of usersaccess mobile during generaldowntimereferenceon compete.com.(n.d.).Retrievedfrom
86% of responsivewebsitewhosesmallscreen view weighsasmuch as the largescreen view (and should
not) by guypo.com.(n.d.).Retrieved fromhttp://www.guypo.com/mobile/performance-
implications-of-responsive-design-book-contribution
86% of usersaccess mobile deviceswhile watching tv reference on compete.com.(n.d.).Retrievedfrom
A lighter social share- http://filamentgroup.com/lab/socialcount/.(n.d.).Retrievedfrom
http://filamentgroup.com/lab/socialcount/
A QuotefromChristian Heilmann fromthe HTML5 Dev Conference.(n.d.).Retrievedfrom
http://hacks.mozilla.org/2012/10/BROKEN-PROMISES-OF-HTML5-AND-WHATS-NEXT-A-
PRESENTATION-AT-HTML5DEVCONF

Altered Impressions.(n.d.).Retrievedfromhttp://www.alteredimpressions.com/web-design/web-page-
width-dilemma/
Article theDao of ResponsiveWeb.(n.d.). Retrievedfromhttp://alistapart.com/article/dao
Blog.(n.d.).RetrievedfromA ListApart:http://alistapart.com/article/getting-started-with-sass
Bourbon Mixin Library.(n.d.).Retrievedfromhttp://bourbon.io/
Brad Frost.(n.d.).Retrievedfromhttp://bradfrostweb.com/blog/web/this-is-responsive/
CompassSprite.(n.d.).Retrievedfromhttp://compass-
style.org/reference/compass/utilities/sprites/sprite_img/
CSSSprite. (n.d.).Retrievedfromhttp://www.w3schools.com/css/css_image_sprites.asp
CSSSprites: WhatThey Are,Why They’reCool,and How To Use Them.(n.d.).RetrievedfromCSS-Tricks:
http://css-tricks.com/css-sprites/
CSS3 PIE.(n.d.).RetrievedfromCode foraInternetExplorerattachedbehaviorwhich,thatallowsIEto
recognize anddisplayanumberof CSS3 properties.:http://css3pie.com
Design InteractiveRetina Revolution - http://blog.netvlies.nl/design-interactive/retina-revolution.(n.d.).
Retrievedfromhttp://blog.netvlies.nl/design-interactive/retina-revolution
Even Obama Couldn'tUseHis own site -- StephanieRieger on problemswith the white houseresponsive
design.(n.d.).Retrievedfromhttp://stephanierieger.com/A-PLEA-FOR-PROGRESSIVE-
ENHANCEMENT
Frost,B. (n.d.). Beyond Squishy Theprinciplesof adaptivedesign #adaptive.Retrievedfrom
http://www.slideshare.net/bradfrostweb/beyond-squishy-the-principles-of-adaptive-design-
17070713
FutureFriendly.(n.d.).Retrievedfromhttp://futurefriend.ly
Helping improvethe mobileweb -- facebook.(n.d.).Retrievedfrom
http://developers.facebook.com/blog/post/2012/02/27/helping-improve-the-mobile-web
http://bit.ly/mobilefirstrwd –Demo.(n.d.).Retrievedfromhttp://bit.ly/mobilefirstrwd
http://bit.ly/rwdanatomy - walkthrough.(n.d.).Retrievedfromhttp://bit.ly/rwdanatomy
http://bit.ly/rwdtutorial- tutorial.(n.d.).Retrievedfromhttp://bit.ly/rwdtutorial
http://httparchive.org.(n.d.).Retrievedfromhttp://httparchive.org

Improveperformance-- Twitter.(n.d.).Retrievedfrom
http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html
InternetExplorer.(n.d.).Retrieved2013,from InternetExplorer:windows.microsoft.com/en-
us/internet-explorer/download-ie
InternetExplorerDeveloper Tools.(n.d.).Retrieved2013,from InternetExplorerbyMicrosoft:
www.microsoft.com/en-us/download/details.aspx?id=18359
Jeremy Keith at the Smashing Conference"TheSpirit of the Web".(n.d.).Retrievedfrom
http://bradfrostweb.com/blog/post/the-spirit-of-the-web-jeremy-keith-at-smashing-conference
John ClarkGlobal MoxieQuote.(n.d.).Retrievedfromhttp://globalmoxie.com/blog/making-of-
people.shtml
mixin.(n.d.).Retrievedfromhttps://github.com/drublic/Sass-Mixins
mixins.(n.d.).Retrievedfromhttp://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
Mixins.(n.d.).Retrievedfrom http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-
code
Mobile -- http://bradfrostweb.com/blog/mobile/a-tel-tale-sign.(n.d.).Retrievedfrom
http://bradfrostweb.com/blog/mobile/a-tel-tale-sign
Mobile First ResponsiveWeb Design.(n.d.). Retrievedfromhttp://bradfrostweb.com/blog/web/mobile-
first-responsive-web-design
Mobile vslocal. (n.d.).Retrievedfromhttp://karenmcgrane.com/2012/07/10/mobile-local
Mobile Web Best Practices.(n.d.).Retrievedfromhttp://mobilewebbestpractices.com/
Mobile web design.(n.d.).Retrievedfromhttp://wtfmobileweb.com/
Mobile web Performancetesting tool.(n.d.).Retrievedfromhttp://mobitest.akamai.com
Mobile Web Strategy.(n.d.).Retrievedfromhttp://bradfrostweb.com/web/
PerformanceasDesign by Brad Frost.(n.d.).Retrievedfrom
http://bradfrostweb.com/blog/post/performance-as-design
PEW INTERNET.org Reportson 79% of peopleusing smartphonesin stores.(n.d.).Retrievedfrom
http://pewinternet.org/Reports/2012/Smartphone-Update-2012/Findings.aspx
Quoteby Christian Heilmann. (n.d.).Retrievedfromhttp://christianheilmann.com/2011/12/28/ON-
SINGLE-PAGE-APPS/

Quoteby Jeff Croft.(n.d.).Retrievedfromhttp://jeffcroft.com/blog/2010/aug/02/term-html5/
Quoteby StephanieRieger. (n.d.).Retrievedfrom http://stephanierieger.com/diversity-is-not-a-bug
Responsivedemo by Brad Frost.(n.d.).Retrievedfromhttp://bradfrostweb.com/demo/ish
ResponsivePattern Library.(n.d.).Retrievedfromhttp://bradfrost.github.com/this-is-
responsive/patterns.html
ResponsiveWeb Bookby Jeremy Keith.(n.d.).Retrievedfrom
http://abookapart.com/products/responsive-web-design
sass.(n.d.).Retrievedfromhttp://compass-style.org/help/tutorials/spriting/
sass.(n.d.).Retrievedfromhttp://compass-style.org/reference/compass/utilities/sprites/
SassFunctions.(n.d.).Retrievedfromhttp://thesassway.com/advanced/pure-sass-functions
Semi-responsiveExample.(n.d.).Retrievedfromhttp://mobile.pcmag.com
This is Responsive.(n.d.).Retrievedfromhttp://bradfrost.github.com/this-is-responsive/
UsefulSASSMixins.(n.d.).Retrievedfromhttp://sachagreif.com/useful-sass-mixins/
Web site sizes. (n.d.).Retrievedfromhttp://static.lukew.com/unified_device_design.png
WTF QR Codes.(n.d.).Retrievedfromhttp://wtfqrcodes.com/
i Pixels in this document may be referred to as px.
 http://sass-lang.com/download.html (required)
 http://compass-style.org/ (optional but highly recommended)
 http://git-scm.com/downloads (required)
 http://rubyonrails.org/download (required)
 http://www.mutuallyhuman.com/blog/2011/08/15/scout-app-0-5-0-released/ (optional – your choice)
 http://www.aptana.com/products/studio3/getting_started (optional but good for eclipse)
 http://windows.github.com/ (completely unrelated but a good resource for development… I’ve noticed
a lot of helpful tutorials, apps and code with these repositories)
 INSTALLING A BUILD ANT TO AUTO UPDATE FILES UPON SAVE

 SUSY GEM
 GREAT SASS setup informationor (SCSS) -- Checkout this blogfor a great tutorial.It walks you through
setup step by step. http://blog.assortedgarbage.com/2012/03/using-dreamweaver-with-sass-and-less/

UI-IA-deploy

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

Similar to UI-IA-deploy

Similar to UI-IA-deploy (20)

More from Desarae Veit

More from Desarae Veit (14)

UI-IA-deploy