Skip to content

Instantly share code, notes, and snippets.

@micheltlutz

micheltlutz/SassMeister-input-HTML.html

Created August 20, 2015 19:38
Show Gist options
  • Save micheltlutz/60cb9ce18739a2122b19 to your computer and use it in GitHub Desktop.
Save micheltlutz/60cb9ce18739a2122b19 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
<title>BootStrap - Bagual</title>
<link href="assets/stylesheets/structure/grid.css" rel="stylesheet">
</head>
<body>
<!--
Simulação de grid 1
-->
<h1>Teste 1</h1>
<div class="container outline">
<div class="row">
<div class="col-1-12"><p>col-1</p></div>
<div class="col-1-12"><p>col-1</p></div>
<div class="col-1-12"><p>col-1</p></div>
<div class="col-1-12"><p>col-1</p></div>
<div class="col-1-12"><p>col-1</p></div>
<div class="col-1-12"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-2-12"><p>col-2</p></div>
<div class="col-2-12"><p>col-2</p></div>
<div class="col-2-12"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-3-12"><p>col-3</p></div>
<div class="col-3-12"><p>col-3</p></div>
</div>
<div class="col-12-12">
<div class="col-6-12"><p>col-4</p></div>
<div class="col-6-12"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-5-12"><p>col-5</p></div>
<div class="col-1-12"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-12-12"><p>col-6</p></div>
</div>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// 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: 320px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
//Estilo de teste
$color: #454545;
$grid-gutter-width:10px;
$bgcolor: #fff200;
$outline: #ffcc00;
//Tamanhos de tela
@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, $screen, $grid-columns:$grid-columns){
$w: "";
@if($n < 6 and $screen < $screen-sm){
$w: 100%
} @else{
$w: $n / $grid-columns * 100%;
}
width: $w;
}
.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 --*/
@mixin forScreen($color, $screen:$screen-lg){
$a : "";
@for $i from 1 through $grid-columns {
.col-#{$i}-#{$grid-columns} {
@include grid($i, $screen);
background: $color;
}
/*@if($i == 1){
$a : $a + ".col-#{$i}";
}@else{
$a : $a + ", .col-#{$i}-#{$grid-columns}";
}*/
}
}
@for $i from 1 through $grid-columns {
.col-#{$i}-#{$grid-columns} {
@include grid($i, $screen-lg);
}
}
//width: ($i / $grid-columns) * 100%;
@include mobile {
@include forScreen(green, $screen-xs);
}
@include tablet {
@include forScreen(gray, $screen-sm);
}
@include desktop {
@include forScreen(blue, $screen-md);
}
@include desktophd {
@include forScreen(red);
}
Raw
SassMeister-output.css
* {
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 --*/
.col-1-12 {
width: 8.33333%;
}
.col-2-12 {
width: 16.66667%;
}
.col-3-12 {
width: 25%;
}
.col-4-12 {
width: 33.33333%;
}
.col-5-12 {
width: 41.66667%;
}
.col-6-12 {
width: 50%;
}
.col-7-12 {
width: 58.33333%;
}
.col-8-12 {
width: 66.66667%;
}
.col-9-12 {
width: 75%;
}
.col-10-12 {
width: 83.33333%;
}
.col-11-12 {
width: 91.66667%;
}
.col-12-12 {
width: 100%;
}
@media (min-width: 320px) and (max-width: 767px) {
.col-1-12 {
width: 100%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-1";
}@else{
$a : $a + ", .col-1-12";
}*/
.col-2-12 {
width: 100%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-2";
}@else{
$a : $a + ", .col-2-12";
}*/
.col-3-12 {
width: 100%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-3";
}@else{
$a : $a + ", .col-3-12";
}*/
.col-4-12 {
width: 100%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-4";
}@else{
$a : $a + ", .col-4-12";
}*/
.col-5-12 {
width: 100%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-5";
}@else{
$a : $a + ", .col-5-12";
}*/
.col-6-12 {
width: 50%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-6";
}@else{
$a : $a + ", .col-6-12";
}*/
.col-7-12 {
width: 58.33333%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-7";
}@else{
$a : $a + ", .col-7-12";
}*/
.col-8-12 {
width: 66.66667%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-8";
}@else{
$a : $a + ", .col-8-12";
}*/
.col-9-12 {
width: 75%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-9";
}@else{
$a : $a + ", .col-9-12";
}*/
.col-10-12 {
width: 83.33333%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-10";
}@else{
$a : $a + ", .col-10-12";
}*/
.col-11-12 {
width: 91.66667%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-11";
}@else{
$a : $a + ", .col-11-12";
}*/
.col-12-12 {
width: 100%;
background: green;
}
/*@if($i == 1){
$a : $a + ".col-12";
}@else{
$a : $a + ", .col-12-12";
}*/
}
@media (min-width: 768px) and (max-width: 991px) {
.col-1-12 {
width: 8.33333%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-1";
}@else{
$a : $a + ", .col-1-12";
}*/
.col-2-12 {
width: 16.66667%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-2";
}@else{
$a : $a + ", .col-2-12";
}*/
.col-3-12 {
width: 25%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-3";
}@else{
$a : $a + ", .col-3-12";
}*/
.col-4-12 {
width: 33.33333%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-4";
}@else{
$a : $a + ", .col-4-12";
}*/
.col-5-12 {
width: 41.66667%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-5";
}@else{
$a : $a + ", .col-5-12";
}*/
.col-6-12 {
width: 50%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-6";
}@else{
$a : $a + ", .col-6-12";
}*/
.col-7-12 {
width: 58.33333%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-7";
}@else{
$a : $a + ", .col-7-12";
}*/
.col-8-12 {
width: 66.66667%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-8";
}@else{
$a : $a + ", .col-8-12";
}*/
.col-9-12 {
width: 75%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-9";
}@else{
$a : $a + ", .col-9-12";
}*/
.col-10-12 {
width: 83.33333%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-10";
}@else{
$a : $a + ", .col-10-12";
}*/
.col-11-12 {
width: 91.66667%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-11";
}@else{
$a : $a + ", .col-11-12";
}*/
.col-12-12 {
width: 100%;
background: gray;
}
/*@if($i == 1){
$a : $a + ".col-12";
}@else{
$a : $a + ", .col-12-12";
}*/
}
@media (min-width: 992px) and (max-width: 1199px) {
.col-1-12 {
width: 8.33333%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-1";
}@else{
$a : $a + ", .col-1-12";
}*/
.col-2-12 {
width: 16.66667%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-2";
}@else{
$a : $a + ", .col-2-12";
}*/
.col-3-12 {
width: 25%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-3";
}@else{
$a : $a + ", .col-3-12";
}*/
.col-4-12 {
width: 33.33333%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-4";
}@else{
$a : $a + ", .col-4-12";
}*/
.col-5-12 {
width: 41.66667%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-5";
}@else{
$a : $a + ", .col-5-12";
}*/
.col-6-12 {
width: 50%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-6";
}@else{
$a : $a + ", .col-6-12";
}*/
.col-7-12 {
width: 58.33333%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-7";
}@else{
$a : $a + ", .col-7-12";
}*/
.col-8-12 {
width: 66.66667%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-8";
}@else{
$a : $a + ", .col-8-12";
}*/
.col-9-12 {
width: 75%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-9";
}@else{
$a : $a + ", .col-9-12";
}*/
.col-10-12 {
width: 83.33333%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-10";
}@else{
$a : $a + ", .col-10-12";
}*/
.col-11-12 {
width: 91.66667%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-11";
}@else{
$a : $a + ", .col-11-12";
}*/
.col-12-12 {
width: 100%;
background: blue;
}
/*@if($i == 1){
$a : $a + ".col-12";
}@else{
$a : $a + ", .col-12-12";
}*/
}
@media (min-width: 1200px) {
.col-1-12 {
width: 8.33333%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-1";
}@else{
$a : $a + ", .col-1-12";
}*/
.col-2-12 {
width: 16.66667%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-2";
}@else{
$a : $a + ", .col-2-12";
}*/
.col-3-12 {
width: 25%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-3";
}@else{
$a : $a + ", .col-3-12";
}*/
.col-4-12 {
width: 33.33333%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-4";
}@else{
$a : $a + ", .col-4-12";
}*/
.col-5-12 {
width: 41.66667%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-5";
}@else{
$a : $a + ", .col-5-12";
}*/
.col-6-12 {
width: 50%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-6";
}@else{
$a : $a + ", .col-6-12";
}*/
.col-7-12 {
width: 58.33333%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-7";
}@else{
$a : $a + ", .col-7-12";
}*/
.col-8-12 {
width: 66.66667%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-8";
}@else{
$a : $a + ", .col-8-12";
}*/
.col-9-12 {
width: 75%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-9";
}@else{
$a : $a + ", .col-9-12";
}*/
.col-10-12 {
width: 83.33333%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-10";
}@else{
$a : $a + ", .col-10-12";
}*/
.col-11-12 {
width: 91.66667%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-11";
}@else{
$a : $a + ", .col-11-12";
}*/
.col-12-12 {
width: 100%;
background: red;
}
/*@if($i == 1){
$a : $a + ".col-12";
}@else{
$a : $a + ", .col-12-12";
}*/
}
Raw
SassMeister-rendered.html
<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
<title>BootStrap - Bagual</title>
<link href="assets/stylesheets/structure/grid.css" rel="stylesheet">
</head>
<body>
<!--
Simulação de grid 1
-->
<h1>Teste 1</h1>
<div class="container outline">
<div class="row">
<div class="col-1-12"><p>col-1</p></div>
<div class="col-1-12"><p>col-1</p></div>
<div class="col-1-12"><p>col-1</p></div>
<div class="col-1-12"><p>col-1</p></div>
<div class="col-1-12"><p>col-1</p></div>
<div class="col-1-12"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-2-12"><p>col-2</p></div>
<div class="col-2-12"><p>col-2</p></div>
<div class="col-2-12"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-3-12"><p>col-3</p></div>
<div class="col-3-12"><p>col-3</p></div>
</div>
<div class="col-12-12">
<div class="col-6-12"><p>col-4</p></div>
<div class="col-6-12"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-5-12"><p>col-5</p></div>
<div class="col-1-12"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-12-12"><p>col-6</p></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment