Adding Structure with CSS

Resets, Grid Frameworks, & LESS CSS, Positioning, Floating, & Clearing

Reading Recap

The Vendor Prefix Predicament: ALA’s Eric Meyer Interviews Tantek Çelik The Vendor Prefix Predicament: ALA’s Eric Meyer Interviews Tantek Çelik

Main points:
We tried to avoid history repeating itself by avoiding proprietary properties. However, dominant mobile platforms (WebKit) caused developers to ignore other proprietary prefixes (e.g., -moz-, -o-, -ms-) causing other vendors to start supporting different vendor prefixes. (??!?)

http://www.alistapart.com/articles/the-vendor-prefix-predicament-alas-eric-meyer-interviews-tantek-celik/

Reading Recap

Jeffrey Zeldman Every Time You Call a Proprietary Feature "CSS3," a Kitten Dies

Main points:
Be aware that just because there's a -webkit-xxx property, it doesn't mean it's an HTML5 standard.
-webkit-xxx != HTML5

http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/

Resets

  • Removes all default browser styling
  • e.g.:

    h1

    ,

    h2

    ,

    h3

    ,

    h4

    ,
    h5
  • Adds some helper classes (e.g., .clearfix, .ir, cross-browser stuff like zoom: 1, etc.)
  • Normalize.css
  • Is included in HTML5 Boilerplate.

Grid Frameworks

Grid frameworks provide us with a consistent naming convention for easily applying a pre-thought out plan for structuring web sites.

  • Many of them include support for:
  • fixed layouts
  • fluid layouts
  • max-width
  • nested columns
  • responsive design
CSS grid frameworks

less-css-logo
(LESS CSS allows you to actually write less code!)

  • Simply download the JavaScript from the LESS CSS website
  • And include it on your page
CSS vs. LESS CSS

Positioning
(Relative vs. Absolute)

  • Relative: Relative to where the element lies naturally in the document flow

    • &

  • Absolute: Positioning CSS applied from the bounds of the closest positioned parent.
default CSS positioning
relative CSS positioning absolute CSS positioning

Floating

  • Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
  • A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
  • The elements after the floating element will flow around it.
  • The elements before the floating element will not be affected.
  • If an image is floated to the right, a following text flows around it, to the left

Source: www.w3schools.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor pretium dapibus. Vivamus ante purus, malesuada a semper eget, vulputate at lectus. Integer sit amet ante in nibh laoreet euismod non consectetur libero. Nullam hendrerit volutpat ullamcorper. Nulla eget diam ac felis blandit tincidunt. In consequat turpis id nunc egestas consequat. Pellentesque id facilisis ipsum. Aliquam erat volutpat. Duis eu ante libero. Donec at elit congue dui vulputate aliquet. Donec est urna, blandit quis egestas vel, placerat nec tellus. Sed imperdiet cursus massa, dictum cursus elit volutpat non.

CSS floats
unfloated
unfloated
unfloated
unfloated

Clearing

"The clear property specifies which sides of an element other floating elements are not allowed."
- w3schools

CSS clearing

unfloated
unfloated
unfloated
unfloated
CSS clearing

Accompanying articles

Questions

?

Assignment

Continue applying HTML, CSS, JavaScript to your designs.

  1. Create a new folder in your webspace titled "20120330"
  2. Copy the contents from your previous assignment's folder into here and continue working on your new designs from here.