<commit_before># Ghost

An invisible, LESS-based grid system promoting semantic HTML. Based on [Dan's CSS grid](https://fake.ghe.domain/pages/danmurphy/DansDoodles/html5-framework/grid-system/grid_percent.html). Definitely not ready for production.

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>
```

Ghost 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:

```
header {
  .ghost-row;
}

.welcome-message {
  .ghost-span(4);
}

.customer-info {
  .ghost-span(8);
}
```

## Getting Started

Grab `ghost.less` from the `dist` directory.

## Documentation
_(Coming soon)_

## Examples

An in-progress example can be found at `dist/example.zip`.

## Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [grunt](http://gruntjs.com/).

## Release History
_(Nothing yet)_

## License
Copyright (c) 2013 Consumer Financial Protection Bureau  
A work of the Public Domain.
<commit_msg>Documentation update<commit_after># Ghost

An experimental LESS-based grid system using parametric mixins to encourage semantic HTML. Ghost uses CSS3's <a href="http://updates.html5rocks.com/2012/03/CSS-layout-gets-smarter-with-calc">calc() property</a> to provide fixed-width gutters with fluid-width columns without resorting to padding hacks. Older browsers will use fluid gutters.

Ghost was built during Fluent 2013 and was inspired by @danmurphy's [simple grid](https://fake.ghe.domain/pages/danmurphy/DansDoodles/html5-framework/grid-system/grid_percent.html) and a comment @scranfill made in #dev-tango.

## Semantic HTML

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>
```

Ghost 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:

```
header {
  .row();
}

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

.customer-info {
  .span(8);
}
```

## Getting Started

Grab `ghost.less` from the `dist` directory.

## Documentation
_(Coming soon)_

## Examples

Examples can be found in the archive at `dist/example.zip`. Note: They use less.js to compile their LESS. You'll need to run a server locally to avoid cross-origin complaints. Try `python -m SimpleHTTPServer` in the example's directory.

## Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [grunt](http://gruntjs.com/).

## Release History

_(Nothing yet)_

## License

Copyright (c) 2013 Consumer Financial Protection Bureau  
A work of the Public Domain.

{'fraction_non_alphanumeric': 0.10863267670915411, 'fraction_numerical': 0.00869061413673233, 'mean_word_length': 3.736625514403292, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6825378', 'n_tokens_mistral': 1146, 'n_tokens_neox': 1085, 'n_words': 379}