Your SlideShare is downloading. ×

CSS Frameworks for Rapid Prototyping


Published on

Published in: Design, Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. CSS Frameworksfor Rapid Prototyping Josh Nichols Twitter: @MrBlank Email: Web Communications University of Missouri
  • 2. CSS frameworksWhat is a CSS framework?A CSS framework is a set of CSS rules, conventions, and best practicesthat attempt to abstract routine tasks into generic modules that canbe reused.Pros Cons• Increased productivity • Learning curve• Consistent code • Excess code• Easier collaboration • Non-semantic• Fewer browser bugs• Standards-based
  • 3. CSS frameworksPrerequisitesA working knowledge of CSS and XHTML is required to begin using aCSS framework.No framework will contain every rule needed. They will require editingand additions specific to the site. Even with the help of a framework,browser bugs still appear requiring the ability to troubleshoot andcorrect them.
  • 4. CSS frameworksUse what you needBe selective in what CSS rules you use. Some sites may only need afew reset rules while another may benefit from a modular grid system.Research what’s available. Mix and match rules with your own and onlyuse what you need.
  • 5. CSS frameworksSome CSS frameworksBlueprint CSS Grid System 960 Grids CSS Reloaded by Eric Meyer
  • 6. Site prototypingThe grey box methodA site prototype is an interactive wireframe to represent the structure,content and functionality of a website.It’s a grayscale mock-up that focus on content and does not includegraphical elements or imagery.
  • 7. Site prototypingMU Web Communications’ workflowWe design from the content out.1. Define goals2. Content inventory3. Information architecture4. Wireframes Wireframes, prototyping5. Prototype and design come after6. Design content organization.7. Production
  • 8. Prototype exampleExample siteMU Biochemistry prototype• No need to create all new CSS rules for each site• Fast development ― Dreamweaver templates and library items created in less than an hour• Changes to the templates are easier and faster• Information architect can create pages from templates• Writers can format content as XHTML for placement in the final site
  • 9. Prototyping demoExample frameworkBlueprint CSS• Reset rules that eliminates the discrepancies across browsers.• A flexible grid that can support complex layouts.• Every XHTML tag already has a style rule.
  • 10. CSS framework resources5 Popular CSS Frameworks +Tutorials & Tools for Getting Started Closer Look At the Blueprint CSS Framework Detailed Look at the 960 CSS Framework
  • 11. Thanks! Josh Nichols Twitter: @MrBlank Email: Web Communications University of Missouri