Skip to content

Instantly share code, notes, and snippets.

@micheltlutz
Created August 20, 2015 18:33
Show Gist options
  • Save micheltlutz/6852fcf92b3b3c66189e to your computer and use it in GitHub Desktop.
Save micheltlutz/6852fcf92b3b3c66189e to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="container outline">
<div class="row">
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-3"><p>col-3</p></div>
<div class="col-3"><p>col-3</p></div>
</div>
<div class="col-12">
<div class="col-6"><p>col-4</p></div>
<div class="col-6"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-5"><p>col-5</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-12"><p>col-6</p></div>
</div>
</div>
// ----
// libsass (v3.2.5)
// ----
*{
box-sizing:border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
//Variáveis do grid
//Colunas
$grid-columns: 12;
$grid-max-width: 65em;
//Telas
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
//Estilo de teste
$color: #454545;
$grid-gutter-width:10px;
$bgcolor: #fff200;
$outline: #ffcc00;
//
@mixin mobile {
@media (min-width: #{$screen-xs}) and (max-width: #{$screen-sm - 1px}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$screen-sm}) and (max-width: #{$screen-md - 1px}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$screen-md}) and (max-width: #{$screen-lg - 1px}) {
@content;
}
}
@mixin desktophd {
@media (min-width: #{$screen-lg}) {
@content;
}
}
@mixin grid($n, $grid-columns:$grid-columns){
width: $n / $grid-columns * 100%;
}
.container{
width: 100%;
}
/*-- our cleafix hack -- */
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
/*-- our gutter -- */
padding: $grid-gutter-width;
background-color: $bgcolor;
}
[class*='col-'] > p {
background-color: #99cc00;
padding: 0;
margin: 0;
text-align: center;
color: $color;
}
.outline, .outline *{
outline: 1px solid $outline;
}
/*-- some extra column content styling --*/
// Controle de grid-columns
@for $i from 1 through $grid-columns {
.col-#{$i} {
//width: ($i / $grid-columns) * 100%;
@include mobile {
@include grid($i);
background: green;
}
@include tablet {
@include grid($i);
background: gray;
}
@include desktop {
@include grid($i);
background: blue;
}
@include desktophd {
@include grid($i);
background: red;
}
}
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
}
/*-- our cleafix hack -- */
.row:before,
.row:after {
content: "";
display: table;
clear: both;
}
[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
/*-- our gutter -- */
padding: 10px;
background-color: #fff200;
}
[class*='col-'] > p {
background-color: #99cc00;
padding: 0;
margin: 0;
text-align: center;
color: #454545;
}
.outline, .outline * {
outline: 1px solid #ffcc00;
}
/*-- some extra column content styling --*/
@media (min-width: 480px) and (max-width: 767px) {
.col-1 {
width: 8.33333%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-1 {
width: 8.33333%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-1 {
width: 8.33333%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-1 {
width: 8.33333%;
background: red;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col-2 {
width: 16.66667%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-2 {
width: 16.66667%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-2 {
width: 16.66667%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-2 {
width: 16.66667%;
background: red;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col-3 {
width: 25%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-3 {
width: 25%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-3 {
width: 25%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-3 {
width: 25%;
background: red;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col-4 {
width: 33.33333%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-4 {
width: 33.33333%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-4 {
width: 33.33333%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-4 {
width: 33.33333%;
background: red;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col-5 {
width: 41.66667%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-5 {
width: 41.66667%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-5 {
width: 41.66667%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-5 {
width: 41.66667%;
background: red;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col-6 {
width: 50%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-6 {
width: 50%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-6 {
width: 50%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-6 {
width: 50%;
background: red;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col-7 {
width: 58.33333%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-7 {
width: 58.33333%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-7 {
width: 58.33333%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-7 {
width: 58.33333%;
background: red;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col-8 {
width: 66.66667%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-8 {
width: 66.66667%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-8 {
width: 66.66667%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-8 {
width: 66.66667%;
background: red;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col-9 {
width: 75%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-9 {
width: 75%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-9 {
width: 75%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-9 {
width: 75%;
background: red;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col-10 {
width: 83.33333%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-10 {
width: 83.33333%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-10 {
width: 83.33333%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-10 {
width: 83.33333%;
background: red;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col-11 {
width: 91.66667%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-11 {
width: 91.66667%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-11 {
width: 91.66667%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-11 {
width: 91.66667%;
background: red;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col-12 {
width: 100%;
background: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-12 {
width: 100%;
background: gray;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-12 {
width: 100%;
background: blue;
}
}
@media (min-width: 1200px) {
.col-12 {
width: 100%;
background: red;
}
}
<div class="container outline">
<div class="row">
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-3"><p>col-3</p></div>
<div class="col-3"><p>col-3</p></div>
</div>
<div class="col-12">
<div class="col-6"><p>col-4</p></div>
<div class="col-6"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-5"><p>col-5</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-12"><p>col-6</p></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment