Created
May 2, 2014 08:28
-
-
Save roowa/11470192 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<h1>10-колоночный шаблон с вложенностью блоков</h1> | |
<!-- Column 1 --> | |
<div class="column column_1"> | |
<h2>Колонка 1</h2> | |
</div> | |
<!-- Column 2 --> | |
<div class="column column_2"> | |
<h2>Колонка 2</h2> | |
<div class="column column_2_1_1"> | |
<h2>Колонка 2-1-1</h2> | |
</div> | |
<div class="column column_2_1_2"> | |
<h2>Колонка 2-1-2</h2> | |
</div> | |
<div class="column column_2_2_1"> | |
<h2>Колонка 2-2-1</h2> | |
</div> | |
<div class="column column_2_2_2"> | |
<h2>Колонка 2-2-2</h2> | |
<div class="column_2_3_1"> | |
<h2>Колонка 2-3-1</h2> | |
</div> | |
<div class="column_2_3_2"> | |
<h2>Колонка 2-3-2</h2> | |
</div> | |
<div class="column_2_4"> | |
<h2>Колонка 2-4</h2> | |
</div> | |
</div> | |
</div><!-- end AG2 --> | |
<!-- Column 3 --> | |
<div class="column column_3"> | |
<h2>Колонка 3</h2> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.3.6) | |
// Compass (v) | |
// Breakpoint (v) | |
// Susy (v) | |
// ---- | |
@import "breakpoint"; | |
@import "compass/reset"; | |
@import "susy"; | |
@import "compass/utilities/general/clearfix"; | |
// Susy custom settings | |
$susy:( | |
global-box-sizing: border-box, | |
use-custom: (rem: true) | |
); | |
@include border-box-sizing; | |
h1,h2{ | |
text-align: center; | |
font-size: 1rem; | |
font-weight: bold; | |
padding: 1.8rem 0; | |
} | |
div[class^="column"]{ | |
margin-top: .5rem; | |
} | |
.container{ | |
background-color: #fbeecb; | |
@include container; | |
@include clearfix; | |
/* Column 1 & Column 3 | |
---------------------------*/ | |
.column_1,.column_3{ | |
background-color: #71dad2; | |
} | |
/* Column 2 | |
----------------------------*/ | |
.column_2{ | |
background-color: #fae7b3; | |
.column_2_1_1,.column_2_1_2{ | |
background-color: #ee9e9c; | |
} | |
.column_2_2_1{ | |
background-color: #f09671; | |
} | |
.column_2_2_2{ | |
background-color: #f6d784; | |
.column_2_3_1,.column_2_3_2{ | |
background-color: #ee9e9c; | |
} | |
.column_2_4{ | |
background-color: #ea9fc3; | |
} | |
} | |
} | |
/* Desktop View | |
-----------------------------*/ | |
.column_1,.column_3{ | |
@include breakpoint(900px){ | |
@include span(2 of 10); | |
} | |
} | |
.column_3{ | |
@include breakpoint(900px){ | |
@include last; | |
} | |
} | |
.column_2{ | |
@include breakpoint(900px){ | |
@include span(6 of 10); | |
@include clearfix; | |
.column_2_1_1,.column_2_1_2{ | |
@include span(3 of 6); | |
} | |
.column_2_1_2{ | |
@include last; | |
} | |
.column_2_2_1{ | |
@include span(2 of 6); | |
} | |
.column_2_2_2{ | |
@include span(4 of 6 last); | |
@include clearfix; | |
.column_2_3_1,.column_2_3_2{ | |
@include span(2 of 4); | |
} | |
.column_2_3_2{ | |
@include last; | |
} | |
.column_2_4{ | |
@include span(full); | |
clear: both; | |
} | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font: inherit; | |
font-size: 100%; | |
vertical-align: baseline; | |
} | |
html { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
caption, th, td { | |
text-align: left; | |
font-weight: normal; | |
vertical-align: middle; | |
} | |
q, blockquote { | |
quotes: none; | |
} | |
q:before, q:after, blockquote:before, blockquote:after { | |
content: ""; | |
content: none; | |
} | |
a img { | |
border: none; | |
} | |
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { | |
display: block; | |
} | |
*, *:before, *:after { | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
h1, h2 { | |
text-align: center; | |
font-size: 1rem; | |
font-weight: bold; | |
padding: 1.8rem 0; | |
} | |
div[class^="column"] { | |
margin-top: .5rem; | |
} | |
.container { | |
background-color: #fbeecb; | |
max-width: 100%; | |
margin-left: auto; | |
margin-right: auto; | |
overflow: hidden; | |
*zoom: 1; | |
/* Column 1 & Column 3 | |
---------------------------*/ | |
/* Column 2 | |
----------------------------*/ | |
/* Desktop View | |
-----------------------------*/ | |
} | |
.container:after { | |
content: " "; | |
display: block; | |
clear: both; | |
} | |
.container .column_1, .container .column_3 { | |
background-color: #71dad2; | |
} | |
.container .column_2 { | |
background-color: #fae7b3; | |
} | |
.container .column_2 .column_2_1_1, .container .column_2 .column_2_1_2 { | |
background-color: #ee9e9c; | |
} | |
.container .column_2 .column_2_2_1 { | |
background-color: #f09671; | |
} | |
.container .column_2 .column_2_2_2 { | |
background-color: #f6d784; | |
} | |
.container .column_2 .column_2_2_2 .column_2_3_1, .container .column_2 .column_2_2_2 .column_2_3_2 { | |
background-color: #ee9e9c; | |
} | |
.container .column_2 .column_2_2_2 .column_2_4 { | |
background-color: #ea9fc3; | |
} | |
@media (min-width: 900px) { | |
.container .column_1, .container .column_3 { | |
width: 18.36735%; | |
float: left; | |
margin-right: 2.04082%; | |
} | |
} | |
@media (min-width: 900px) { | |
.container .column_3 { | |
float: right; | |
margin-right: 0; | |
} | |
} | |
@media (min-width: 900px) { | |
.container .column_2 { | |
width: 59.18367%; | |
float: left; | |
margin-right: 2.04082%; | |
overflow: hidden; | |
*zoom: 1; | |
} | |
.container .column_2 .column_2_1_1, .container .column_2 .column_2_1_2 { | |
width: 48.27586%; | |
float: left; | |
margin-right: 3.44828%; | |
} | |
.container .column_2 .column_2_1_2 { | |
float: right; | |
margin-right: 0; | |
} | |
.container .column_2 .column_2_2_1 { | |
width: 31.03448%; | |
float: left; | |
margin-right: 3.44828%; | |
} | |
.container .column_2 .column_2_2_2 { | |
width: 65.51724%; | |
float: right; | |
margin-right: 0; | |
overflow: hidden; | |
*zoom: 1; | |
} | |
.container .column_2 .column_2_2_2 .column_2_3_1, .container .column_2 .column_2_2_2 .column_2_3_2 { | |
width: 47.36842%; | |
float: left; | |
margin-right: 5.26316%; | |
} | |
.container .column_2 .column_2_2_2 .column_2_3_2 { | |
float: right; | |
margin-right: 0; | |
} | |
.container .column_2 .column_2_2_2 .column_2_4 { | |
width: 100%; | |
float: left; | |
margin-left: 0; | |
margin-right: 0; | |
clear: both; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<h1>10-колоночный шаблон с вложенностью блоков</h1> | |
<!-- Column 1 --> | |
<div class="column column_1"> | |
<h2>Колонка 1</h2> | |
</div> | |
<!-- Column 2 --> | |
<div class="column column_2"> | |
<h2>Колонка 2</h2> | |
<div class="column column_2_1_1"> | |
<h2>Колонка 2-1-1</h2> | |
</div> | |
<div class="column column_2_1_2"> | |
<h2>Колонка 2-1-2</h2> | |
</div> | |
<div class="column column_2_2_1"> | |
<h2>Колонка 2-2-1</h2> | |
</div> | |
<div class="column column_2_2_2"> | |
<h2>Колонка 2-2-2</h2> | |
<div class="column_2_3_1"> | |
<h2>Колонка 2-3-1</h2> | |
</div> | |
<div class="column_2_3_2"> | |
<h2>Колонка 2-3-2</h2> | |
</div> | |
<div class="column_2_4"> | |
<h2>Колонка 2-4</h2> | |
</div> | |
</div> | |
</div><!-- end AG2 --> | |
<!-- Column 3 --> | |
<div class="column column_3"> | |
<h2>Колонка 3</h2> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment