Skip to main content

Fluid Baseline Grid Redux

The Fluid Baseline Grid Redux is a CSS framework that expands upon the Fluid Baseline Grid by Josh Hopkins & 40 Horse. The original 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. This Redux version builds on the original project, and ports it to the LESS CSS framework.

Features at a glance:

  • Converted the framework to LESS
  • Baseline Grid set at default browser size of 16px base with 150% (24px) line height to improve readability and improve the appearance of text. All values are actually declared in EMs for scalabiltiy.
  • Grid generator mixins - I have created some LESS mixins to assist with creating grid based-layouts to your semantic markup
    • Golden Grid - create nested grids using the Golden Ratio.
    • Fibonacci Sequence Grid - mixin for generating column widths based upon a number in the Fibonacci Sequence.
    • I have created two generic column generator mixins - one based on EM measurements and another on percentages.
  • Suggested breakpoints in EMS based upon optimum line width for the default text size, so we can add columns to the layout when more space is available.
    • up to 36 ems : default 1 column
    • 36 ems : 2 column
    • 58.5 ems : 3 columns
    • 94.5 ems : 4 columns (20px/30px text)
    • 117 ems : 5 columns (24px/36px text)

License: The code and design are released into public domain and are free to use under Unlicense. Icon fonts included are covered under separate agreements

GitHub project page