Introduction to "Design 2.0"

"Design 2.0" refers to a complete rewrite of the FDP's content type HTML output, as well as any related files (e.g., CSS, JS, images).

Goals

The development of "Design 2.0" is intended to meet the following criteria:

  1. To be as responsive as possible. FDP-generated content should make responsive design easy to implement, with a strong focus on "mobile-friendliness."
  2. To be as extensible as possible. The core should set a solid baseline that can be easily built on in order to meet any design goal.
  3. To be as unobtrusive as possible. The core should not get in the way of attempts to customize a design that uses it. To that end, the core includes as little visual styling (e.g., colors, typefaces) as possible and it should make as few assumptions as possible about how it's going to be used.
  4. To be as lightweight as possible. The core should contain as little code as possible and that code should be written as efficiently as possible.
  5. To be as standards-compliant as possible. The core should adhere as closely as possible to modern HTML/CSS/JS standards and best practices.

Core Concepts

At its heart, "Design 2.0" contains several core concepts:

  1. Mobile First: "Design 2.0" assumes you're using a mobile device and then reacts accordingly when you don't. (There are some exceptions, but they are few and far between, and will be addressed as needed.) This allows for progressive enhancement, i.e., the ability to add complexity to the design and code only when necessary.
  2. Grid-Based Design: "Design 2.0" uses a robust grid system based on the flexible box model (or "flexbox") to enforce consistency and to adapt content to any screen size. Grids can also contain other grids, allowing for incredibly complex designs.
  3. Beautiful Typography: The web is still a text-heavy medium and as such, users spend most of their time reading websites. As such, "Design 2.0" is built around a classic typographic scale to ensure that the text always maintains a properly balanced ratio, thus improving readability. An icon font is also included to ensure optimal display on high-resolution screens.
  4. HTML5 (Within Reason): "Design 2.0" takes advantage of HTML5 markup where it makes sense to (e.g., form input types). This allows "Design 2.0" to take advantage of mobile device capabilities without sacrificing functionality for other devices.

Browser Compatibility

"Design 2.0" is optimized for modern browsers (i.e., Chrome, Firefox, Safari, and IE10+). Some core features are not supported in IE9 but "Design 2.0" still renders reasonably well in that browser.

IE8 and older are not supported at all, so YMMV.