Fn Responsive
Watch the grid below fold as you resize your screen.
A Responsible Grid
Built from the ground-up for a responsive design that builds a bridge between design and development. Use it together to rapidly prototype adaptive designs. Much like the Swiss smashed the boundaries of grid design in the 50's the web may never be the same.
-
Design Geometry
A designer carefully crafts the geometry of the layout and typographic rhythm. Fn Responsive calculates and controls the design as it was intended by the designer. The designs beautiful rhythm can leverage Fibonacci, The Golden Means, a musical scale or roll your own.
-
Small, Medium Or Large
Simplify responsive design in the early stages by concentrating on only three main form factors. Use "breakpoints" that straddle form factors rather than physical edges. Speak and design from a common foundation with limitless possibilities.
-
Shared Design Language
The grids help us translate how we see the responsive interactions from wireframes to hi-fi comps. The folding grids become a sandbox to explore our interactions whether someone designs directly on the grids or takes a very liberal approach.
-
LESS Is More
Powered by LESS. What I did not want was another CSS grid system that littered my markup with non-semantic classes. In reality when a project goes from concept to production we often have little control over things like HTML markup. Plus, it is good practice to separate content from style as often as you can.
-
Device Agnostic
With hundreds of screen resolutions and device dimensions evolving each day, the pixel is a moving target. To think about the web responsively is to think in proportions, not pixels. The Fn responsive grid employs relative and unit-less measurements to free ourselves from the entanglement!
-
Feature And Conditional
We combine simplified markup with Modernizer's feature detection and conditional statements. We start by being very specific with our styles to control layout and avoid most browser specific hacks. Then we can test for features and provide a fallback if needed. As a last resort we can target specific browsers using conditional statements.
foundation
Beginning with a firm foundation of a normalizer, color variable and typographic rhythm. Normalize is an alternative to CSS resets. It is the product of hundreds of hours of extensive research by @necolas and @jon_neal.
base
Base layers the foundation files with the global styles. Grid.less sets the base for the grids and is based upon semantic.gs so that the grid is abstracted from our mark-up. Here we leverage it to further separate different grid settings from each main viewport size by changing the grid settings in the three main layout files.
layout
Like the three bears we have three main layout files. Each of which includes the foundation and base along with screen proportion style tweaks to serve each device only what it needs.