A simple, lightweight and responsive CSS grid system
Carbon makes it easy to create complex layouts without the baggage of an entire framework. Carbon dynamically generates columns based on user specifications and supports both Stylus and Sass.
Clone the repository.
git clone https://github.com/colebemis/carbon.git
Or download the .zip. Then copy the desired stylesheet (
carbon.styl) into your project directory.
Use the Sass and Stylus variables to customize the grid to fit your needs.
||Controls number of column divisions (e.g.
||Sets max-width of
||Sets column gutter width|
||Used in media queries to define seperation between small and medium screen sizes|
||Used in media queries to define seperation between medium and large screen sizes|
Using the preprocessor of your choice, compile the stylesheet. Carbon currently supports Sass and Stylus, with Less support coming soon.
4. Link the Stylesheet
Link the stylesheet in the
<head> of your HTML document.
<link rel="stylesheet" href="path/to/carbon.css">
5. Add the Viewport Meta Tag
Place the following meta tag in the
<head> of your HTML document. This enables use of media queries for cross-device layouts.
<meta name="viewport" content="width=device-width, initial-scale=1">
Carbon follows the same basic structure as many other grid systems.
<div class="container"> <div class="row"> <div class="column small-1-of-3"> ... </div> <div class="column small-2-of-3"> ... </div> </div> </div>
Carbon is mobile-first grid system, meaning code for small screens will be inhertited by larger screens unless otherwise specified.
Apply these simple classes to your HTML elements to create a beautiful and responsive layout.
||Controls page max-width and centers page in window|
||Can be combined with
||Applies base styles for every column|