Introduction to UI Frameworks

KSU VCD / inVision Workshop
18-19 October 2014
Instructor: Aaron Ganci
Return to Workshop Home


UI Frameworks are a really useful resource when prototyping responsive pages. Sometimes, it’s hard to estimate how type or other elements will look once it’s in the browser at various screen widths. UI Frameworks (e.g. Foundation, Bootstrap, SemanticUI) give designers and developers a starting point and make it really easy to build a page very quickly. Almost all of them utilize a flexible grid so it takes no extra work to test a responsive site.

In this project, we will look at one example of a UI framework, Foundation. You will get a chance to build a page and then alter the visuals of that page via media queries.


Learning Outcomes

At the end of this exercise, you will be able to:

  • Utilize a UI Framework to quickly prototype a webpage.
  • Alter CSS according to screen size via media queries.
  • Test if media queries are working to alter your design.