Notes from Jeff Croft’s “Grids, CSS, Standards and Tomfoolery”

This is a collection of links and quotes from last night’s Atlanta Web Design Group meeting. Jeff Croft discussed “Grids, CSS, Standards and Tomfoolery”. While it’s hard to follow along without seeing his presentation, the links are in order from when they were mentioned. View slides here.

  • Grid (page layout) – Wikipedia entry that was referenced.
  • Die neue Typographie – influenced Swiss style, grid-based designs. (I used a Google link here simply because it showed scans of pages from the book + links for additional information on the book.)
  • “By the time it was translated, Tschichold had largely abandoned the modernist principles he helped create.”
  • “Grids = Order. Structure. Hierarchy. Organization.”
  • “Design is about communication. To communicate well, we must bring order to the data we’re trying to represent.”
  • BOOK: “Thinking with Type” by Ellen Lupton
  • There are 3 different types of grids: Single column, Multi-column, and Modular.
  • Some examples of grid-based design:
  • “Grids can always be sub-divided. Don’t feel like you have to stick to a low number of columns in a design.”
  • Now chatting about and how it uses a multi-column grid. Most people wouldn’t notice it, but the site actually uses a 24-column grid. A redesign is underway.
  • Typographic baseline grids.
  • “Grids are systems. Not just for any one page. Most effective when thought of as a system for use over entire site.”
  • CSS Frameworks:
  • from A List Apart: “Frameworks for Designers” by Jeff Croft
  • If you’re interested in, follow @nathansmith
  • CSS Generators:
    • Less (Ruby) – extends CSS by adding variables, mixing, operations and nested rules. Requires Ruby 1.9.
    • Sass (Ruby) – meta-language on top of CSS used to cleanly describe style and structure of a document.  Available as plugin for Ruby on Rails, standalone Ruby module and a command-line tool.
    • CleverCSS (Python) – small markup language inspired by Python. Uses indentation-based syntax (rather than flat) for setting rules. Requires Python.
  • BOOK: “Making and Breaking the Grid” by Timothy Samara
  • “Do you validate other people’s markup? Yes? You’re an asshole.” – Jeff Croft
  • Validators are a debugging tool. You should validate your own code.

After Jeff’s presentation, J. Cornelius and Jeff Croft critiqued a few people’s websites: