SourceCode available on Bitbucket

This presentation will focus on a simple 7 step technique for a non-designer to create advanced CSS look and feel for .Net web apps.

more...
  1. Know CSS Concepts
    • Cascading Inheritance
    • Reset CSS
    • CSS Box Model
    • Selectors
    • Responsive Web Design
  2. Prototype Your Layout
    • Mock up a prototype layout: Whiteboard, Paper, or PowerPoint
    • Create HTML mockup, use file:// for easy saves
    • Define each area as a DIV
    • Fill each DIV with test content
    • Set Margins and Padding
    • Resize and confirm wrapping behavior
    • Test in each target browser
  3. Know your Tools
    • Chrome Developer Tools
    • Visual Studio 2012
    • Blend for Visual Studio
  4. Determine Graphics and Color Schemes
    • Colors - defined at the top
    • Graphics - stored relative to your .css file. Use .png where possible
    • Background - graphics, or gradient
    • Opacity
    • RGBA - Alpha Transparency
    • Handling a non-repeating background
  5. Create maintainable CSS
    • Site.css - defines styles for site wide elements
    • <style> - defines css specific to the page
    • Separate Styles and Layouts - SiteStyles.css, SiteLayout.css
    • Define classes more broadly - ex. .roundedCornders, .shadowed
  6. Define Styles
    • Define comment elements: H1, H2, H3, HR, BUTTON
    • Define common classes: .panel, .container, others
    • border-radius (rounded corners) - on buttons, divs
    • box-shadow - on buttons, divs, hyperlinks
  7. Code Advanced CSS3 Effects
    • @font-face
    • CSS sprites
    • flexbox
    • transition
    • transform
    • animation