cf-grid

A Less-based CSS3 grid system using parametric mixins to encourage semantic HTML. This component can be used by itself, but it was made for Capital Framework, a new front end framework developed at the Consumer Financial Protection Bureau.

cf-grid has four main features:

Provides fixed-width gutters and fluid-width columns.
Works seamlessly with any combination of grid and gutter widths.
Keeps HTML semantic by not including presentational classes in markup.
Row-agnostic. Put as many columns as you want in a container. Great for RWD.

The current version number can be found in bower.json and follows Semantic Versioning 2.0. Release notes are recorded on the Releases page.

If you would like to take advantage of more components or if you're new to Capital Framework, we encourage you to start here.

Dependencies

boxsizing.htc is needed if you wish to support IE7 and lower. It will automatically get installed when running grunt vendor. Once installed you need to override the @box-sizing-polyfill-path Less variable to point to the installed boxsizing.htc file using a root relative path.

How to use this component

Detailed instructions can be found in the Capital Framework documentation site.

Usage example

Instead of:

<header class="row">
    <aside class="span4">
        Lorem ipsum Ut deserunt do nostrud. 
    </aside>
    <section class="span8">
        Lorem ipsum Voluptate pariatur Duis fugiat cupidatat quis pariatur.
    </section>
</header>

cf-grid allows you to write:

<header>
    <aside class="welcome-message">
        Lorem ipsum Ut deserunt do nostrud. 
    </aside>
    <section class="customer-info">
        Lorem ipsum Voluptate pariatur Duis fugiat cupidatat quis pariatur.
    </section>
</header>

Using Less that looks like this:

.welcome-message {
  .grid_column(4);
}

.customer-info {
  .grid_column(8);
}

Note: This functionality is optional and you can use cf-grid in generated mode (i.e., with traditional .col-# classes) by compiling cf-grid-generated.less.

Known Issues

Rounding and Rendering – Certain browsers (most notably Safari, and IE7) either (a) have poor precision when rounding percentage values, (b) don't support subpixel rendering, or both. Usually this results in rows with large numbers of columns rendering "short" (i.e., not stretching all the way to the right).
IE10 inline-block whitespace not completely removed – Because IE10 no longer supports Conditional Comments, the slight increase to margin-right on the column mixin that gets it to behave in every other IE no longer works. This only manifests as a problem on rows with very many columns, which is not likely to happen in real-world layout scenarios, so we are electing to ignore the issue at this time.
Prefix/Suffix not supported in IE7 – It doesn't seem to be able to handle percentage-based padding.
Compiled CSS can be very large – If you're using the generated mode (where all of the classes are generated for you), it is essential that static assets are served gzipped, which can reduce the filesize of repetitive CSS dramatically (on the order of 90%).

Getting involved

We welcome your feedback and contributions.

Find out about contributing
File a bug using this handy template

Open source licensing info

Credits and references

Docs built with the excellent Topdoc.

himedlooff / cf-grid