Gristle
Gristle is an ultra-lightweight, responsive CSS grid system.
Notable features
- tiny foot print (~1KB)
- small surface area
- multi-level, responsive collapsing
- moderately opinionated
- free and open-source
Getting Gristle
Gristle is available through NPM, via releases or as source code.
CDN availability coming soon...
Distributed Files
Both development and production files are provided within the 'dist' directory, including source maps:
gristle.css
Uncompressed development version.
gristle.min.css
Minified production version.
Quick Start
Link to a Gristle stylesheet between your <head> tags:
<head>
<title>...</title>
<link rel="stylesheet" href="path/to/gristle[.min].css" />
...
</head>
Add a Gristle grid element to your <body> tag and define some column structures:
<body>
<div class="gristle-grid">
<div>
<div class="c12">full-width column</div>
</div>
<div>
<div class="c6">lhs half column</div>
<div class="c6">rhs half column</div>
</div>
<div>
<div class="c4">try</div>
<div class="c4">some</div>
<div class="c4">thirds</div>
</div>
...
</div>
</body>
But wait! Gristle has so much more to offer...
Check out the documentation for more examples and information.
Contributions
Gristle is free, open-source software. (MIT)
Issues,
feedback and
pull requests all welcome.
Happy Coding!