├── .gitignore ├── README.md ├── scss └── carbon.scss └── styl └── carbon.styl /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Carbon 2 | === 3 | 4 | > **Note:** This project was made in an effort to better understand responsive design and CSS layout and is not intended for production use. I recommend using [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and/or [grid](https://css-tricks.com/snippets/css/complete-guide-grid/). 5 | 6 | ### A simple, lightweight and responsive CSS grid system 7 | 8 | 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. 9 | 10 | 11 | Getting Started 12 | --- 13 | 14 | #### 1. Download 15 | 16 | Clone the repository. 17 | 18 | ``` 19 | git clone https://github.com/colebemis/carbon.git 20 | ``` 21 | 22 | Or [download the .zip](https://github.com/colebemis/carbon/archive/master.zip). Then copy the desired stylesheet (`carbon.scss` or `carbon.styl`) into your project directory. 23 | 24 | #### 2. Configure 25 | 26 | Use the Sass and Stylus variables to customize the grid to fit your needs. 27 | 28 | | Variable | Description | 29 | | --- | --- | 30 | |`$column-groups`| Controls number of column divisions (e.g. `$column-groups: (2, 3, 4)` will create a 2-, 3- and 4-column grid and allow for the use of small-n-of-2, small-n-of-3 and small-n-of-4 classes) | 31 | |`$max-width`| Sets max-width of `.container` | 32 | |`$gutter`| Sets column gutter width | 33 | |`$breakpoint-small`| Used in media queries to define seperation between small and medium screen sizes | 34 | |`$breakpoint-medium`| Used in media queries to define seperation between medium and large screen sizes | 35 | 36 | #### 3. Preprocess 37 | 38 | Using the preprocessor of your choice, compile the stylesheet. Carbon currently supports Sass and Stylus, with Less support coming soon. 39 | 40 | #### 4. Link the Stylesheet 41 | 42 | Link the stylesheet in the `` of your HTML document. 43 | 44 | ```html 45 | 46 | ``` 47 | 48 | #### 5. Add the Viewport Meta Tag 49 | 50 | Place the following meta tag in the `` of your HTML document. This enables use of media queries for cross-device layouts. 51 | 52 | ```html 53 | 54 | ``` 55 | 56 | Usage 57 | --- 58 | Carbon follows the same basic structure as many other grid systems. 59 | 60 | ```html 61 |
62 |
63 |
...
64 |
...
65 |
66 |
67 | ``` 68 | 69 | Carbon is mobile-first grid system, meaning code for small screens will be inhertited by larger screens unless otherwise specified. 70 | 71 | Apply these simple classes to your HTML elements to create a beautiful and responsive layout. 72 | 73 | | Class | Description | 74 | | --- | --- | 75 | | `.container` | Controls page max-width and centers page in window | 76 | | `.row` | Contains `.column` elements | 77 | | `.centered` | Can be combined with `.row` to center columns within the row | 78 | | `.column` | Applies base styles for every column | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /scss/carbon.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Carbon 3 | * A simple, lightweight and responsive CSS grid system by @colebemis 4 | * https://github.com/colebemis/carbon 5 | */ 6 | 7 | @import "compass"; 8 | 9 | /* Variables */ 10 | 11 | // $column-groups controls column divisions 12 | // e.g. $column-groups: (2, 3, 4) will create a 2-, 3- and 4-column grid and 13 | // allow for the use of small-n-of-2, small-n-of-3 and small-n-of-4 classes 14 | $column-groups: (2, 3, 4); 15 | 16 | // Page max-width 17 | $max-width: 960px; 18 | 19 | // Gutter width 20 | $gutter: 30px; 21 | 22 | // Breakpoints 23 | $breakpoint-small: 30rem; 24 | $breakpoint-medium: 48rem; 25 | 26 | /* Base Styles */ 27 | 28 | *, 29 | *::before, 30 | *::after { 31 | padding: 0; 32 | margin: 0; 33 | @include box-sizing(border-box); 34 | } 35 | 36 | .container { 37 | width: 100%; 38 | max-width: $max-width; 39 | padding: 0 ($gutter/2); 40 | margin: 0 auto; 41 | } 42 | 43 | .row { 44 | margin: 0 ($gutter/-2); 45 | @include pie-clearfix(); 46 | font-size: 0; // Hack to remove whitespace between inline-block elements 47 | // http://davidwalsh.name/remove-whitespace-inline-block 48 | } 49 | 50 | .column { 51 | position: relative; 52 | display: inline-block; 53 | width: 100%; 54 | padding: 0 ($gutter/2); 55 | font-size: 16px; 56 | font-size: 1rem; // Restore font-size previously set to 0 57 | text-align: left; 58 | vertical-align: top; 59 | 60 | &:last-of-type { 61 | float: right; 62 | } 63 | } 64 | 65 | .centered { 66 | text-align: center; 67 | 68 | > .column:last-of-type { 69 | float: none; 70 | } 71 | } 72 | 73 | /* Media queries */ 74 | 75 | // Small screens 76 | // No media query since this is the default 77 | 78 | @each $number-of-columns in $column-groups { 79 | @for $i from 1 through $number-of-columns { 80 | 81 | .small-#{$i}-of-#{$number-of-columns} { 82 | width: percentage($i/$number-of-columns); 83 | } 84 | 85 | .small-offset-#{$i}-of-#{$number-of-columns} { 86 | margin-left: percentage($i/$number-of-columns); 87 | } 88 | 89 | .small-push-#{$i}-of-#{$number-of-columns} { 90 | left: percentage($i/$number-of-columns); 91 | } 92 | 93 | .small-pull-#{$i}-of-#{$number-of-columns} { 94 | right: percentage($i/$number-of-columns); 95 | } 96 | 97 | } // end @for 98 | } // end @ each 99 | 100 | // Medium screens 101 | 102 | @media screen and (min-width: $breakpoint-small) { 103 | 104 | @each $number-of-columns in $column-groups { 105 | @for $i from 1 through $number-of-columns { 106 | 107 | .medium-#{$i}-of-#{$number-of-columns} { 108 | width: percentage($i/$number-of-columns); 109 | } 110 | 111 | .medium-offset-#{$i}-of-#{$number-of-columns} { 112 | margin-left: percentage($i/$number-of-columns); 113 | } 114 | 115 | .medium-push-#{$i}-of-#{$number-of-columns} { 116 | left: percentage($i/$number-of-columns); 117 | } 118 | 119 | .medium-pull-#{$i}-of-#{$number-of-columns} { 120 | right: percentage($i/$number-of-columns); 121 | } 122 | 123 | } // end @for 124 | } // end @each 125 | 126 | } 127 | 128 | // Large screens 129 | 130 | @media screen and (min-width: $breakpoint-medium) { 131 | 132 | @each $number-of-columns in $column-groups { 133 | @for $i from 1 through $number-of-columns { 134 | 135 | .large-#{$i}-of-#{$number-of-columns} { 136 | width: percentage($i/$number-of-columns); 137 | } 138 | 139 | .large-offset-#{$i}-of-#{$number-of-columns} { 140 | margin-left: percentage($i/$number-of-columns); 141 | } 142 | 143 | .large-push-#{$i}-of-#{$number-of-columns} { 144 | left: percentage($i/$number-of-columns); 145 | } 146 | 147 | .large-pull-#{$i}-of-#{$number-of-columns} { 148 | right: percentage($i/$number-of-columns); 149 | } 150 | 151 | } // end @for 152 | } // end @each 153 | 154 | } 155 | -------------------------------------------------------------------------------- /styl/carbon.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * Carbon 3 | * A simple, lightweight and responsive CSS grid system by @colebemis 4 | * https://github.com/colebemis/carbon 5 | */ 6 | 7 | /* Variables */ 8 | 9 | // column-groups controls column divisions 10 | // e.g. column-groups = 2 3 4 will create a 2-, 3- and 4-column grid and 11 | // allow for the use of small-n-of-2, small-n-of-3 and small-n-of-4 classes 12 | column-groups = 2 3 4 13 | 14 | // Page max-width 15 | max-width = 960px 16 | 17 | // Gutter width 18 | gutter = 30px 19 | 20 | // Breakpoints 21 | breakpoint-small = 30rem 22 | breakpoint-medium = 48rem 23 | 24 | /* Base Styles */ 25 | 26 | * 27 | *::before 28 | *::after 29 | padding 0 30 | margin 0 31 | box-sizing border-box 32 | 33 | .container 34 | width 100% 35 | max-width max-width 36 | padding 0 (gutter/2) 37 | margin 0 auto 38 | 39 | .row 40 | margin 0 (gutter/-2) 41 | clearfix() 42 | font-size 0 // Hack to remove whitespace between inline-block elements 43 | // http://davidwalsh.name/remove-whitespace-inline-block 44 | 45 | .column 46 | position relative 47 | display inline-block 48 | width 100% 49 | padding 0 (gutter/2) 50 | font-size 16px 51 | font-size 1rem // Restore font-size previously set to 0 52 | text-align left 53 | vertical-align top 54 | 55 | &:last-of-type 56 | float right 57 | 58 | .centered 59 | text-align center 60 | 61 | > .column:last-of-type 62 | float none 63 | 64 | /* Media queries */ 65 | 66 | // Small screens 67 | // No media query since this is the default 68 | 69 | for number-of-columns in column-groups 70 | for i in (1..number-of-columns) 71 | 72 | .small-{i}-of-{number-of-columns} 73 | width (i/number-of-columns) * 100% 74 | 75 | .small-offset-{i}-of-{number-of-columns} 76 | margin-left (i/number-of-columns) * 100% 77 | 78 | .small-push-{i}-of-{number-of-columns} 79 | left (i/number-of-columns) * 100% 80 | 81 | .small-pull-{i}-of-{number-of-columns} 82 | right (i/number-of-columns) * 100% 83 | 84 | // Medium screens 85 | 86 | @media screen and (min-width: breakpoint-small) 87 | 88 | for number-of-columns in column-groups 89 | for i in (1..number-of-columns) 90 | 91 | .medium-{i}-of-{number-of-columns} 92 | width (i/number-of-columns) * 100% 93 | 94 | .medium-offset-{i}-of-{number-of-columns} 95 | margin-left (i/number-of-columns) * 100% 96 | 97 | .medium-push-{i}-of-{number-of-columns} 98 | left (i/number-of-columns) * 100% 99 | 100 | .medium-pull-{i}-of-{number-of-columns} 101 | right (i/number-of-columns) * 100% 102 | 103 | // Large screens 104 | 105 | @media screen and (min-width: breakpoint-medium) 106 | 107 | for number-of-columns in column-groups 108 | for i in (1..number-of-columns) 109 | 110 | .large-{i}-of-{number-of-columns} 111 | width (i/number-of-columns) * 100% 112 | 113 | .large-offset-{i}-of-{number-of-columns} 114 | margin-left (i/number-of-columns) * 100% 115 | 116 | .large-push-{i}-of-{number-of-columns} 117 | left (i/number-of-columns) * 100% 118 | 119 | .large-pull-{i}-of-{number-of-columns} 120 | right (i/number-of-columns) * 100% 121 | --------------------------------------------------------------------------------