Skip to content

Commit

Permalink
Rename grid classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramono
ramono committed Aug 3, 2015
1 parent c941cc4 commit f5690d7
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 41 deletions.
14 changes: 7 additions & 7 deletions css/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

56 changes: 28 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,28 +116,28 @@ <h3>Nested grids</h3>
.col4 nested
</div>
<div class="container">
<div class="col2 half-medium">
<div class="col2 m-half">
<div class="box code">
.col2 nested <br>.half-medium
.col2 nested <br>.m-half
</div>
</div>
<div class="col2 half-medium">
<div class="col2 m-half">
<div class="box code">
.col2 nested <br>.half-medium
.col2 nested <br>.m-half
</div>
</div>
<div class="col2 half-medium">
<div class="col2 half">
<div class="box code">
.col2 nested <br>.half-medium
.col2 nested <br>.m-half
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col4 full-medium">
<div class="col4 m-full">
<div class="box code">
<p>.col4 .full-medium</p>
<p>.col4 .m-full</p>
</div>
</div>
</div>
Expand All @@ -162,58 +162,58 @@ <h3>Breakpoint helpers</h3>
<p>.col4</p>
</div>
</div>
<div class="col4 full-medium">
<div class="col4 m-full">
<div class="box code">
<p>.col4 <br>.full-medium</p>
<p>.col4 <br>.m-full</p>
</div>
</div>
</div>

<div class="container">
<div class="col8 two-thirds-medium">
<div class="col8 m-2_3">
<div class="box code">
<p>.col8 <br>.two-thirds-medium</p>
<p>.col8 <br>.m-2_3</p>
</div>
</div>
<div class="col4 one-third-medium">
<div class="col4 m-1_3">
<div class="box code">
<p>.col4 <br>.one-third-medium</p>
<p>.col4 <br>.m-1_3</p>
</div>
</div>
</div>

<div class="container">
<div class="col8 half-medium">
<div class="col8 m-half">
<div class="box code">
<p>.col8 <br>.half-medium</p>
<p>.col8 <br>.m-half</p>
</div>
</div>
<div class="col4 half-medium">
<div class="col4 m-half">
<div class="box code">
<p>.col4 <br>.half-medium</p>
<p>.col4 <br>.m-half</p>
</div>
</div>
</div>

<div class="container">
<div class="col2 one-third-medium full-small">
<div class="col2 m-1_3 s-full">
<div class="box code">
<p>.col2 <br>.one-third-medium <br>.full-small</p>
<p>.col2 <br>.m-1_3 <br>.s-full</p>
</div>
</div>
<div class="col2 one-third-medium full-small">
<div class="col2 m-1_3 s-full">
<div class="box code">
<p>.col2 <br>.one-third-medium <br>.full-small</p>
<p>.col2 <br>.m-1_3 <br>.s-full</p>
</div>
</div>
<div class="col2 one-third-medium full-small">
<div class="col2 m-1_3 s-full">
<div class="box code">
<p>.col2 <br>.one-third-medium <br>.full-small</p>
<p>.col2 <br>.m-1_3 <br>.s-full</p>
</div>
</div>
<div class="col6 full-medium">
<div class="col6 m-full">
<div class="box code">
<p>.col6 <br>.full-medium</p>
<p>.col6 <br>.m-full</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -251,12 +251,12 @@ <h3>Inverted order columns</h3>
</div>

<div class="container">
<div class="col4 colr one-third-medium">
<div class="col4 colr m-1_3">
<div class="box code">
<p>.col4 <br>.colr</p>
</div>
</div>
<div class="col8 two-thirds-medium">
<div class="col8 m-2_3">
<div class="box code">
<p>.col8</p>
</div>
Expand Down
8 changes: 4 additions & 4 deletions scss/m/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,24 +53,24 @@
@include box-sizing(border-box);
}

.full-medium {
.m-full {
width: 100%;
&.colr {
float: none;
}
}

.half-medium {
.m-half {
float: left;
width: 50%;
}

.one-third-medium {
.m-1_3 {
float: left;
width: 33.33%;
}

.two-thirds-medium {
.m-2_3 {
float: left;
width: 66.66%;
}
Expand Down
4 changes: 2 additions & 2 deletions scss/s/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,15 @@
@include box-sizing(border-box);
}

.full-small {
.s-full {
float: none;
margin: 0;
padding: 0 10px;
width: 100%;
@include box-sizing(border-box);
}

.half-small {
.s-half {
float: left;
margin: 0;
padding: 0 10px;
Expand Down

0 comments on commit f5690d7

Please sign in to comment.