Matthew Jennings

#TBT: Agents of S.T.Y.L.E. (Stylesheets That You'll Love Editing)

Blog Post created by Matthew Jennings on Dec 13, 2018

Welcome to a #TBT edition of my blog. I was cleaning up some files and came across all of the resources from a presentation James R Henson & I did at InstructureCon 2014. For posterity sake I thought I would post this. 

 

Please remember that Canvas has changed a lot since this presentation and some information may no longer be current or relevant. This is only posted for archival purposes.

 

 

Presentation Abstract:

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 - Agents of S.T.L.Y.E. by Matthew Jennings 

 

Presentation Video - Matthew Jennings and James Henson - Agents of S.T.Y.L.E. (Stylesheets That You'll Love Editing) - YouTube 

 

 

Web Resources

Design

  • coloreminder.com - all you need to build your own web color palettes.
  • border-radius.com - generates border radius code that you can copy/paste.
  • tablesgenerator.com - generates table code that you can copy/paste.
  • dirtymarkup.com - great site for cleaning compresses or "dirty" code files.
  • caniuse.com - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

General

Apps

Icon Fonts

 

Sample Files

  • Sample CSS Structure - Sample of UAB Custom CSS organizational comments.
  • Agents of S.T.Y.L.E. Sample CSS - sample CSS file that includes code for left hand menu colors, webfonts and hiding file upload button.
  • Canvas Hex Color Chart - displays all of the hex value colors used in the different Canvas CSS files.
  • Canvas Icon Font - graphical chart of all of the Icon Font icons being used by the webfont 'canvasregular'.
    • canvasregular - .svg (Canvas Icon Font to upload into Icomoon.)
  • UAB Icon Font - graphical chart of all of the Icon Font icons being used by the webfont 'uabregular'.

 

 

Jennings, M., Henson, J. (2014). Agents of S.T.Y.L.E. (Stylesheets That You’ll Love Editing), InstructureCon 2014, Park City, UT. https://www.youtube.com/watch?v=8uoaIlvOMDI

Outcomes