Dynamic grid, thanks @matthewcopeland
This commit is contained in:
		
							
								
								
									
										365
									
								
								css/skeleton.css
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										365
									
								
								css/skeleton.css
									
									
									
									
										vendored
									
									
								
							| @@ -58,302 +58,185 @@ body { | |||||||
|   background: #fff; |   background: #fff; | ||||||
|   font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; |   font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||||||
|   color: #444; |   color: #444; | ||||||
|   -webkit-font-smoothing: antialiased; |  | ||||||
|   /* Fix for webkit rendering */ |  | ||||||
|   -webkit-text-size-adjust: 100%; } |   -webkit-text-size-adjust: 100%; } | ||||||
|  |  | ||||||
| /* #Forms | /* #Forms | ||||||
| ================================================== */ | ================================================== */ | ||||||
| /* #Base 960 Grid |  | ||||||
| ================================================== */ |  | ||||||
| .container { | .container { | ||||||
|   position: relative; |   position: relative; | ||||||
|   width: 960px; |  | ||||||
|   margin: 0 auto; |   margin: 0 auto; | ||||||
|   padding: 0; } |   padding: 0; } | ||||||
|  |  | ||||||
| .container .column, | .column, .columns { | ||||||
| .container .columns { |  | ||||||
|   float: left; |   float: left; | ||||||
|   display: inline; |   display: inline; | ||||||
|   margin-left: 10px; |   margin-left: 10px; | ||||||
|   margin-right: 10px; |   margin-right: 10px; } | ||||||
|   box-sizing: border-box; |   .column.alpha, .columns.alpha { | ||||||
|   -webkit-box-sizing: border-box; |     margin-left: 0; } | ||||||
|   -moz-box-sizing: border-box; |   .column.omerga, .columns.omerga { | ||||||
|   -ms-box-sizing: border-box; |     margin-right: 0; } | ||||||
|   -o-box-sizing: border-box; |  | ||||||
|   -khtml-box-sizing: border-box; } |  | ||||||
|  |  | ||||||
| .row { | .row { | ||||||
|   margin-bottom: 20px; } |   margin-bottom: 20px; } | ||||||
|  |  | ||||||
| /* Nested Column Classes */ | .container { | ||||||
| .column.alpha, .columns.alpha { |   width: 960px; } | ||||||
|   margin-left: 0; } |   .container .columns.one, .container .column.one { | ||||||
|  |  | ||||||
| .column.omega, .columns.omega { |  | ||||||
|   margin-right: 0; } |  | ||||||
|  |  | ||||||
| /* Base Grid */ |  | ||||||
| .container .one.column, |  | ||||||
| .container .one.columns { |  | ||||||
|     width: 40px; } |     width: 40px; } | ||||||
|  |   .container .columns.two, .container .column.two { | ||||||
| .container .two.columns { |  | ||||||
|     width: 100px; } |     width: 100px; } | ||||||
|  |   .container .columns.three, .container .column.three { | ||||||
| .container .three.columns { |  | ||||||
|     width: 160px; } |     width: 160px; } | ||||||
|  |   .container .columns.four, .container .column.four { | ||||||
| .container .four.columns { |  | ||||||
|     width: 220px; } |     width: 220px; } | ||||||
|  |   .container .columns.five, .container .column.five { | ||||||
| .container .five.columns { |  | ||||||
|     width: 280px; } |     width: 280px; } | ||||||
|  |   .container .columns.six, .container .column.six { | ||||||
| .container .six.columns { |  | ||||||
|     width: 340px; } |     width: 340px; } | ||||||
|  |   .container .columns.seven, .container .column.seven { | ||||||
| .container .seven.columns { |  | ||||||
|     width: 400px; } |     width: 400px; } | ||||||
|  |   .container .columns.eight, .container .column.eight { | ||||||
| .container .eight.columns { |  | ||||||
|     width: 460px; } |     width: 460px; } | ||||||
|  |   .container .columns.nine, .container .column.nine { | ||||||
| .container .nine.columns { |  | ||||||
|     width: 520px; } |     width: 520px; } | ||||||
|  |   .container .columns.ten, .container .column.ten { | ||||||
| .container .ten.columns { |  | ||||||
|     width: 580px; } |     width: 580px; } | ||||||
|  |   .container .columns.eleven, .container .column.eleven { | ||||||
| .container .eleven.columns { |  | ||||||
|     width: 640px; } |     width: 640px; } | ||||||
|  |   .container .columns.twelve, .container .column.twelve { | ||||||
| .container .twelve.columns { |  | ||||||
|     width: 700px; } |     width: 700px; } | ||||||
|  |   .container .columns.thirteen, .container .column.thirteen { | ||||||
| .container .thirteen.columns { |  | ||||||
|     width: 760px; } |     width: 760px; } | ||||||
|  |   .container .columns.fourteen, .container .column.fourteen { | ||||||
| .container .fourteen.columns { |  | ||||||
|     width: 820px; } |     width: 820px; } | ||||||
|  |   .container .columns.fifteen, .container .column.fifteen { | ||||||
| .container .fifteen.columns { |  | ||||||
|     width: 880px; } |     width: 880px; } | ||||||
|  |   .container .columns.sixteen, .container .column.sixteen { | ||||||
| .container .sixteen.columns { |  | ||||||
|     width: 940px; } |     width: 940px; } | ||||||
|  |   .container .columns.one-third, .container .column.one-third { | ||||||
| .container .one-third.column { |  | ||||||
|     width: 300px; } |     width: 300px; } | ||||||
|  |   .container .columns.two-thirds, .container .column.two-thirds { | ||||||
| .container .two-thirds.column { |  | ||||||
|     width: 620px; } |     width: 620px; } | ||||||
|  |  | ||||||
| /* Offsets */ |  | ||||||
|   .container .offset-by-one { |   .container .offset-by-one { | ||||||
|     padding-left: 60px; } |     padding-left: 60px; } | ||||||
|  |  | ||||||
|   .container .offset-by-two { |   .container .offset-by-two { | ||||||
|     padding-left: 120px; } |     padding-left: 120px; } | ||||||
|  |  | ||||||
|   .container .offset-by-three { |   .container .offset-by-three { | ||||||
|     padding-left: 180px; } |     padding-left: 180px; } | ||||||
|  |  | ||||||
|   .container .offset-by-four { |   .container .offset-by-four { | ||||||
|     padding-left: 240px; } |     padding-left: 240px; } | ||||||
|  |  | ||||||
|   .container .offset-by-five { |   .container .offset-by-five { | ||||||
|     padding-left: 300px; } |     padding-left: 300px; } | ||||||
|  |  | ||||||
|   .container .offset-by-six { |   .container .offset-by-six { | ||||||
|     padding-left: 360px; } |     padding-left: 360px; } | ||||||
|  |  | ||||||
|   .container .offset-by-seven { |   .container .offset-by-seven { | ||||||
|     padding-left: 420px; } |     padding-left: 420px; } | ||||||
|  |  | ||||||
|   .container .offset-by-eight { |   .container .offset-by-eight { | ||||||
|     padding-left: 480px; } |     padding-left: 480px; } | ||||||
|  |  | ||||||
|   .container .offset-by-nine { |   .container .offset-by-nine { | ||||||
|     padding-left: 540px; } |     padding-left: 540px; } | ||||||
|  |  | ||||||
|   .container .offset-by-ten { |   .container .offset-by-ten { | ||||||
|     padding-left: 600px; } |     padding-left: 600px; } | ||||||
|  |  | ||||||
|   .container .offset-by-eleven { |   .container .offset-by-eleven { | ||||||
|     padding-left: 660px; } |     padding-left: 660px; } | ||||||
|  |  | ||||||
|   .container .offset-by-twelve { |   .container .offset-by-twelve { | ||||||
|     padding-left: 720px; } |     padding-left: 720px; } | ||||||
|  |  | ||||||
|   .container .offset-by-thirteen { |   .container .offset-by-thirteen { | ||||||
|     padding-left: 780px; } |     padding-left: 780px; } | ||||||
|  |  | ||||||
|   .container .offset-by-fourteen { |   .container .offset-by-fourteen { | ||||||
|     padding-left: 840px; } |     padding-left: 840px; } | ||||||
|  |  | ||||||
|   .container .offset-by-fifteen { |   .container .offset-by-fifteen { | ||||||
|     padding-left: 900px; } |     padding-left: 900px; } | ||||||
|  |  | ||||||
| /* #Tablet (Portrait) | @media only screen and (max-width: 959px) { | ||||||
| ================================================== */ |   .container { | ||||||
| /* Note: Design for a width of 768px */ |     width: 768px; } | ||||||
| @media only screen and (min-width: 768px) and (max-width: 959px) { |     .container .columns.one, .container .column.one { | ||||||
|  |       width: 28px; } | ||||||
|  |     .container .columns.two, .container .column.two { | ||||||
|  |       width: 76px; } | ||||||
|  |     .container .columns.three, .container .column.three { | ||||||
|  |       width: 124px; } | ||||||
|  |     .container .columns.four, .container .column.four { | ||||||
|  |       width: 172px; } | ||||||
|  |     .container .columns.five, .container .column.five { | ||||||
|  |       width: 220px; } | ||||||
|  |     .container .columns.six, .container .column.six { | ||||||
|  |       width: 268px; } | ||||||
|  |     .container .columns.seven, .container .column.seven { | ||||||
|  |       width: 316px; } | ||||||
|  |     .container .columns.eight, .container .column.eight { | ||||||
|  |       width: 364px; } | ||||||
|  |     .container .columns.nine, .container .column.nine { | ||||||
|  |       width: 412px; } | ||||||
|  |     .container .columns.ten, .container .column.ten { | ||||||
|  |       width: 460px; } | ||||||
|  |     .container .columns.eleven, .container .column.eleven { | ||||||
|  |       width: 508px; } | ||||||
|  |     .container .columns.twelve, .container .column.twelve { | ||||||
|  |       width: 556px; } | ||||||
|  |     .container .columns.thirteen, .container .column.thirteen { | ||||||
|  |       width: 604px; } | ||||||
|  |     .container .columns.fourteen, .container .column.fourteen { | ||||||
|  |       width: 652px; } | ||||||
|  |     .container .columns.fifteen, .container .column.fifteen { | ||||||
|  |       width: 700px; } | ||||||
|  |     .container .columns.sixteen, .container .column.sixteen { | ||||||
|  |       width: 748px; } | ||||||
|  |     .container .columns.one-third, .container .column.one-third { | ||||||
|  |       width: 236px; } | ||||||
|  |     .container .columns.two-thirds, .container .column.two-thirds { | ||||||
|  |       width: 492px; } | ||||||
|  |     .container .offset-by-one { | ||||||
|  |       padding-left: 48px; } | ||||||
|  |     .container .offset-by-two { | ||||||
|  |       padding-left: 96px; } | ||||||
|  |     .container .offset-by-three { | ||||||
|  |       padding-left: 144px; } | ||||||
|  |     .container .offset-by-four { | ||||||
|  |       padding-left: 192px; } | ||||||
|  |     .container .offset-by-five { | ||||||
|  |       padding-left: 240px; } | ||||||
|  |     .container .offset-by-six { | ||||||
|  |       padding-left: 288px; } | ||||||
|  |     .container .offset-by-seven { | ||||||
|  |       padding-left: 336px; } | ||||||
|  |     .container .offset-by-eight { | ||||||
|  |       padding-left: 384px; } | ||||||
|  |     .container .offset-by-nine { | ||||||
|  |       padding-left: 432px; } | ||||||
|  |     .container .offset-by-ten { | ||||||
|  |       padding-left: 480px; } | ||||||
|  |     .container .offset-by-eleven { | ||||||
|  |       padding-left: 528px; } | ||||||
|  |     .container .offset-by-twelve { | ||||||
|  |       padding-left: 576px; } | ||||||
|  |     .container .offset-by-thirteen { | ||||||
|  |       padding-left: 624px; } | ||||||
|  |     .container .offset-by-fourteen { | ||||||
|  |       padding-left: 672px; } | ||||||
|  |     .container .offset-by-fifteen { | ||||||
|  |       padding-left: 720px; } | ||||||
|  |  | ||||||
|   .container { |   .container { | ||||||
|     width: 768px; } |     width: 768px; } | ||||||
|  |  | ||||||
|   .container .column, |  | ||||||
|   .container .columns { |  | ||||||
|     margin-left: 10px; |  | ||||||
|     margin-right: 10px; } |  | ||||||
|  |  | ||||||
|   .column.alpha, .columns.alpha { |   .column.alpha, .columns.alpha { | ||||||
|     margin-left: 0; |  | ||||||
|     margin-right: 10px; } |     margin-right: 10px; } | ||||||
|  |  | ||||||
|   .column.omega, .columns.omega { |   .column.omega, .columns.omega { | ||||||
|     margin-right: 0; |  | ||||||
|     margin-left: 10px; } |     margin-left: 10px; } | ||||||
|  |  | ||||||
|   .alpha.omega { |   .alpha.omega { | ||||||
|     margin-left: 0; |     margin-right: 0; | ||||||
|     margin-right: 0; } |     margin-left: 0; } } | ||||||
|  |  | ||||||
|   .container .one.column, |  | ||||||
|   .container .one.columns { |  | ||||||
|     width: 28px; } |  | ||||||
|  |  | ||||||
|   .container .two.columns { |  | ||||||
|     width: 76px; } |  | ||||||
|  |  | ||||||
|   .container .three.columns { |  | ||||||
|     width: 124px; } |  | ||||||
|  |  | ||||||
|   .container .four.columns { |  | ||||||
|     width: 172px; } |  | ||||||
|  |  | ||||||
|   .container .five.columns { |  | ||||||
|     width: 220px; } |  | ||||||
|  |  | ||||||
|   .container .six.columns { |  | ||||||
|     width: 268px; } |  | ||||||
|  |  | ||||||
|   .container .seven.columns { |  | ||||||
|     width: 316px; } |  | ||||||
|  |  | ||||||
|   .container .eight.columns { |  | ||||||
|     width: 364px; } |  | ||||||
|  |  | ||||||
|   .container .nine.columns { |  | ||||||
|     width: 412px; } |  | ||||||
|  |  | ||||||
|   .container .ten.columns { |  | ||||||
|     width: 460px; } |  | ||||||
|  |  | ||||||
|   .container .eleven.columns { |  | ||||||
|     width: 508px; } |  | ||||||
|  |  | ||||||
|   .container .twelve.columns { |  | ||||||
|     width: 556px; } |  | ||||||
|  |  | ||||||
|   .container .thirteen.columns { |  | ||||||
|     width: 604px; } |  | ||||||
|  |  | ||||||
|   .container .fourteen.columns { |  | ||||||
|     width: 652px; } |  | ||||||
|  |  | ||||||
|   .container .fifteen.columns { |  | ||||||
|     width: 700px; } |  | ||||||
|  |  | ||||||
|   .container .sixteen.columns { |  | ||||||
|     width: 748px; } |  | ||||||
|  |  | ||||||
|   .container .one-third.column { |  | ||||||
|     width: 236px; } |  | ||||||
|  |  | ||||||
|   .container .two-thirds.column { |  | ||||||
|     width: 492px; } |  | ||||||
|  |  | ||||||
|   /* Offsets */ |  | ||||||
|   .container .offset-by-one { |  | ||||||
|     padding-left: 48px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-two { |  | ||||||
|     padding-left: 96px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-three { |  | ||||||
|     padding-left: 144px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-four { |  | ||||||
|     padding-left: 192px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-five { |  | ||||||
|     padding-left: 240px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-six { |  | ||||||
|     padding-left: 288px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-seven { |  | ||||||
|     padding-left: 336px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-eight { |  | ||||||
|     padding-left: 384px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-nine { |  | ||||||
|     padding-left: 432px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-ten { |  | ||||||
|     padding-left: 480px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-eleven { |  | ||||||
|     padding-left: 528px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-twelve { |  | ||||||
|     padding-left: 576px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-thirteen { |  | ||||||
|     padding-left: 624px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-fourteen { |  | ||||||
|     padding-left: 672px; } |  | ||||||
|  |  | ||||||
|   .container .offset-by-fifteen { |  | ||||||
|     padding-left: 720px; } } |  | ||||||
| /*  #Mobile (Portrait) |  | ||||||
| ================================================== */ |  | ||||||
| /* Note: Design for a width of 320px */ |  | ||||||
| @media only screen and (max-width: 767px) { | @media only screen and (max-width: 767px) { | ||||||
|   .container { |   .container { | ||||||
|     width: 300px; } |     width: 90%; } | ||||||
|  |     .container .column, .container .columns { | ||||||
|   .container .columns, |  | ||||||
|   .container .column { |  | ||||||
|       margin: 0; } |       margin: 0; } | ||||||
|  |       .container .column.one, .container .column.two, .container .column.three, .container .column.four, .container .column.five, .container .column.six, .container .column.seven, .container .column.eight, .container .column.nine, .container .column.ten, .container .column.eleven, .container .column.twelve, .container .column.thirteen, .container .column.fourteen, .container .column.fifteen, .container .column.sixteen, .container .column.one-third, .container .column.two-thirds, .container .columns.one, .container .columns.two, .container .columns.three, .container .columns.four, .container .columns.five, .container .columns.six, .container .columns.seven, .container .columns.eight, .container .columns.nine, .container .columns.ten, .container .columns.eleven, .container .columns.twelve, .container .columns.thirteen, .container .columns.fourteen, .container .columns.fifteen, .container .columns.sixteen, .container .columns.one-third, .container .columns.two-thirds { | ||||||
|   .container .one.column, |         width: 100%; } | ||||||
|   .container .one.columns, |  | ||||||
|   .container .two.columns, |  | ||||||
|   .container .three.columns, |  | ||||||
|   .container .four.columns, |  | ||||||
|   .container .five.columns, |  | ||||||
|   .container .six.columns, |  | ||||||
|   .container .seven.columns, |  | ||||||
|   .container .eight.columns, |  | ||||||
|   .container .nine.columns, |  | ||||||
|   .container .ten.columns, |  | ||||||
|   .container .eleven.columns, |  | ||||||
|   .container .twelve.columns, |  | ||||||
|   .container .thirteen.columns, |  | ||||||
|   .container .fourteen.columns, |  | ||||||
|   .container .fifteen.columns, |  | ||||||
|   .container .sixteen.columns, |  | ||||||
|   .container .one-third.column, |  | ||||||
|   .container .two-thirds.column { |  | ||||||
|     width: 300px; } |  | ||||||
|  |  | ||||||
|   /* Offsets */ |  | ||||||
|     .container .offset-by-one, |     .container .offset-by-one, | ||||||
|     .container .offset-by-two, |     .container .offset-by-two, | ||||||
|     .container .offset-by-three, |     .container .offset-by-three, | ||||||
| @@ -370,37 +253,6 @@ body { | |||||||
|     .container .offset-by-fourteen, |     .container .offset-by-fourteen, | ||||||
|     .container .offset-by-fifteen { |     .container .offset-by-fifteen { | ||||||
|       padding-left: 0; } } |       padding-left: 0; } } | ||||||
| /* #Mobile (Landscape) |  | ||||||
| ================================================== */ |  | ||||||
| /* Note: Design for a width of 480px */ |  | ||||||
| @media only screen and (min-width: 480px) and (max-width: 767px) { |  | ||||||
|   .container { |  | ||||||
|     width: 420px; } |  | ||||||
|  |  | ||||||
|   .container .columns, |  | ||||||
|   .container .column { |  | ||||||
|     margin: 0; } |  | ||||||
|  |  | ||||||
|   .container .one.column, |  | ||||||
|   .container .one.columns, |  | ||||||
|   .container .two.columns, |  | ||||||
|   .container .three.columns, |  | ||||||
|   .container .four.columns, |  | ||||||
|   .container .five.columns, |  | ||||||
|   .container .six.columns, |  | ||||||
|   .container .seven.columns, |  | ||||||
|   .container .eight.columns, |  | ||||||
|   .container .nine.columns, |  | ||||||
|   .container .ten.columns, |  | ||||||
|   .container .eleven.columns, |  | ||||||
|   .container .twelve.columns, |  | ||||||
|   .container .thirteen.columns, |  | ||||||
|   .container .fourteen.columns, |  | ||||||
|   .container .fifteen.columns, |  | ||||||
|   .container .sixteen.columns, |  | ||||||
|   .container .one-third.column, |  | ||||||
|   .container .two-thirds.column { |  | ||||||
|     width: 420px; } } |  | ||||||
| /* #Clearing | /* #Clearing | ||||||
| ================================================== */ | ================================================== */ | ||||||
| /* Self Clearing Goodness */ | /* Self Clearing Goodness */ | ||||||
| @@ -683,9 +535,18 @@ form { | |||||||
| fieldset { | fieldset { | ||||||
|   margin: 0 0 20px 0; } |   margin: 0 0 20px 0; } | ||||||
|  |  | ||||||
|  | input[type="search"], | ||||||
|  | input[type="url"] { | ||||||
|  |   -webkit-appearance: textfield; | ||||||
|  |   -moz-appearance: textfield; } | ||||||
|  |  | ||||||
| input[type="text"], | input[type="text"], | ||||||
| input[type="password"], | input[type="password"], | ||||||
| input[type="email"], | input[type="email"], | ||||||
|  | input[type="search"], | ||||||
|  | input[type="url"], | ||||||
|  | input[type="number"], | ||||||
|  | input[type="tel"], | ||||||
| textarea, | textarea, | ||||||
| select { | select { | ||||||
|   border: 1px solid #cccccc; |   border: 1px solid #cccccc; | ||||||
| @@ -708,6 +569,10 @@ select { | |||||||
| input[type="text"]:focus, | input[type="text"]:focus, | ||||||
| input[type="password"]:focus, | input[type="password"]:focus, | ||||||
| input[type="email"]:focus, | input[type="email"]:focus, | ||||||
|  | input[type="search"]:focus, | ||||||
|  | input[type="url"]:focus, | ||||||
|  | input[type="number"]:focus, | ||||||
|  | input[type="tel"]:focus, | ||||||
| textarea:focus { | textarea:focus { | ||||||
|   border: 1px solid #aaaaaa; |   border: 1px solid #aaaaaa; | ||||||
|   color: #444444; |   color: #444444; | ||||||
|   | |||||||
							
								
								
									
										245
									
								
								scss/_grid.scss
									
									
									
									
									
								
							
							
						
						
									
										245
									
								
								scss/_grid.scss
									
									
									
									
									
								
							| @@ -1,188 +1,81 @@ | |||||||
| /* #Base 960 Grid | .container { | ||||||
| ================================================== */ |   position: relative; | ||||||
|  |   margin: 0 auto; | ||||||
| .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; } |   padding: 0; | ||||||
| .container .column, |  | ||||||
| .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; @include box-sizing(border-box); } |  | ||||||
| .row                                        { margin-bottom: 20px; } |  | ||||||
|  |  | ||||||
| /* Nested Column Classes */ |  | ||||||
| .column.alpha, .columns.alpha               { margin-left: 0; } |  | ||||||
| .column.omega, .columns.omega               { margin-right: 0; } |  | ||||||
|  |  | ||||||
| /* Base Grid */ |  | ||||||
| .container .one.column, |  | ||||||
| .container .one.columns                     { width: 40px;  } |  | ||||||
| .container .two.columns                     { width: 100px; } |  | ||||||
| .container .three.columns                   { width: 160px; } |  | ||||||
| .container .four.columns                    { width: 220px; } |  | ||||||
| .container .five.columns                    { width: 280px; } |  | ||||||
| .container .six.columns                     { width: 340px; } |  | ||||||
| .container .seven.columns                   { width: 400px; } |  | ||||||
| .container .eight.columns                   { width: 460px; } |  | ||||||
| .container .nine.columns                    { width: 520px; } |  | ||||||
| .container .ten.columns                     { width: 580px; } |  | ||||||
| .container .eleven.columns                  { width: 640px; } |  | ||||||
| .container .twelve.columns                  { width: 700px; } |  | ||||||
| .container .thirteen.columns                { width: 760px; } |  | ||||||
| .container .fourteen.columns                { width: 820px; } |  | ||||||
| .container .fifteen.columns                 { width: 880px; } |  | ||||||
| .container .sixteen.columns                 { width: 940px; } |  | ||||||
|  |  | ||||||
| .container .one-third.column                { width: 300px; } |  | ||||||
| .container .two-thirds.column               { width: 620px; } |  | ||||||
|  |  | ||||||
| /* Offsets */ |  | ||||||
| .container .offset-by-one                   { padding-left: 60px;  } |  | ||||||
| .container .offset-by-two                   { padding-left: 120px; } |  | ||||||
| .container .offset-by-three                 { padding-left: 180px; } |  | ||||||
| .container .offset-by-four                  { padding-left: 240px; } |  | ||||||
| .container .offset-by-five                  { padding-left: 300px; } |  | ||||||
| .container .offset-by-six                   { padding-left: 360px; } |  | ||||||
| .container .offset-by-seven                 { padding-left: 420px; } |  | ||||||
| .container .offset-by-eight                 { padding-left: 480px; } |  | ||||||
| .container .offset-by-nine                  { padding-left: 540px; } |  | ||||||
| .container .offset-by-ten                   { padding-left: 600px; } |  | ||||||
| .container .offset-by-eleven                { padding-left: 660px; } |  | ||||||
| .container .offset-by-twelve                { padding-left: 720px; } |  | ||||||
| .container .offset-by-thirteen              { padding-left: 780px; } |  | ||||||
| .container .offset-by-fourteen              { padding-left: 840px; } |  | ||||||
| .container .offset-by-fifteen               { padding-left: 900px; } |  | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
| /* #Tablet (Portrait) |  | ||||||
| ================================================== */ |  | ||||||
|  |  | ||||||
| /* Note: Design for a width of 768px */ |  | ||||||
|  |  | ||||||
| @media only screen and (min-width: 768px) and (max-width: 959px) { |  | ||||||
|   .container                                  { width: 768px; } |  | ||||||
|   .container .column, |  | ||||||
|   .container .columns                         { margin-left: 10px; margin-right: 10px;  } |  | ||||||
|   .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; } |  | ||||||
|   .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; } |  | ||||||
|   .alpha.omega                                { margin-left: 0; margin-right: 0; } |  | ||||||
|  |  | ||||||
|   .container .one.column, |  | ||||||
|   .container .one.columns                     { width: 28px; } |  | ||||||
|   .container .two.columns                     { width: 76px; } |  | ||||||
|   .container .three.columns                   { width: 124px; } |  | ||||||
|   .container .four.columns                    { width: 172px; } |  | ||||||
|   .container .five.columns                    { width: 220px; } |  | ||||||
|   .container .six.columns                     { width: 268px; } |  | ||||||
|   .container .seven.columns                   { width: 316px; } |  | ||||||
|   .container .eight.columns                   { width: 364px; } |  | ||||||
|   .container .nine.columns                    { width: 412px; } |  | ||||||
|   .container .ten.columns                     { width: 460px; } |  | ||||||
|   .container .eleven.columns                  { width: 508px; } |  | ||||||
|   .container .twelve.columns                  { width: 556px; } |  | ||||||
|   .container .thirteen.columns                { width: 604px; } |  | ||||||
|   .container .fourteen.columns                { width: 652px; } |  | ||||||
|   .container .fifteen.columns                 { width: 700px; } |  | ||||||
|   .container .sixteen.columns                 { width: 748px; } |  | ||||||
|  |  | ||||||
|   .container .one-third.column                { width: 236px; } |  | ||||||
|   .container .two-thirds.column               { width: 492px; } |  | ||||||
|  |  | ||||||
| /* Offsets */ |  | ||||||
| .container .offset-by-one                   { padding-left: 48px; } |  | ||||||
| .container .offset-by-two                   { padding-left: 96px; } |  | ||||||
| .container .offset-by-three                 { padding-left: 144px; } |  | ||||||
| .container .offset-by-four                  { padding-left: 192px; } |  | ||||||
| .container .offset-by-five                  { padding-left: 240px; } |  | ||||||
| .container .offset-by-six                   { padding-left: 288px; } |  | ||||||
| .container .offset-by-seven                 { padding-left: 336px; } |  | ||||||
| .container .offset-by-eight                 { padding-left: 384px; } |  | ||||||
| .container .offset-by-nine                  { padding-left: 432px; } |  | ||||||
| .container .offset-by-ten                   { padding-left: 480px; } |  | ||||||
| .container .offset-by-eleven                { padding-left: 528px; } |  | ||||||
| .container .offset-by-twelve                { padding-left: 576px; } |  | ||||||
| .container .offset-by-thirteen              { padding-left: 624px; } |  | ||||||
| .container .offset-by-fourteen              { padding-left: 672px; } |  | ||||||
| .container .offset-by-fifteen               { padding-left: 720px; } |  | ||||||
| } | } | ||||||
|  |  | ||||||
|  | .column, .columns { | ||||||
|  |   float: left; | ||||||
|  |   display: inline; | ||||||
|  |   margin-left: $gutter/2; | ||||||
|  |   margin-right: $gutter/2; | ||||||
|  |   &.alpha { margin-left: 0; } | ||||||
|  |   &.omega { margin-right: 0; } | ||||||
|  | } | ||||||
|  |  | ||||||
| /*  #Mobile (Portrait) | .row { margin-bottom: $gutter; } | ||||||
| ================================================== */ |  | ||||||
|  |  | ||||||
| /* Note: Design for a width of 320px */ | @include grid($desktop-container-width, $column-count, $gutter); | ||||||
|  |  | ||||||
|  | //----------------------------------------------------------------------- | ||||||
|  | // #Tablet | ||||||
|  | @media only screen and (max-width: 959px) { | ||||||
|  |   @include grid($tablet-container-width, $column-count, $gutter); | ||||||
|  |  | ||||||
|  |   .container { width: $tablet-container-width; } | ||||||
|  |  | ||||||
|  |   .column, .columns { | ||||||
|  |     &.alpha { margin-right: 10px; } | ||||||
|  |     &.omega { margin-left: 10px; } } | ||||||
|  |  | ||||||
|  |   .alpha.omega { | ||||||
|  |     margin-right: 0; | ||||||
|  |     margin-left: 0; } | ||||||
|  | } | ||||||
|  | //-------------------------------------------------------------------- | ||||||
|  | // #Mobile | ||||||
| @media only screen and (max-width: 767px) { | @media only screen and (max-width: 767px) { | ||||||
|   .container { width: 300px; } |   .container { | ||||||
|   .container .columns, |     width: $mobile-container-width; | ||||||
|   .container .column { margin: 0; } |  | ||||||
|  |  | ||||||
|   .container .one.column, |  | ||||||
|   .container .one.columns, |  | ||||||
|   .container .two.columns, |  | ||||||
|   .container .three.columns, |  | ||||||
|   .container .four.columns, |  | ||||||
|   .container .five.columns, |  | ||||||
|   .container .six.columns, |  | ||||||
|   .container .seven.columns, |  | ||||||
|   .container .eight.columns, |  | ||||||
|   .container .nine.columns, |  | ||||||
|   .container .ten.columns, |  | ||||||
|   .container .eleven.columns, |  | ||||||
|   .container .twelve.columns, |  | ||||||
|   .container .thirteen.columns, |  | ||||||
|   .container .fourteen.columns, |  | ||||||
|   .container .fifteen.columns, |  | ||||||
|   .container .sixteen.columns, |  | ||||||
|   .container .one-third.column, |  | ||||||
|   .container .two-thirds.column  { width: 300px; } |  | ||||||
|  |  | ||||||
| /* Offsets */ |  | ||||||
| .container .offset-by-one, |  | ||||||
| .container .offset-by-two, |  | ||||||
| .container .offset-by-three, |  | ||||||
| .container .offset-by-four, |  | ||||||
| .container .offset-by-five, |  | ||||||
| .container .offset-by-six, |  | ||||||
| .container .offset-by-seven, |  | ||||||
| .container .offset-by-eight, |  | ||||||
| .container .offset-by-nine, |  | ||||||
| .container .offset-by-ten, |  | ||||||
| .container .offset-by-eleven, |  | ||||||
| .container .offset-by-twelve, |  | ||||||
| .container .offset-by-thirteen, |  | ||||||
| .container .offset-by-fourteen, |  | ||||||
| .container .offset-by-fifteen { padding-left: 0; } |  | ||||||
|  |  | ||||||
|  |     .column, .columns { | ||||||
|  |       margin: 0; | ||||||
|  |       &.one, | ||||||
|  |       &.two, | ||||||
|  |       &.three, | ||||||
|  |       &.four, | ||||||
|  |       &.five, | ||||||
|  |       &.six, | ||||||
|  |       &.seven, | ||||||
|  |       &.eight, | ||||||
|  |       &.nine, | ||||||
|  |       &.ten, | ||||||
|  |       &.eleven, | ||||||
|  |       &.twelve, | ||||||
|  |       &.thirteen, | ||||||
|  |       &.fourteen, | ||||||
|  |       &.fifteen, | ||||||
|  |       &.sixteen, | ||||||
|  |       &.one-third, | ||||||
|  |       &.two-thirds { width: $mobile-column-width; } | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  |     .offset-by-one, | ||||||
| /* #Mobile (Landscape) |     .offset-by-two, | ||||||
| ================================================== */ |     .offset-by-three, | ||||||
|  |     .offset-by-four, | ||||||
| /* Note: Design for a width of 480px */ |     .offset-by-five, | ||||||
|  |     .offset-by-six, | ||||||
| @media only screen and (min-width: 480px) and (max-width: 767px) { |     .offset-by-seven, | ||||||
|   .container { width: 420px; } |     .offset-by-eight, | ||||||
|   .container .columns, |     .offset-by-nine, | ||||||
|   .container .column { margin: 0; } |     .offset-by-ten, | ||||||
|  |     .offset-by-eleven, | ||||||
|   .container .one.column, |     .offset-by-twelve, | ||||||
|   .container .one.columns, |     .offset-by-thirteen, | ||||||
|   .container .two.columns, |     .offset-by-fourteen, | ||||||
|   .container .three.columns, |     .offset-by-fifteen { padding-left: 0; } | ||||||
|   .container .four.columns, |   } | ||||||
|   .container .five.columns, |  | ||||||
|   .container .six.columns, |  | ||||||
|   .container .seven.columns, |  | ||||||
|   .container .eight.columns, |  | ||||||
|   .container .nine.columns, |  | ||||||
|   .container .ten.columns, |  | ||||||
|   .container .eleven.columns, |  | ||||||
|   .container .twelve.columns, |  | ||||||
|   .container .thirteen.columns, |  | ||||||
|   .container .fourteen.columns, |  | ||||||
|   .container .fifteen.columns, |  | ||||||
|   .container .sixteen.columns, |  | ||||||
|   .container .one-third.column, |  | ||||||
|   .container .two-thirds.column { width: 420px; } |  | ||||||
| } | } | ||||||
|  |  | ||||||
| /* #Clearing | /* #Clearing | ||||||
|   | |||||||
| @@ -113,3 +113,57 @@ | |||||||
|   -webkit-box-shadow: $a $b $c $colour; |   -webkit-box-shadow: $a $b $c $colour; | ||||||
|   box-shadow:  $a $b $c $colour; |   box-shadow:  $a $b $c $colour; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) { | ||||||
|  |  | ||||||
|  |   $grid-column-width: $grid-container-width/$grid-column-count; | ||||||
|  |  | ||||||
|  |   .container { | ||||||
|  |     width: $grid-container-width; | ||||||
|  |     .columns, .column { | ||||||
|  |       &.one         { width: (1*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.two         { width: (2*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.three       { width: (3*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.four        { width: (4*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.five        { width: (5*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.six         { width: (6*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.seven       { width: (7*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.eight       { width: (8*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.nine        { width: (9*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.ten         { width: (10*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.eleven      { width: (11*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.twelve      { width: (12*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.thirteen    { width: (13*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.fourteen    { width: (14*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.fifteen     { width: (15*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.sixteen     { width: (16*$grid-column-width - $grid-gutter); } | ||||||
|  |       &.one-third    { width: ($grid-container-width/3) - $grid-gutter; } | ||||||
|  |       &.two-thirds   { width: (($grid-container-width/3)*2) - $grid-gutter; } | ||||||
|  |     } | ||||||
|  |  | ||||||
|  |     .offset-by-one      { padding-left: $grid-column-width;  } | ||||||
|  |     .offset-by-two      { padding-left: $grid-column-width*2; } | ||||||
|  |     .offset-by-three    { padding-left: $grid-column-width*3; } | ||||||
|  |     .offset-by-four     { padding-left: $grid-column-width*4; } | ||||||
|  |     .offset-by-five     { padding-left: $grid-column-width*5; } | ||||||
|  |     .offset-by-six      { padding-left: $grid-column-width*6; } | ||||||
|  |     .offset-by-seven    { padding-left: $grid-column-width*7; } | ||||||
|  |     .offset-by-eight    { padding-left: $grid-column-width*8; } | ||||||
|  |     .offset-by-nine     { padding-left: $grid-column-width*9; } | ||||||
|  |     .offset-by-ten      { padding-left: $grid-column-width*10; } | ||||||
|  |     .offset-by-eleven   { padding-left: $grid-column-width*11; } | ||||||
|  |     .offset-by-twelve   { padding-left: $grid-column-width*12; } | ||||||
|  |     .offset-by-thirteen { padding-left: $grid-column-width*13; } | ||||||
|  |     .offset-by-fourteen { padding-left: $grid-column-width*14; } | ||||||
|  |     .offset-by-fifteen  { padding-left: $grid-column-width*15; } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  |  | ||||||
|  | @mixin clearfix { | ||||||
|  |   clear: both; | ||||||
|  |   display: block; | ||||||
|  |   overflow: hidden; | ||||||
|  |   visibility: hidden; | ||||||
|  |   width: 0; | ||||||
|  |   height: 0; | ||||||
|  | } | ||||||
|   | |||||||
| @@ -1,3 +1,10 @@ | |||||||
|  | $gutter: 20px; | ||||||
|  | $column-count: 16; | ||||||
|  | $desktop-container-width: 960px; | ||||||
|  | $tablet-container-width: 768px; | ||||||
|  | $mobile-container-width: 90%; | ||||||
|  | $mobile-column-width: 100%; | ||||||
|  |  | ||||||
| $form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; | $form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||||||
|  |  | ||||||
| $form_button_border_radius: 3px; | $form_button_border_radius: 3px; | ||||||
|   | |||||||
							
								
								
									
										4
									
								
								scss/skeleton.scss
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										4
									
								
								scss/skeleton.scss
									
									
									
									
										vendored
									
									
								
							| @@ -1,6 +1,6 @@ | |||||||
| /* | /* | ||||||
| * Skeleton V1.2 | * Skeleton SCSS V1.0 | ||||||
| * Copyright 2011, Dave Gamache | * Skeleton is Copyright 2011, Dave Gamache | ||||||
| * | * | ||||||
| * SCSS Conversion and Mixins by Nick Pack | * SCSS Conversion and Mixins by Nick Pack | ||||||
| * | * | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user