Skip to content

Commit

Permalink
completed grid and added example page
Browse files Browse the repository at this point in the history
  • Loading branch information
Luís Silva committed Dec 8, 2016
1 parent a68d0ab commit 919c2b3
Show file tree
Hide file tree
Showing 2 changed files with 167 additions and 30 deletions.
86 changes: 56 additions & 30 deletions assets/styles/base/_grid.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
@mixin grid($size, $has-gutter:false){
@if $has-gutter {
width: calc( (1 - #{$gutter}) * (100% / #{$nColumns}) * #{$size} );
margin: 0 ($gutter/2)*100%;
}
@else {
width: calc( (100% / #{$nColumns}) * #{$size} );
}
}
.container {
max-width: 100%;
margin-left: auto;
Expand Down Expand Up @@ -35,34 +26,69 @@
}
}

@for $colWidth from 1 to 12 {
.col__#{$colWidth} {
&, &--xs, &--sm, &--md, &--lg, &--xlg {
@include grid($colWidth, true);
}
&--xs {
@include max-xs {
width: 100%;
}
.grid {

&, &--no-space {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;

> [class*=col__] {
box-sizing: border-box;
}
&--sm {
@include max-sm {
width: 100%;
@for $colWidth from 1 to 12 {
.col__#{$colWidth} {
&, &--xs, &--sm, &--md, &--lg, &--xlg {
width: calc( (100% / #{$colWidth}) );
}
&--xs {
@include max-xs {
width: 100%;
}
}
&--sm {
@include max-sm {
width: 100%;
}
}
&--md {
@include max-md {
width: 100%;
}
}
&--lg {
@include max-lg {
width: 100%;
}
}
&--xlg {
@include max-xlg {
width: 100%;
}
}
}
}
&--md {
@include max-md {
width: 100%;
}

& {
@include max-sm {
margin-left: -5px;
> [class*=col__] {
padding-left: 5px;
}
}
&--lg {
@include max-lg {
width: 100%;
@include sm-md {
margin-left: -15px;
> [class*=col__] {
padding-left: 15px;
}
}
&--xlg {
@include max-xlg {
width: 100%;
@include min-md {
margin-left: -25px;
> [class*=col__] {
padding-left: 25px;
}
}
}
Expand Down
111 changes: 111 additions & 0 deletions public/grid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!doctype html>
<html lang="">

<head>
<meta charset="utf-8">
<title>Grid Tests</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/assets/styles/main.css">

<style>
.box {
height: 75px;
background-color: #333;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}

.row {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>


<body>

<div class="grid row">
<div class="col__1"><div class="box">1</div></div>
</div>
<div class="grid row">
<div class="col__2"><div class="box">1</div></div>
<div class="col__2"><div class="box">2</div></div>
</div>
<div class="grid row">
<div class="col__3"><div class="box">1</div></div>
<div class="col__3"><div class="box">2</div></div>
<div class="col__3"><div class="box">3</div></div>
</div>
<div class="grid row">
<div class="col__4"><div class="box">1</div></div>
<div class="col__4"><div class="box">2</div></div>
<div class="col__4"><div class="box">3</div></div>
<div class="col__4"><div class="box">4</div></div>
</div>
<div class="grid row">
<div class="col__5"><div class="box">1</div></div>
<div class="col__5"><div class="box">2</div></div>
<div class="col__5"><div class="box">3</div></div>
<div class="col__5"><div class="box">4</div></div>
<div class="col__5"><div class="box">5</div></div>
</div>
<div class="grid row">
<div class="col__6"><div class="box">1</div></div>
<div class="col__6"><div class="box">2</div></div>
<div class="col__6"><div class="box">3</div></div>
<div class="col__6"><div class="box">4</div></div>
<div class="col__6"><div class="box">5</div></div>
<div class="col__6"><div class="box">6</div></div>
</div>
<div class="grid row">
<div class="col__7"><div class="box">1</div></div>
<div class="col__7"><div class="box">2</div></div>
<div class="col__7"><div class="box">3</div></div>
<div class="col__7"><div class="box">4</div></div>
<div class="col__7"><div class="box">5</div></div>
<div class="col__7"><div class="box">6</div></div>
<div class="col__7"><div class="box">7</div></div>
</div>
<div class="grid row">
<div class="col__8"><div class="box">1</div></div>
<div class="col__8"><div class="box">2</div></div>
<div class="col__8"><div class="box">3</div></div>
<div class="col__8"><div class="box">4</div></div>
<div class="col__8"><div class="box">5</div></div>
<div class="col__8"><div class="box">6</div></div>
<div class="col__8"><div class="box">7</div></div>
<div class="col__8"><div class="box">8</div></div>
</div>
<div class="grid row">
<div class="col__9"><div class="box">1</div></div>
<div class="col__9"><div class="box">2</div></div>
<div class="col__9"><div class="box">3</div></div>
<div class="col__9"><div class="box">4</div></div>
<div class="col__9"><div class="box">5</div></div>
<div class="col__9"><div class="box">6</div></div>
<div class="col__9"><div class="box">7</div></div>
<div class="col__9"><div class="box">8</div></div>
<div class="col__9"><div class="box">9</div></div>
</div>
<div class="grid row">
<div class="col__10"><div class="box">1</div></div>
<div class="col__10"><div class="box">2</div></div>
<div class="col__10"><div class="box">3</div></div>
<div class="col__10"><div class="box">4</div></div>
<div class="col__10"><div class="box">5</div></div>
<div class="col__10"><div class="box">6</div></div>
<div class="col__10"><div class="box">7</div></div>
<div class="col__10"><div class="box">8</div></div>
<div class="col__10"><div class="box">9</div></div>
<div class="col__10"><div class="box">10</div></div>
</div>

</body>

</html>

0 comments on commit 919c2b3

Please sign in to comment.