├── .rbenv-gemsets
├── Gemfile
├── Gemfile.lock
├── LICENSE.txt
├── README.md
├── css
    ├── concrete.css
    └── concrete.css.map
├── index.html
└── scss
    ├── _mixins.scss
    ├── _reset.scss
    └── concrete.scss


/.rbenv-gemsets:
--------------------------------------------------------------------------------
1 | concrete
2 | 


--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 | gem 'sass'
3 | 


--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
 1 | GEM
 2 |   remote: https://rubygems.org/
 3 |   specs:
 4 |     sass (3.4.9)
 5 | 
 6 | PLATFORMS
 7 |   ruby
 8 | 
 9 | DEPENDENCIES
10 |   sass
11 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2013 David Lumley
 2 | 
 3 | MIT License
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining
 6 | a copy of this software and associated documentation files (the
 7 | "Software"), to deal in the Software without restriction, including
 8 | without limitation the rights to use, copy, modify, merge, publish,
 9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Concrete
 2 | 
 3 | A simple, responsive, ultra lightweight twelve column grid framework.
 4 | 
 5 | 
 6 | Concrete is designed to be easy to read, simple to use, and small in file size.
 7 | 
 8 | It's currently:
 9 | * **2402** bytes or
10 | * **709** bytes gzipped
11 | 
12 | ## Usage
13 | 
14 | Concrete's grid is build using `columns` classes which are inside of a `row` class.
15 | 
16 | The `row` class encapsulates the `columns`. As Concrete uses a twelve column grid, the `twelve columns` class will take up the whole of the row.
17 | 
18 |     <div class='row'>
19 |       <div class='twelve columns'>
20 |       </div>
21 |     </div>
22 | 
23 | You can mix it up however you like though.
24 | 
25 |     <div class='row'>
26 |       <div class='four columns'>
27 |       </div>
28 |       <div class='eight columns'>
29 |       </div>
30 |     </div>
31 | 
32 | You can put a `row` class inside of a `column` class in order to nest `columns`.
33 | 
34 |     <div class='row'>
35 |       <div class='four columns'>
36 |       </div>
37 |       <div class='eight columns'>
38 |         <div class='row'>
39 |           <div class='six columns'>
40 |           </div>
41 |           <div class='six columns'>
42 |           </div>
43 |         </div>
44 |       </div>
45 |     </div>
46 | 
47 | You can also [see it in action](http://davidlumley.github.io/concrete/).
48 | 
49 | ## Contributing
50 | 
51 | If you're eager to contribute to Concrete's development, please fork it, create a feature branch, then make a pull request.
52 | 
53 | ### Converting SASS/SCSS to CSS
54 | 
55 | You'll need to ensure ruby is installed.
56 | 
57 | * `gem install bundler` - to install bundler
58 | * `bundle install` - to install sass
59 | * `sass --watch ./scss:./css -t compressed` - to watch the files in the SCSS directory for changes, and compile them into `concrete.css`
60 | 


--------------------------------------------------------------------------------
/css/concrete.css:
--------------------------------------------------------------------------------
1 | html,body{margin:0;padding:0}*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row{overflow:hidden;max-width:1024px;min-width:768px;margin:0 auto}.row:after{content:"";display:table;clear:both}.row .row{max-width:100%;min-width:100%}.column,.columns{float:left;padding-left:10px;padding-right:10px}.column .column:first-of-type,.column .columns:first-of-type,.columns .column:first-of-type,.columns .columns:first-of-type{padding-left:0}.column .column:last-of-type,.column .columns:last-of-type,.columns .column:last-of-type,.columns .columns:last-of-type{padding-right:0}.column.without-padding,.columns.without-padding{padding-left:0;padding-right:0}.column.one,.columns.one{width:8.33333%}.column.two,.columns.two{width:16.66667%}.column.three,.columns.three{width:25%}.column.four,.columns.four{width:33.33333%}.column.five,.columns.five{width:41.66667%}.column.six,.columns.six{width:50%}.column.seven,.columns.seven{width:58.33333%}.column.eight,.columns.eight{width:66.66667%}.column.nine,.columns.nine{width:75%}.column.ten,.columns.ten{width:83.33333%}.column.eleven,.columns.eleven{width:91.66667%}.column.twelve,.columns.twelve{width:100%}.offset.by-one{margin-left:8.33333%}.offset.by-two{margin-left:16.66667%}.offset.by-three{margin-left:25%}.offset.by-four{margin-left:33.33333%}.offset.by-five{margin-left:41.66667%}.offset.by-six{margin-left:50%}.offset.by-seven{margin-left:58.33333%}.offset.by-eight{margin-left:66.66667%}.offset.by-nine{margin-left:75%}.offset.by-ten{margin-left:83.33333%}.offset.by-eleven{margin-left:91.66667%}@media handheld, only screen and (max-width: 767px){.row{width:100%;min-width:0}.offset.by-one,.offset.by-two,.offset.by-three,.offset.by-four,.offset.by-five,.offset.by-six,.offset.by-seven,.offset.by-eight,.offset.by-nine,.offset.by-ten,.offset.by-eleven{margin-left:0}.column.one,.column.two,.column.three,.column.four,.column.five,.column.six,.column.seven,.column.eight,.column.nine,.column.ten,.column.eleven,.column.twelve,.columns.one,.columns.two,.columns.three,.columns.four,.columns.five,.columns.six,.columns.seven,.columns.eight,.columns.nine,.columns.ten,.columns.eleven,.columns.twelve{width:auto;float:none;padding-left:10px;padding-right:10px}.column .column,.column .columns,.columns .column,.columns .columns{padding-left:0;padding-right:0}}
2 | /*# sourceMappingURL=concrete.css.map */
3 | 


--------------------------------------------------------------------------------
/css/concrete.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "AAAA,SAAU,CACR,MAAM,CAAG,CAAC,CACV,OAAO,CAAE,CAAC,CAGZ,kBAAmB,CACjB,kBAAkB,CAAE,UAAU,CAC9B,eAAe,CAAK,UAAU,CAC9B,UAAU,CAAU,UAAU,CCDhC,IAAK,CACH,QAAQ,CAAG,MAAM,CACjB,SAAS,CANC,MAAM,CAOhB,SAAS,CANC,KAAK,CAOf,MAAM,CAAK,MAAM,CAEjB,UAAQ,CACN,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,KAAK,CACd,KAAK,CAAI,IAAI,CAGf,SAAK,CACH,SAAS,CAAE,IAAI,CACf,SAAS,CAAE,IAAI,CAKnB,gBAAkB,CAChB,KAAK,CAAU,IAAI,CACnB,YAAY,CAvBE,IAAI,CAwBlB,aAAa,CAxBC,IAAI,CA2BhB,2HAAgB,CACd,YAAY,CAAG,CAAC,CAElB,uHAAe,CACb,aAAa,CAAE,CAAC,CAIpB,gDAAkB,CAChB,YAAY,CAAG,CAAC,CAChB,aAAa,CAAE,CAAC,CAGlB,wBAAS,CC5CT,KAAK,CAAE,QACT,CD4CE,wBAAS,CC7CT,KAAK,CAAE,SACT,CD6CE,4BAAS,CC9CT,KAAK,CAAE,GACT,CD8CE,0BAAS,CC/CT,KAAK,CAAE,SACT,CD+CE,0BAAS,CChDT,KAAK,CAAE,SACT,CDgDE,wBAAS,CCjDT,KAAK,CAAE,GACT,CDiDE,4BAAS,CClDT,KAAK,CAAE,SACT,CDkDE,4BAAS,CCnDT,KAAK,CAAE,SACT,CDmDE,0BAAS,CCpDT,KAAK,CAAE,GACT,CDoDE,wBAAS,CCrDT,KAAK,CAAE,SACT,CDqDE,8BAAS,CCtDT,KAAK,CAAE,SACT,CDsDE,8BAAS,CCvDT,KAAK,CAAE,IACT,CD0DE,cAAY,CCvDZ,WAAW,CAAE,QACf,CDuDE,cAAY,CCxDZ,WAAW,CAAE,SACf,CDwDE,gBAAY,CCzDZ,WAAW,CAAE,GACf,CDyDE,eAAY,CC1DZ,WAAW,CAAE,SACf,CD0DE,eAAY,CC3DZ,WAAW,CAAE,SACf,CD2DE,cAAY,CC5DZ,WAAW,CAAE,GACf,CD4DE,gBAAY,CC7DZ,WAAW,CAAE,SACf,CD6DE,gBAAY,CC9DZ,WAAW,CAAE,SACf,CD8DE,eAAY,CC/DZ,WAAW,CAAE,GACf,CD+DE,cAAY,CChEZ,WAAW,CAAE,SACf,CDgEE,iBAAY,CCjEZ,WAAW,CAAE,SACf,CDmEA,mDAAkD,CAChD,IAAK,CACH,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,CAAC,CAIZ,gLAUY,CACV,WAAW,CAAE,CAAC,CAKhB,yUAWS,CACP,KAAK,CAAU,IAAI,CACnB,KAAK,CAAU,IAAI,CACnB,YAAY,CAzGF,IAAI,CA0Gd,aAAa,CA1GH,IAAI,CA6GhB,mEAAkB,CAChB,YAAY,CAAG,CAAC,CAChB,aAAa,CAAE,CAAC",
4 | "sources": ["../scss/_reset.scss","../scss/concrete.scss","../scss/_mixins.scss"],
5 | "names": [],
6 | "file": "concrete.css"
7 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>Concrete</title>
 4 |     <link rel='stylesheet' type='text/css' href='https://raw.github.com/davidlumley/concrete/master/concrete.css'>
 5 |     <style>
 6 |     html,body{font-size:16px;line-height:2em;font-family:'Helvetica Neue',Arial,sans-serif;color:#3c4141}.column .content,.columns .content{width:100%;margin-top:10px;margin-bottom:10px;padding-top:10px;padding-bottom:10px;border-radius:3px;background:#dce1e1}.column .content p,.columns .content p{text-align:center}.column .column .content,.column .columns .content,.columns .column .content,.columns .columns .content{background:#c8cdcd}
 7 |     </style>
 8 |   </head>
 9 |   <body>
10 |     <div class='row'>
11 |       <div class='twelve columns'>
12 |         <h1>Concrete</h1>
13 |         <p>A simple, responsive, ultra lightweight grid framework designed to work on high resolution desktops, right down to mobile. Check it out on <a href='https://github.com/davidlumley/concrete'>Github</a></p>
14 |       </div>
15 |     </div>
16 |     <div class='row'>
17 |       <div class='twelve columns'>
18 |         <div class='content'><p>twelve columns</p></div>
19 |       </div>
20 |       <div class='four columns'>
21 |         <div class='content'><p>four columns</p></div>
22 |       </div>
23 |       <div class='eight columns'>
24 |         <div class='content'><p>eight columns</p></div>
25 |       </div>
26 |       <div class='six columns'>
27 |         <div class='content'><p>six columns</p></div>
28 |       </div>
29 |       <div class='six columns'>
30 |         <div class='content'><p>six columns</p></div>
31 |       </div>
32 |     </div>
33 |     <div class='row'>
34 |       <div class='twelve columns'>
35 |         <p>You can also nest columns.</p>
36 |       </div>
37 |     </div>
38 |     <div class='row'>
39 |       <div class='three columns'>
40 |         <div class='row'>
41 |           <div class='six columns'>
42 |             <div class='content'><p>six columns</p></div>
43 |           </div>
44 |           <div class='six columns'>
45 |             <div class='content'><p>six columns</p></div>
46 |           </div>
47 |         </div>
48 |         <div class='row'>
49 |           <div class='twelve columns'>
50 |             <div class='content'><p>twelve columns</p></div>
51 |           </div>
52 |         </div>
53 |       </div>
54 |       <div class='nine columns'>
55 |         <div class='row'>
56 |           <div class='six columns'>
57 |             <div class='content'><p>six columns</p></div>
58 |           </div>
59 |           <div class='six columns'>
60 |             <div class='content'><p>six columns</p></div>
61 |           </div>
62 |         </div>
63 |         <div class='row'>
64 |           <div class='twelve columns'>
65 |             <div class='content'><p>twelve columns</p></div>
66 |           </div>
67 |         </div>
68 |       </div>
69 |     </div>
70 |     <div class='row'>
71 |       <div class='twelve columns'>
72 |         <p>And offset columns too</p>
73 |       </div>
74 |     </div>
75 |     <div class='row'>
76 |       <div class='four columns offset by-one'>
77 |         <div class='content'><p>four columns offset by-one</p></div>
78 |       </div>
79 |       <div class='four columns offset by-two'>
80 |         <div class='content'><p>four columns offset by-two</p></div>
81 |       </div>
82 |     </div>
83 |     <div class='row'>
84 |       <div class='six columns offset by-three'>
85 |         <div class='content'><p>six columns offset by-three</p></div>
86 |       </div>
87 |     </div>
88 |   </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/scss/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin column-width($number-of-columns){
2 |   width: ($number-of-columns / 12) * 100%
3 | }
4 | 
5 | @mixin offset-margin($number-of-columns){
6 |   margin-left: ($number-of-columns / 12) * 100%
7 | }
8 | 


--------------------------------------------------------------------------------
/scss/_reset.scss:
--------------------------------------------------------------------------------
 1 | html,body {
 2 |   margin:  0;
 3 |   padding: 0;
 4 | }
 5 | 
 6 | *,*:after,*:before {
 7 |   -webkit-box-sizing: border-box;
 8 |   -moz-box-sizing:    border-box;
 9 |   box-sizing:         border-box;
10 | }
11 | 


--------------------------------------------------------------------------------
/scss/concrete.scss:
--------------------------------------------------------------------------------
  1 | @import 'mixins';
  2 | @import 'reset';
  3 | 
  4 | $max-width: 1024px;   // the maximum width of the container in pixels
  5 | $min-width: 768px;    // the minimum width of the container in pixels, before it switches to a mobile friendly display
  6 | $padding-width: 10px; // the padding that will be applied to both sides of a column in pixels
  7 | 
  8 | .row {
  9 |   overflow:  hidden;
 10 |   max-width: $max-width;
 11 |   min-width: $min-width;
 12 |   margin:    0 auto;
 13 | 
 14 |   &:after {
 15 |     content: "";
 16 |     display: table;
 17 |     clear:   both;
 18 |   }
 19 | 
 20 |   .row {
 21 |     max-width: 100%;
 22 |     min-width: 100%;
 23 |   }
 24 | }
 25 | 
 26 | 
 27 | .column, .columns {
 28 |   float:         left;
 29 |   padding-left:  $padding-width;
 30 |   padding-right: $padding-width;
 31 | 
 32 |   & .column, & .columns {
 33 |     &:first-of-type {
 34 |       padding-left:  0;
 35 |     }
 36 |     &:last-of-type {
 37 |       padding-right: 0;
 38 |     }
 39 |   }
 40 | 
 41 |   &.without-padding {
 42 |     padding-left:  0;
 43 |     padding-right: 0;
 44 |   }
 45 | 
 46 |   &.one    { @include column-width(1); }
 47 |   &.two    { @include column-width(2); }
 48 |   &.three  { @include column-width(3); }
 49 |   &.four   { @include column-width(4); }
 50 |   &.five   { @include column-width(5); }
 51 |   &.six    { @include column-width(6); }
 52 |   &.seven  { @include column-width(7); }
 53 |   &.eight  { @include column-width(8); }
 54 |   &.nine   { @include column-width(9); }
 55 |   &.ten    { @include column-width(10); }
 56 |   &.eleven { @include column-width(11); }
 57 |   &.twelve { @include column-width(12); }
 58 | }
 59 | 
 60 | .offset {
 61 |   &.by-one    { @include offset-margin(1); }
 62 |   &.by-two    { @include offset-margin(2); }
 63 |   &.by-three  { @include offset-margin(3); }
 64 |   &.by-four   { @include offset-margin(4); }
 65 |   &.by-five   { @include offset-margin(5); }
 66 |   &.by-six    { @include offset-margin(6); }
 67 |   &.by-seven  { @include offset-margin(7); }
 68 |   &.by-eight  { @include offset-margin(8); }
 69 |   &.by-nine   { @include offset-margin(9); }
 70 |   &.by-ten    { @include offset-margin(10); }
 71 |   &.by-eleven { @include offset-margin(11); }
 72 | }
 73 | 
 74 | @media handheld,only screen and (max-width:767px) {
 75 |   .row {
 76 |     width: 100%;
 77 |     min-width: 0;
 78 |   }
 79 | 
 80 |   .offset {
 81 |     &.by-one,
 82 |     &.by-two,
 83 |     &.by-three,
 84 |     &.by-four,
 85 |     &.by-five,
 86 |     &.by-six,
 87 |     &.by-seven,
 88 |     &.by-eight,
 89 |     &.by-nine,
 90 |     &.by-ten,
 91 |     &.by-eleven {
 92 |       margin-left: 0;
 93 |     }
 94 |   }
 95 | 
 96 |   .column, .columns {
 97 |     &.one,
 98 |     &.two,
 99 |     &.three,
100 |     &.four,
101 |     &.five,
102 |     &.six,
103 |     &.seven,
104 |     &.eight,
105 |     &.nine,
106 |     &.ten,
107 |     &.eleven,
108 |     &.twelve {
109 |       width:         auto;
110 |       float:         none;
111 |       padding-left:  $padding-width;
112 |       padding-right: $padding-width;
113 |     }
114 | 
115 |     .column, .columns {
116 |       padding-left:  0;
117 |       padding-right: 0;
118 |     }
119 |   }
120 | }
121 | 


--------------------------------------------------------------------------------