Agents of S.T.Y.L.E.

Drag to rearrange sections
HTML/Embedded Content
Canvas-Agents

Want to become an Agent of S.T.Y.L.E.? While content matters, so does design. This workshop is an introduction intended to expose your CSS skills to gamma rays allowing you to become a branding hero. Basic knowledge of CSS is helpful but mere mortals are welcome.

KAPOW!

Objectives

Super Vision: Learn to use Chrome's Developer Tools to find and preview changes in real time without leaving the browser or ducking into a phone booth.

Matter Manipulation: Make your Canvas bend to your will by applying your "vision" into real life code that can save the day.

Telepathy: Communicate with others through the power of excellent commenting.

 

 

Presentation Slides


Created with Haiku Deck, the free presentation appLinks to an external site.

 

 

 

Presentation Video

 

 

Web Resources

Design

coloreminder.comLinks to an external site. - all you need to build your own web color palettes.

border-radius.comLinks to an external site.Links to an external site. - generates border radius code that you can copy/paste.

tablesgenerator.comLinks to an external site. - generates table code that you can copy/paste.

dirtymarkup.comLinks to an external site. - great site for cleaning compresses or "dirty" code files.

caniuse.comLinks to an external site. - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

General

demosthenes.info/blogLinks to an external site. - general resource for CSS tips & tricks.

css-tricks.comLinks to an external site. - general resource for CSS tips & tricks.

stackoverflow.comLinks to an external site. - general resource for "how to" code things.

w3.orgLinks to an external site. - official site for web standards.

Apps

icomoon.comLinks to an external site. - web app to create your own webfont icon set.

ColorPadLinks to an external site. - Windows only

Persistant Color PickerLinks to an external site. - Mac App Store Link

Icon Fonts

flaticon.com - loads of free flat icons that can be used to build you custom icon font.

fontsquirrel.comLinks to an external site. - webfont generator.

red-team-design.comLinks to an external site. - provides information on .htaccess file modifications for support in Firefox

 

 

Sample Files

Sample CSS StructureLinks to an external site. - Sample of UAB Custom CSS organizational comments.

Agents of S.T.Y.L.E. Sample CSSLinks to an external site. - sample CSS file that includes code for left hand menu colors, webfonts and hiding file upload button.

Canvas Hex Color ChartLinks to an external site. - displays all of the hex value colors used in the different Canvas CSS files.

Canvas Icon FontLinks to an external site. - graphical chart of all of the Icon Font icons being used by the webfont 'canvasregular'.

canvasregular - .svgLinks to an external site. (Canvas Icon Font to upload into Icomoon.)

UAB Icon FontLinks to an external site. - graphical chart of all of the Icon Font icons being used by the webfont 'uabregular'.

uabregular font - .eotLinks to an external site. | .woffLinks to an external site. | .ttfLinks to an external site. | .svgLinks to an external site.

 

 

html    
Drag to rearrange sections
Rich Text Content
rich_text    

Page Comments