Courses‎ > ‎MED 300‎ > ‎Advanced CSS3 Styling‎ > ‎

Day 2

Case Study

Zurb's Foundation framework is a flexible, scalable solution for both rapid prototyping as well as development / deployment.  The markup is very simple to execute, and the amount of styling provided is just awesome.  Not only is this going to serve as our first case study, but we will also be using this framework for the duration of the week to exercise our own CSS skills.

Flexible - Zurb is very proud of their framework, and rightfully so.  They make the claim that it is "Flexible", but what does that mean?

    For the purpose of this course, we can understand flexibility as a behavior that allows for little to no modification to the essential framework in order to develop or deploy.
    Mouthful huh?  What this means in general terms, is that we can do just about whatever we want with the technology, and aren't really locked in to making sites that 
    all look the same.  Foundation is based on a grid system, but it is very easy to break out of the traditional grid look.  More on this later...

Scalable - Zurb also makes the claim that their framework is Scalable (which it is).  What does this mean?

    It might be easy to confuse scalable with flexible, or at least interchange the words at times.  But they are different things in terms of web design.
    The scalability of Foundation is derived from the ability to develop a single site, and deploy to mobile and tablet devices.  This was very much a dream even a year ago.
    Frameworks like Foundation make this a reality.  By basing the measurements and fundamental styles on percentages rather on fixed pixel values, the objects
    on the screen can scale to an appropriate size in regards to the device the user is viewing the site on.  To take this a step further, with the development of technology
    that compiles mobile applications from the HTML markup language, you can very quickly develop a page based application using Foundation, or other frameworks.

Rapid Prototyping / Development - Zurb's other big claim is that this can create a super fast work flow.  This is more obvious, but still deserves an explanation.

    Because so many styles are written for you, if you are comfortable enough with basic markup, you can "write" out a site in very little time.  For anyone who can 
    visualize a grid and a hierarchy of containers, it really is rapid.  And the naming structure in the framework is nice too, and common sense.  For example, if you want
    an element to be six columns wide (which is half the standard width since the framework is based off of a 12 column layout), then you simply type "six columns" in the
    tag element's class.  For those of you familiar with HTML, that likely made some sense.  If you're new to this, get ready for a crash course in HTML.





For today's assignment, you will each be assigned a new CSS rule to investigate, utilize, and then present to the class tomorrow.

List of possibilities:  
  • Transform (2d & 3d)
  • Borders (border-radius)
  • Box Shadow
  • Background (background-size & background-origin)
  • Text Effects (text-shadow & word-wrap)
  • @font-face (external fonts)
  • Transition  Luke's second
  • Animation
  • Columns
  • User - Interface
  • Media Queries
  • Box Properties (box align)
  • Opacity
  • Overflow
  • Position (absolute, fixed, relative)
  • Gradient