Fluid Baseline Grid

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

I found this responsive grid system and thought it was a great building block for a Drupal theme in my initial proof of concept. The Fluid Baseline Grid System is released under an Unlicense license and therefore is considered in the public domain.

Feel free to modify the default template layout based on the usage example below to fit your individual website's needs. You can easily create a sub-theme of FBG with different template configurations, stylesheets, and images.

About the Fluid Baseline Grid Drupal theme

The Fluid Baseline Grid Drupal theme has entered it's 2.x branch for Drupal 7, while the FBG project itself is still in the 1.x branch. We have made a lot of changes since our initial 1.x release, and we felt it was necessary to change to a 2.x branch because of the amount of changes.

*Note - As of 8/9/12 I have back-ported the 7.x-2.x fixes and new features to a 6.x-2.x branch. Enjoy!

FBG 2.x Features

• Same Great Features as FBG 1.x!
• Added more HTML5 tags including nav, section, and sidebars.
• Total Revamp of Block Regions!
• Added Sidebar First (Left) & Sidebar Second (Right).
• Added Main Menu Support!
• Added Header & Footer Inline Custom Menu CSS.
• Added Additional Tryptych Column Block Regions.
• Total of 18 Custom Block Regions Now!
• Updated to Latest Respond.js version.
• Updated link to Jquery UI 1.8.21.
• CSS Code Cleanup.

FBG 1.x Features

• Minimalist Coding
• Fully Responsive Grid
• Device Agnostic
• Cross Browser Compatible
• Easily Customized
• Branding block region
• Tryptych Column Block Regions
• Optimized Google Analytics tracking

***Please Note*** In order to continue to move forward with new features on the 2.x branch, all 1.x development has been frozen and I will no longer be supporting the 1.x Branch. Please upgrade your theme to the 2.x branch and you will see why. (Make sure to backup your site prior to upgrading, as there are many changes to block regions!)

Suggested Modules

Drupal 7
Adaptive Image Styles - Allows for your images to adapt to the same breakpoints that FBG does.
Flexslider - Allows you to setup an adaptive image slider using views and a simple image field. *Needs Flexslider 1.8* Download

To Do List

1. Clean up a few oddities in the admin UI. They are probably due to all the left floats.
2. Create some awesome, easy to understand documentation. Perhaps make a screencast as well.
3. Add a theme screenshot.
4. Create a starterkit theme to easily allow users to create FBG sub-themes.
5. Create a handful of sub-themes for FBG to showcase how cool it is. (These will be separate projects on Drupal.org to keep FGB lightweight.)

Sites Running FBG

Please let us know in the issue queue! We would love to showcase your site here :)

#D7AX - I pledge to make FBG as accessible as it can be. If you find any flaws, please submit an issue. I am willing to fix what I can to support screen readers and other accessibility devices. Thanks!

About the Fluid Baseline Grid Framework

The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability. You can finally have your cake and eat it too, all while making awesome websites.

Fluid Columns

The FBG system facilitates creativity by providing a framework for composition. Grid systems create visual rhythm and structural balance to enhance the experience with predictable patterns.

FBG is defaulted to a minimal 3-column folding grid, which is easy to work with and divided into equal portions, 31.333% wide with 2% wide gutters between columns. This is a starting point, not a standard, so we encourage you to change the columns as your project requires.

Baseline Grid

The typography of FBG is designed to establish a typographic hierarchy that improves readability and creates harmony within the text. Measure, leading, vertical rhythm, emphasis and scale are something we obsess about.

The primary font is Georgia, but the font stack can be easily changed. Paragraphs are set at a 16px base with 150% (24px) line height to improve readability and improve the appearance of text. We encourage you to change the base font size and line height to suit your needs.

Responsive Design

The FBG is designed for mobile first. CSS styles are scaled up from the minimum instead of scaled down from the maximum through the use of media queries. IE6/7/8 do not support media queries, so Respond.js is used to polyfill.

Common Break Points

* 320 px — Mobile portrait
* 480 px — Mobile landscape
* 600 px — Small tablet
* 768 px — Tablet portrait
* 1024 px — Tablet landscape/Netbook
* 1280 px — Desktop
* 1400 px & greater — Widescreen, TV

Normalize CSS

Reset vs. Normalize? Most web designers use either the Eric Meyer Reset or the YUI Reset, but a reset doesn't fix cross-browser inconsistencies or preserve useful defaults. Normalizing CSS allows for the preservation of useful defaults, while correcting bugs, fixing common browser inconsistencies and improving usability. Many thanks to Nicolas Gallagher and Jonathan Neal for researching the differences between default browser styles in order to precisely target only the styles that need normalizing.

Usage

The code for FBG is simple, lightweight, and non-obtrusive, which allows it to be easily modified for each project. The default is based on a 3-column folding layout. 1 column for mobile devices, 2 columns for tablets and 3 columns for desktops and beyond. The only necessary provision is to add either class="g1", class="g2" or class="g3" to each

<div>
  <div class="g2">
    ...
  </div>
  <div class="g3">
    ...
  </div>
  <div class="g1">
    ...
  </div>
</div>