Created
February 15, 2014 20:58
-
-
Save martindrzka/9025152 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
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="main-wrapper"> | |
| <h2>1. poslední flouty</h2> | |
| <div class="row"> | |
| <div class="col c1"><strong>1</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="col c2"><strong>2</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="col c3"><strong>3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="col c4"><strong>4</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="col c5"><strong>5</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="col c6"><strong>6</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| </div> | |
| <h2>2. A</h2> | |
| <div class="row row2"> | |
| <div class="c"><strong>1</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>2</strong> Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur af sdf sdf sdfsdf sdf sdf sdfsf consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>4</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>5</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>6</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>7</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>8</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>9</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| </div> | |
| <h2>2. B</h2> | |
| <div class="row row3"> | |
| <div class="c"><strong>1</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>2</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur af sdf sdf sdfsdf sdf sdf sdfsf consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas? s sdf sdf sdf sfgagags asf asf agsasfa sfd</div> | |
| <div class="c"><strong>3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>4</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>5</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>6</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>7</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>8</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>9</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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.0.rc.4) | |
| // Compass (v1.0.0.alpha.18) | |
| // Breakpoint (v2.4.1) | |
| // Susy (v2.0.0.rc.1) | |
| // ---- | |
| @import "breakpoint"; | |
| @import "compass"; | |
| @import "susy"; | |
| $container-width: 1200px; | |
| // susy config | |
| $susy: ( | |
| columns: 24, | |
| container: $container-width, | |
| math: fluid, | |
| column-width: 2em, | |
| gutters: 1/4 | |
| ); | |
| // breakpoint | |
| $break:800px; | |
| // scss | |
| .main-wrapper { | |
| @include container($susy); | |
| } | |
| //1. poslední flouty | |
| .col { | |
| margin-bottom: 1em; | |
| @include span(8 of all); | |
| &.c3, &.c6 { | |
| @include span(last); | |
| margin-right: 0; | |
| } | |
| @include breakpoint($break) { | |
| &.c3 { | |
| float: left; | |
| margin-right: gutter(); | |
| } | |
| @include span(4 of all); | |
| &.c6 { | |
| @include span(last); | |
| margin-right: 0; | |
| } | |
| } | |
| } | |
| .col { | |
| background-color: #ccc; | |
| } | |
| .c3 { | |
| background-color: GreenYellow; | |
| } | |
| .c6 { | |
| background-color: PowderBlue; | |
| } | |
| h2 { | |
| clear: both; | |
| padding: 2em 0 0; | |
| } | |
| //2.A | |
| .row2 .c { | |
| @include span(6 of all); | |
| margin-bottom: 1em; | |
| background-color: #ccc; | |
| &:nth-child(4n) { | |
| @include span(last); | |
| margin-right: 0; | |
| } | |
| &:nth-child(5n) { | |
| @include break; | |
| } | |
| } | |
| // 2.B. | |
| .row3 .c { | |
| background-color: #ccc; | |
| margin-bottom: 1em; | |
| @include gallery(6 of 24);; | |
| } | |
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
| .main-wrapper { | |
| max-width: 1200px; | |
| max-width: 75rem; | |
| margin-left: auto; | |
| margin-right: auto; } | |
| .main-wrapper::after { | |
| content: " "; | |
| display: block; | |
| clear: both; } | |
| .col { | |
| margin-bottom: 1em; | |
| width: 32.77311%; | |
| float: left; | |
| margin-right: 0.84034%; } | |
| .col.c3, .col.c6 { | |
| float: right; | |
| margin-right: 0; } | |
| @media (min-width: 800px) { | |
| .col { | |
| width: 15.96639%; | |
| float: left; | |
| margin-right: 0.84034%; } | |
| .col.c3 { | |
| float: left; | |
| margin-right: 0.84034%; } | |
| .col.c6 { | |
| float: right; | |
| margin-right: 0; } } | |
| .col { | |
| background-color: #ccc; } | |
| .c3 { | |
| background-color: GreenYellow; } | |
| .c6 { | |
| background-color: PowderBlue; } | |
| h2 { | |
| clear: both; | |
| padding: 2em 0 0; } | |
| .row2 .c { | |
| width: 24.36975%; | |
| float: left; | |
| margin-right: 0.84034%; | |
| margin-bottom: 1em; | |
| background-color: #ccc; } | |
| .row2 .c:nth-child(4n) { | |
| float: right; | |
| margin-right: 0; } | |
| .row2 .c:nth-child(5n) { | |
| clear: both; } | |
| .row3 .c { | |
| background-color: #ccc; | |
| margin-bottom: 1em; | |
| width: 24.36975%; | |
| float: left; } | |
| .row3 .c:nth-child(4n + 1) { | |
| margin-left: 0; | |
| margin-right: -100%; | |
| clear: both; | |
| margin-left: 0; } | |
| .row3 .c:nth-child(4n + 2) { | |
| margin-left: 25.21008%; | |
| margin-right: -100%; | |
| clear: none; } | |
| .row3 .c:nth-child(4n + 3) { | |
| margin-left: 50.42017%; | |
| margin-right: -100%; | |
| clear: none; } | |
| .row3 .c:nth-child(4n + 4) { | |
| margin-left: 75.63025%; | |
| margin-right: -100%; | |
| clear: none; } |
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
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="main-wrapper"> | |
| <h2>1. poslední flouty</h2> | |
| <div class="row"> | |
| <div class="col c1"><strong>1</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="col c2"><strong>2</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="col c3"><strong>3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="col c4"><strong>4</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="col c5"><strong>5</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="col c6"><strong>6</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| </div> | |
| <h2>2. A</h2> | |
| <div class="row row2"> | |
| <div class="c"><strong>1</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>2</strong> Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur af sdf sdf sdfsdf sdf sdf sdfsf consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>4</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>5</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>6</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>7</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>8</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>9</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| </div> | |
| <h2>2. B</h2> | |
| <div class="row row3"> | |
| <div class="c"><strong>1</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>2</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur af sdf sdf sdfsdf sdf sdf sdfsf consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas? s sdf sdf sdf sfgagags asf asf agsasfa sfd</div> | |
| <div class="c"><strong>3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>4</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>5</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>6</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>7</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>8</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| <div class="c"><strong>9</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, distinctio, iusto voluptatem at aspernatur consequatur blanditiis eveniet reprehenderit quasi nam ipsum totam ex hic voluptates explicabo natus ratione non voluptas?</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment