UI-IA-deploy

UI/IA/UX Specification

UI/IA Documentation P a g e | 2

Table of ContentsWhat is Responsive Design?........................................................................................................................4

Responsive Pattern Library is meant to be a comprehensive collection of 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 Dealing with 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

Exhibit A: 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 DesignWhat is Responsive Design?Responsive design allows end users to view web pages at multiple screen widths without the restrictions of fixed-width viewing. This makes sites visually and functionally more accessible via mobile devices, tablets and smaller browsers without hampering optimal browser sizes for desktop web-based viewers. The average screen size for base users has been going up over the years but web standards for average screen width is 1024x768 pixelsi.

Responsive Pattern Library 1 is meant to be a comprehensive collection of responsive interface patterns created by and collected for the community.

Description Based on SXSW Presentation “Beyond Squishy: The Truth About Responsive Design” Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!" While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.

Speaker: Brad Frost

Full Slides: http://www.slideshare.net/bradfrostweb/beyond-squishy-the-principles-of-adaptive-design-17070713

SOME SCREENS – Brad Frost Squishy Document (audio from event also recorded)

1 http://bradfrostweb.com/blog/web/this-is-responsive/

http://www.slideshare.net/bradfrostweb/beyond-squishy-the-principles-of-adaptive-design-17070713



Description Based on SXSW Presentation “Intentionally Dealing with Responsive Design” The strategy of responsive design has long since been accepted as the way to deal with creating web sites that appear custom-tailored to any and every device. Media queries, responsive image strategies and modern semantics have led to the rapid adoption of the ideals of dealing with every possibility simultaneously. What isn't readily apparent about this method of web development though is that the hierarchy of content often suffers as a result of the one-size-adapts-to-all strategy. Intentional design builds upon where responsive design left off, offering clear ways of creating dynamically restructured html using a light-weight library and authoring strategy, thereby increasing the layout options and flexibility, reducing development time and lessening the necessity of media-query-driven stylesheet overrides. Determined by a device type / input method matrix, a more accurate context is used to create a backwards-compatible, scalable, flexible front-end.


Description Based on SXSW Presentation “The Page is Dead” Responsive web design is changing the definition of a "page," as it aims to address the growing variety of device form factors and locations where content is consumed. Additionally, as the web evolves, rules and limitations must be better understood in order to create truly unique content. This session will focus on design philosophy and development techniques to create and adapt your content for maximum impact, regardless of where and how it is consumed. Topics will include: • Proper elements for the proper content • Design for context • Adapt your UI and adapt your content • Design with ratios vs. design with pixels • Know the limitations • Designing with limitations • Let the limitations set you free.

Future Questions: Why bother with responsive web design? What are the principles of adaptive web design? What are the biggest challenges facing people creating adaptive experiences? What are the limitations does responsive design impose on the creative process?

Which Browsers are optimized for Responsive Design in the APII Site?Chrome, Firefox, IE9 and IE10 have been optimized for responsive design compatibility.

Resources (This is Responsive) - http://bradfrost.github.com/this-is-responsive/ (Frost, Beyond Squishy The principles of adaptive design #adaptive) --




Browser CompatibilityIE8

Unlike other browsers, IE8 is fix width. This browser has been optimized for screens averaging 1024px in width.

IE9 & IE10 Internet Explorer version 9 and 10 have been prepared as responsive designs. The page design

responds to the width of the browser screen size to improve viewing experience. In some places when browser sizes get below optimal viewing widths items have been written in a tablet or mobile style. All functionality is still available but may be laid out slightly differently than the web length versions.

Chrome Chrome has been prepared as a responsive design. The page design responds to the width of the

browser screen size to improve viewing experience. In some places when browser sizes get below optimal viewing widths items have been written in a tablet or mobile style. All functionality is still available but may be laid out slightly differently than the web length versions.

Firefox Firefox has been prepared as a responsive design. The page design responds to the width of the

browser screen size to improve viewing experience. In some places when browser sizes get below optimal viewing widths items have been written in a tablet or mobile style. All functionality is still available but may be laid out slightly differently than the web length versions.

MOBILE WEB


What is Mobile Web Design?Mobile web design relates to designing applications or websites that look good on mobile browsers (generally 480px in width for iPhones or 240x320px for small phones).

What Not to Do Examples of what not to do, WTF MOBILE WEB, http://wtfmobileweb.com/ (WTF QR Codes), http://wtfqrcodes.com/ (Mobile Web Best Practices) (Mobile Web Strategy)

SASS/CSS Tips, Code and Tutorials

Important sections to read noted with asterisk (*)

IMPORTANT PREFACE *

On websites using SASS2, do not under any circumstances edit the .css files. Add all new css to the existing SASS files.

Transferring SASS to CSSSetting up SASS (One Time Setup)

1. Step 1 http://rubyonrails.org/ (Install ruby and sass inside my bit9prog folder but you will also need a “project” for sass)

a. Add config.rb to project with appropriate datab. # 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 List Apart (Blog) writes on why to love sass with multiple tutorials.


# You can select your preferred output style here (can be overridden via the command line):# output_style = :expanded or :nested or :compact or :compressedoutput_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. Step 2 Install Ruby/Sass Developer Toolkita. Add dk.rb to project with appropriate data.

3. Step 3 http://sass-lang.com/4. Step 4 open command prompt enter:

a. ONE TIME:i. Gem install sass

ii. Gem install compassiii. (optional for sprites) Gem install lemonadeiv. (optional) Gem install bourbon (Bourbon Mixin Library)v. (optional) Gem install sass-rails

vi. YUI Compressor (Google for directions: it compresses CSS and JavaScript – this can also be done within the config.rb but be careful editing this without knowing what you are doing and DO NOT COMMIT IT)

vii. Bootstrap (optional but Google for directions – creates an excellent layout for 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. Open Terminal (command prompt)

http://rubyonrails.org/

http://wtfqrcodes.com/

http://wtfmobileweb.com/


2. As long as you are working on your sass files you will need to leave terminal open with this code, if for any reason you need terminal you will need to open a new one and leave this one running.

3. EVERY TIME YOU WORK THIS NEEDS DONE:a. Cd (then the location of your stylesheets folder for me this looks like:

cd C:\bit9prog\dev\workspaces\APII\APII_2\src\main\webapp\resources\stylesheetsb. compass watchc. Leave terminal open and compass will do the rest. It is now compiling your changes and

building your sass files.d. Edit a .scss filee. Open the correlating .css file, wait for eclipse to pop up file change approval (choose

yes):

FINDING FILES TO EDIT *

You can find the appropriate sections to edit by visiting the .css files and the file location and line number will be located above each item (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 location is inside the sass folder above the existing folder where you found the css. The file that the item you wish to edit is considered a partial.

WHAT IS A PARTIAL? *

A sass partial is notated with a space “_” before the name of the file.

A partial file is for a group of similar css, but is exported with the entire CSS or imported into multiple css. To import a partial a code needs to be added at the top of the file:

@import "partials/fonts"; //* _fonts.scss must remain at top after colors */

http://sass-lang.com/


@import "partials/buttons";

The above code implies that two files are being imported to the top of your css. These files are located within the same folder as your main scss within another folder called partials.

SASS COMMENTS *

Comments can be made in the same way you would normally comment on a css file.

Add your notes within /* Comment */. This will add the comment to your scss (sass file) and will be transferred to your .css file.

If you would like the comment not to transfer to your .css file and only appear on your sass file add to lines //* Comment */ .

MIXINSMixins3 are the Sass equivalent of macros in other programming languages. Mixins and Sass Functions 4are both blocks of code that you define once and can then re-use anywhere.

The difference is that a mixin is called with @include and injects its contents whenever it’s called, while a function is called without any special keyword and returns a value. Compass is a library of mixins for SASS, and it includes some very useful stuff like border-radius and box-shadow. But of course, you can also define your own mixins and functions. So here are a couple useful ones that I re-use on every project.

(Useful SASS Mixins)

Exhibit A: MixinThe 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.

@mixin my-padding-mixin($some-number) { padding: $some-number;}

Now we use the @include directive to insert our mixin’s code.

.my-module {

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 compile time 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%


@include my-padding-mixin(10px);}

And here is the output CSS code.

.my-module { padding: 10px;}

Exhibit B: FunctionA 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),

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#sassscript

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#data_types


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); } behavior: url("/apii/resources/js/PIE/PIE.htc");}@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; behavior: url("/apii/resources/js/PIE/PIE.htc");}//* 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-color $second-percent); /* Opera 11.10+ */ background: -o-linear-gradient($position, $first-color $first-percent, $second-color $second-percent);}

//*********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;

background-color: $bg; @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) {

background-color: $bg; @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 */

}

BreadcrumbsBreadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. – 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 > Section page > Subsection pageorHome page : Section page : Subsection pageorhome page : section page 1 : section page 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;}


INCLUDESA SASS include references a mixin.

//*********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); behavior: url("/apii/resources/js/PIE/PIE.htc"); } @else { @include experimental(border-radius, $radius); } behavior: url("/apii/resources/js/PIE/PIE.htc");}

The SASS for this:

@include border-radius(5px);

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;

behavior: url("/apii/resources/js/PIE/PIE.htc");

Keep in mind that this data belongs inside a css selector to work. Ie.

.css-class, #ORIDtag-name {@include border-radius(5px);}

.css-class, #ORIDtag-name { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;behavior:

http://en.wikipedia.org/wiki/Glyph


url("/apii/resources/js/PIE/PIE.htc");}

VARIABLES *

SASS allows users to define reusable variables, which can be used for any type of value but are especially useful for colors:

12345678

// first we set the variables:$darkgrey: #333333;$lightblue: #001eff;

// now we can use them in 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 CSS Sprite is a collection of images put into a single image. This can be done manually with CSS OR dynamically using SASS5 (much easier).

Compass-style.org has many tutorials on how to use sass to make building sprites easier.

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); }5 Compass Sprite Images work like configurable variables but require their own folder and pages. There are many add-on gems that make this even easier.


.save { @include my-icons-sprite(save); } .delete { @include my-icons-sprite(delete); }}

$mysprite-layout:smart;

@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 PIEBefore IE9, Internet Explorer was not css3 compatible. To make pre-IE9 versions compatible CSS PIE comes in handy. Anywhere that css3 is included and needs implemented in older versions of IE, add the following code (replacing the file path):

behavior: url("/apii/resources/js/PIE/PIE.htc");

Be sure that the behavior code is only entered once per class.


Screenshots

How are the screenshots arranged?Below each screenshot6 you will see an annotation of which browser it is from and the screen width (IE8 is fixed width, optimized for screen width 1024px). The following screenshots were taken on or after 3/11/2013.

6 In this document, when a screenshot is reference, it means an image of a computer screen. See glossary


Glossary

A

A sass partialA partial is notated with a space “_” before the name of

the file.....................................................................12

B

BreadcrumbBreadcrumbs or breadcrumb trail is a navigation aid

used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.........22

breadcrumbsSome commentators criticize path-style breadcrumbs

because they duplicate functionality that properly subsists in the browser...........................................22

BreadcrumbsSome commentators and programmers alternatively

use the term "cookie crumb" (or some variant) as a synonym to describe the previously mentioned navigation technique. Cookies are pieces of data stored in a web browser machine by the visiting websites in a HTTP cookie file. However, cookie crumb is rarely or ever referred to as this token of data. This is another technology used on the web that is different from the navigational method.......22

C

CSS PIEBefore IE9, Internet Explorer was not css3 compatible.

To make pre-IE9 versions compatible CSS PIE comes in handy. Anywhere that css3 is included and needs implemented in older versions of IE, add the following code (replacing the file path):.................28

I

IE8

IE8 stands for Internet Explorer version 8.....................9Internet Explorer version 8 has been built using Internet

Explorer Developer tools to croos-browser test and optimize screens. Keep in mind a version of "Chrome Frame" is available for IE8 that will greatly improve browser compatibility and the speed of Java Script and Jquery in IE8.......................................................9

image CSS SpriteAn image CSS Sprite is a collection of images put into a

single image. This can be done manually with CSS OR dynamically using SASS (much easier)....................26

M

MixinsMixins are the Sass equivalent of macros in other

programming languages. Mixins and Sass Functions are both blocks of code that you define once and can then re-use anywhere.............................................13

O

optimal viewing widthsWith so many different resolutions (800×600,

1024×768, etc.), browsers (Internet Explorer, Firefox, etc.), and platforms (Windows, Mac, Mobile ,etc.) in use, it is very difficult to design a page that looks good (or at least looks the same) in all configurations...........................................................9

P

pixelsA minute area of illumination on a display screen, one

of many from which an image is composed. Pixels are sometimes referred to as resolution sizes for imagery.....................................................................4

R

responsive design...............................................................9


Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).....................................9

The Arkansas Medicaid Episode Based Payment System is built for page widths of 480px (mobile screen size) and larger. The additional screen optimizations are in 650px width (tablet size), 760px (small computer screen), 850px (small computer screen), 1024 (average browser width), and 1170px (large average browser size).............................................................9

S

SASSOn websites using SASS , do not under any

circumstances edit the .css files. Add all new css to the existing SASS files.....10, 11, 13, 22, 23, 24, 26, 27

Sass FunctionsSass gladly lets you add calculations and logic in a way

that CSS would never abide. But does that mean you should go around adding and dividing just 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 includeA SASS include references a mixin...............................22

screenshotA screen dump, screen capture (or screen-cap),

screenshot (or screen shot), screengrab (or screen grab), or print screen[1] is an image taken by the computer user to record the visible items displayed on the monitor, television, or another visual output device. Usually this is a digital image using the (host) operating system or software running on the computer, but it can also be a capture made by a camera or a device intercepting the video output of the display (such as a DVR). That latent image converted and saved to an image file such as to .JPG, .BMP, or .GIF format is also called a screenshot.....29

spriteA web page with many images can take a long time to

load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.................................12

Sprite ImagesCompass Sprite Images work like configurable variables

but require their own folder and pages. There are many add-on gems that make this even easier.......26


Works Cited(n.d.). Retrieved from http://www.the-haystack.com/2012/07/09/great-works-of-fiction-presents-the-

mobile-context

(2013). Retrieved from Mozilla Firefox: http://www.mozilla.org/en-US/firefox/new/

Chrome. (2013). Retrieved from Google Chrome: https://www.google.com/intl/en/chrome/browser/

39% while #poopin reference on compete website. (n.d.). Retrieved from http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

69% access mobile in retail stores reference on compete.com. (n.d.). Retrieved from Compete: http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

71% of mobile users expecting mobile sites to load as fast if not faster than desktop sites by compuware.com. (n.d.). Retrieved from http://compuware.com/d/release/592528/new-study-reveals-the-mobile-web-disappoints-global-consumers

74% of mobile visitors who will abandon a site if it takes longer than 5 seconds to load by gomez.com . (n.d.). Retrieved from http://gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf

76% of users access mobile while waiting in line reference on compete.com. (n.d.). Retrieved from http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

80% of users access mobile during general downtime reference on compete.com. (n.d.). Retrieved from http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

86% of responsive website whose small screen view weighs as much as the large screen view (and should not) by guypo.com. (n.d.). Retrieved from http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution

86% of users access mobile devices while watching tv reference on compete.com. (n.d.). Retrieved from http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

A lighter social share - http://filamentgroup.com/lab/socialcount/. (n.d.). Retrieved from http://filamentgroup.com/lab/socialcount/

A Quote from Christian Heilmann from the HTML5 Dev Conference. (n.d.). Retrieved from http://hacks.mozilla.org/2012/10/BROKEN-PROMISES-OF-HTML5-AND-WHATS-NEXT-A-PRESENTATION-AT-HTML5DEVCONF


Altered Impressions. (n.d.). Retrieved from http://www.alteredimpressions.com/web-design/web-page-width-dilemma/

Article the Dao of Responsive Web. (n.d.). Retrieved from http://alistapart.com/article/dao

Blog. (n.d.). Retrieved from A List Apart: http://alistapart.com/article/getting-started-with-sass

Bourbon Mixin Library. (n.d.). Retrieved from http://bourbon.io/

Brad Frost. (n.d.). Retrieved from http://bradfrostweb.com/blog/web/this-is-responsive/

Compass Sprite. (n.d.). Retrieved from http://compass-style.org/reference/compass/utilities/sprites/sprite_img/

CSS Sprite. (n.d.). Retrieved from http://www.w3schools.com/css/css_image_sprites.asp

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them. (n.d.). Retrieved from CSS-Tricks: http://css-tricks.com/css-sprites/

CSS3 PIE. (n.d.). Retrieved from Code for a Internet Explorer attached behavior which, that allows IE to recognize and display a number of CSS3 properties.: http://css3pie.com

Design Interactive Retina Revolution - http://blog.netvlies.nl/design-interactive/retina-revolution. (n.d.). Retrieved from http://blog.netvlies.nl/design-interactive/retina-revolution

Even Obama Couldn't Use His own site -- Stephanie Rieger on problems with the white house responsive design. (n.d.). Retrieved from http://stephanierieger.com/A-PLEA-FOR-PROGRESSIVE-ENHANCEMENT

Frost, B. (n.d.). Beyond Squishy The principles of adaptive design #adaptive. Retrieved from http://www.slideshare.net/bradfrostweb/beyond-squishy-the-principles-of-adaptive-design-17070713

Future Friendly. (n.d.). Retrieved from http://futurefriend.ly

Helping improve the mobile web -- facebook. (n.d.). Retrieved from http://developers.facebook.com/blog/post/2012/02/27/helping-improve-the-mobile-web

http://bit.ly/mobilefirstrwd – Demo. (n.d.). Retrieved from http://bit.ly/mobilefirstrwd

http://bit.ly/rwdanatomy - walkthrough. (n.d.). Retrieved from http://bit.ly/rwdanatomy

http://bit.ly/rwdtutorial - tutorial. (n.d.). Retrieved from http://bit.ly/rwdtutorial

http://httparchive.org. (n.d.). Retrieved from http://httparchive.org


Improve performance -- Twitter. (n.d.). Retrieved from http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html

Internet Explorer. (n.d.). Retrieved 2013, from Internet Explorer: windows.microsoft.com/en-us/internet-explorer/download-ie

Internet Explorer Developer Tools. (n.d.). Retrieved 2013, from Internet Explorer by Microsoft: www.microsoft.com/en-us/download/details.aspx?id=18359

Jeremy Keith at the Smashing Conference "The Spirit of the Web". (n.d.). Retrieved from http://bradfrostweb.com/blog/post/the-spirit-of-the-web-jeremy-keith-at-smashing-conference

John Clark Global Moxie Quote. (n.d.). Retrieved from http://globalmoxie.com/blog/making-of-people.shtml

mixin. (n.d.). Retrieved from https://github.com/drublic/Sass-Mixins

mixins. (n.d.). Retrieved from http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

Mixins. (n.d.). Retrieved from http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code

Mobile -- http://bradfrostweb.com/blog/mobile/a-tel-tale-sign. (n.d.). Retrieved from http://bradfrostweb.com/blog/mobile/a-tel-tale-sign

Mobile First Responsive Web Design. (n.d.). Retrieved from http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design

Mobile vs local. (n.d.). Retrieved from http://karenmcgrane.com/2012/07/10/mobile-local

Mobile Web Best Practices. (n.d.). Retrieved from http://mobilewebbestpractices.com/

Mobile web design. (n.d.). Retrieved from http://wtfmobileweb.com/

Mobile web Performance testing tool. (n.d.). Retrieved from http://mobitest.akamai.com

Mobile Web Strategy. (n.d.). Retrieved from http://bradfrostweb.com/web/

Performance as Design by Brad Frost. (n.d.). Retrieved from http://bradfrostweb.com/blog/post/performance-as-design

PEW INTERNET.org Reports on 79% of people using smartphones in stores. (n.d.). Retrieved from http://pewinternet.org/Reports/2012/Smartphone-Update-2012/Findings.aspx

Quote by Christian Heilmann. (n.d.). Retrieved from http://christianheilmann.com/2011/12/28/ON-SINGLE-PAGE-APPS/


Quote by Jeff Croft. (n.d.). Retrieved from http://jeffcroft.com/blog/2010/aug/02/term-html5/

Quote by Stephanie Rieger. (n.d.). Retrieved from http://stephanierieger.com/diversity-is-not-a-bug

Responsive demo by Brad Frost. (n.d.). Retrieved from http://bradfrostweb.com/demo/ish

Responsive Pattern Library. (n.d.). Retrieved from http://bradfrost.github.com/this-is-responsive/patterns.html

Responsive Web Book by Jeremy Keith. (n.d.). Retrieved from http://abookapart.com/products/responsive-web-design

sass. (n.d.). Retrieved from http://compass-style.org/help/tutorials/spriting/

sass. (n.d.). Retrieved from http://compass-style.org/reference/compass/utilities/sprites/

Sass Functions. (n.d.). Retrieved from http://thesassway.com/advanced/pure-sass-functions

Semi-responsive Example. (n.d.). Retrieved from http://mobile.pcmag.com

This is Responsive. (n.d.). Retrieved from http://bradfrost.github.com/this-is-responsive/

Useful SASS Mixins. (n.d.). Retrieved from http://sachagreif.com/useful-sass-mixins/

Web site sizes. (n.d.). Retrieved from http://static.lukew.com/unified_device_design.png

WTF QR Codes. (n.d.). Retrieved from http://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 information or (SCSS) -- Checkout this blog for a great tutorial. It walks you through setup step

by step. http://blog.assortedgarbage.com/2012/03/using-dreamweaver-with-sass-and-less/

http://blog.assortedgarbage.com/2012/03/using-dreamweaver-with-sass-and-less/

http://susy.oddbird.net/guides/getting-started/#start-basic

http://www.crazed.org.uk/2012/04/integrating-compass-into-eclipse/

http://windows.github.com/

http://www.aptana.com/products/studio3/getting_started

http://www.mutuallyhuman.com/blog/2011/08/15/scout-app-0-5-0-released/

http://rubyonrails.org/download

http://git-scm.com/downloads

http://compass-style.org/

http://sass-lang.com/download.html

Documents

UI-IA-deploy