Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<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>
// ----
// 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;
}
}
}
}
}
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;
}
}
<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