<commit_before># Breakpoint [![Build Status](https://travis-ci.org/lesjames/breakpoint.png?branch=master)](https://travis-ci.org/lesjames/breakpoint)

Breakpoint is a grid system and responsive image solution. It's based on the concept that columns shouldn't
stretch but get added or taken away as the screen changes size. This concept
was taken from the [Frameless Grid](http://framelessgrid.com/) system developed by <NAME>.
The Breakpoint grid is also floatless by using inline-block cells and border box sizing. This
layout technique is taken from [Griddle](https://github.com/necolas/griddle) by <NAME>.
Breakpoint generates media queries at column break points that you determine.
You can label your media queries too which allows JavaScript to pair them with responsive image sources.

## Installation

Breakpoint requires Sass 3.2 or later

`$ sudo gem install sass`

### Bower

The quickest way to install Breakpoint is with with [Bower](http://bower.io/).

`bower install breakpoint`

Then in your style.scss import Breakpoint from your Bower components directory. The following assumes
the bower component folder is the same level as your Sass folder.

`@import '../components/breakpoint/breakpoint/breakpoint'`

### Yeoman

For a full, opinionated project setup that includes a build system using [Grunt](http://gruntjs.com/) and [RequireJS](http://requirejs.org/),
you can [install Breakpoint with Yeoman](https://github.com/lesjames/generator-breakpoint).

### Resources

* Here is a writeup about [Breakpoint on 24 Ways](http://24ways.org/2012/redesigning-the-media-query/).
* You can [view a presentation about Breakpoint](http://wordpress.tv/2012/12/18/les-james-responsive-design-with-the-breakpoint-framework/) on wordpress.tv.
* Here is a [Codepen demo](http://codepen.io/lesjames/pen/ixjsc) that you can play with.
* You can hit up [Les James on Twitter](https://twitter.com/lesjames) with any questions.<commit_msg>Heading formatting<commit_after># Breakpoint [![Build Status](https://travis-ci.org/lesjames/breakpoint.png?branch=master)](https://travis-ci.org/lesjames/breakpoint)

Breakpoint is a grid system and responsive image solution. It's based on the concept that columns shouldn't
stretch but get added or taken away as the screen changes size. This concept
was taken from the [Frameless Grid](http://framelessgrid.com/) system developed by <NAME>.
The Breakpoint grid is also floatless by using inline-block cells and border box sizing. This
layout technique is taken from [Griddle](https://github.com/necolas/griddle) by <NAME>.
Breakpoint generates media queries at column break points that you determine.
You can label your media queries too which allows JavaScript to pair them with responsive image sources.

## Installation

Breakpoint requires Sass 3.2 or later

`$ sudo gem install sass`

#### Bower

The quickest way to install Breakpoint is with with [Bower](http://bower.io/).

`bower install breakpoint`

Then in your style.scss import Breakpoint from your Bower components directory. The following assumes
the bower component folder is the same level as your Sass folder.

`@import '../components/breakpoint/breakpoint/breakpoint'`

#### Yeoman

For a full, opinionated project setup that includes a build system using [Grunt](http://gruntjs.com/) and [RequireJS](http://requirejs.org/),
you can [install Breakpoint with Yeoman](https://github.com/lesjames/generator-breakpoint).

#### Resources

* Here is a writeup about [Breakpoint on 24 Ways](http://24ways.org/2012/redesigning-the-media-query/).
* You can [view a presentation about Breakpoint](http://wordpress.tv/2012/12/18/les-james-responsive-design-with-the-breakpoint-framework/) on wordpress.tv.
* Here is a [Codepen demo](http://codepen.io/lesjames/pen/ixjsc) that you can play with.
* You can hit up [<NAME> on Twitter](https://twitter.com/lesjames) with any questions.
{'fraction_non_alphanumeric': 0.10389275586491364, 'fraction_numerical': 0.009280742459396751, 'mean_word_length': 4.8521870286576165, 'pattern_counts': {'":': 0, '<': 8, '<?xml version=': 0, '>': 8, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5762585', 'n_tokens_mistral': 1134, 'n_tokens_neox': 1099, 'n_words': 421}