Skip to content

Commit

Permalink
v2.0.3 - add prefix in variable names
Browse files Browse the repository at this point in the history
  • Loading branch information
@oneTea
oneTea committed Nov 25, 2015
1 parent 1900c38 commit e7dc2db
Show file tree
Hide file tree
Showing 8 changed files with 88 additions and 88 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Gridlex
## Just a Flexbox Grid System
v. 2.0.2
v. 2.0.3

The concept is simple: you need to wrap your `.col` in a `.grid`.

Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "gridlex",
"version": "2.0.2",
"version": "2.0.3",
"description": "Just a Flexbox Grid System",
"repository": {
"type": "git",
Expand Down
2 changes: 1 addition & 1 deletion dist/cards.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
<header class="header">
<div>
<h1>Gridlex</h1>
<p>Just a Flexbox Grid System <br>(v2.0.1)</p>
<p>Just a Flexbox Grid System <br>(v2.0.3)</p>
</div>
</header>
<div class="demoPage grid">
Expand Down
4 changes: 2 additions & 2 deletions dist/demo/demo.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ pre {
.demo p {
margin: 0;
padding: 1rem;
@media @xs{
@media @gl-xs{
padding: .5rem;
}
}
Expand Down Expand Up @@ -191,7 +191,7 @@ section:not(:first-of-type){
content: attr(class);
padding: 2px 8px;
position: absolute;
left: @gutter;
left: @gl-gutter;
top: 0;
white-space: nowrap;
z-index: 20;
Expand Down
2 changes: 1 addition & 1 deletion dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<header class="header">
<div>
<h1>Gridlex</h1>
<p>Just a Flexbox Grid System <br>(v2.0.2)</p>
<p>Just a Flexbox Grid System <br>(v2.0.3)</p>
</div>
</header>
<div class="demoPage">
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "Just a Flexbox Grid System",
"url": "https://github.com/devlint/gridlex",
"author": "https://github.com/devlint",
"version": "2.0.2",
"version": "2.0.3",
"repository": {
"type": "git",
"url": "[email protected]:devlint/gridlex.git"
Expand Down
142 changes: 71 additions & 71 deletions src/gridlex-vars.less
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,96 @@
//************************
// VARIABLES
//************************
@gutter: .5rem;
@gl-gutter: .5rem;

@xs: ~"screen and (max-width: 35.5em)"; // up to 568px
@sm: ~"screen and (max-width: 48em)"; // max 768px
@md: ~"screen and (max-width: 64em)"; // max 1024px
@lg: ~"screen and (max-width: 80em)"; // max 1280px
@gl-xs: ~"screen and (max-width: 35.5em)"; // up to 568px
@gl-sm: ~"screen and (max-width: 48em)"; // max 768px
@gl-md: ~"screen and (max-width: 64em)"; // max 1024px
@gl-lg: ~"screen and (max-width: 80em)"; // max 1280px

@col-1: (100%/12);
@col-2: (@col-1*2);
@col-3: (@col-1*3);
@col-4: (@col-1*4);
@col-5: (@col-1*5);
@col-6: (@col-1*6);
@col-7: (@col-1*7);
@col-8: (@col-1*8);
@col-9: (@col-1*9);
@col-10: (@col-1*10);
@col-11: (@col-1*11);
@col-12: 100%;
@glp_col-1: (100%/12);
@glp_col-2: (@glp_col-1*2);
@glp_col-3: (@glp_col-1*3);
@glp_col-4: (@glp_col-1*4);
@glp_col-5: (@glp_col-1*5);
@glp_col-6: (@glp_col-1*6);
@glp_col-7: (@glp_col-1*7);
@glp_col-8: (@glp_col-1*8);
@glp_col-9: (@glp_col-1*9);
@glp_col-10: (@glp_col-1*10);
@glp_col-11: (@glp_col-1*11);
@glp_col-12: 100%;

@col-5-12: (100%/5);
@col-7-12: (100%/7);
@col-8-12: (100%/8);
@col-9-12: (100%/9);
@col-10-12: (100%/10);
@col-11-12: (100%/11);
@glp_col-5-12: (100%/5);
@glp_col-7-12: (100%/7);
@glp_col-8-12: (100%/8);
@glp_col-9-12: (100%/9);
@glp_col-10-12: (100%/10);
@glp_col-11-12: (100%/11);

// Function to generate the grid by number
.makeGridByNumber(@grid){
[class*="@{grid}-1"] > [class*='col']{ flex-basis: @col-12; max-width: @col-12; }
[class*="@{grid}-2"] > [class*='col']{ flex-basis: @col-6; max-width: @col-6; }
[class*="@{grid}-3"] > [class*='col']{ flex-basis: @col-4; max-width: @col-4; }
[class*="@{grid}-4"] > [class*='col']{ flex-basis: @col-3; max-width: @col-3; }
[class*="@{grid}-5"] > [class*='col']{ flex-basis: @col-5-12; max-width: @col-5-12; }
[class*="@{grid}-6"] > [class*='col']{ flex-basis: @col-2; max-width: @col-2; }
[class*="@{grid}-7"] > [class*='col']{ flex-basis: @col-7-12; max-width: @col-7-12; }
[class*="@{grid}-8"] > [class*='col']{ flex-basis: @col-8-12; max-width: @col-8-12; }
[class*="@{grid}-9"] > [class*='col']{ flex-basis: @col-9-12; max-width: @col-9-12; }
[class*="@{grid}-10"] > [class*='col']{ flex-basis: @col-10-12; max-width: @col-10-12; }
[class*="@{grid}-11"] > [class*='col']{ flex-basis: @col-11-12; max-width: @col-11-12; }
[class*="@{grid}-12"] > [class*='col']{ flex-basis: @col-1; max-width: @col-1; }
[class*="@{grid}-1"] > [class*='col']{ flex-basis: @glp_col-12; max-width: @glp_col-12; }
[class*="@{grid}-2"] > [class*='col']{ flex-basis: @glp_col-6; max-width: @glp_col-6; }
[class*="@{grid}-3"] > [class*='col']{ flex-basis: @glp_col-4; max-width: @glp_col-4; }
[class*="@{grid}-4"] > [class*='col']{ flex-basis: @glp_col-3; max-width: @glp_col-3; }
[class*="@{grid}-5"] > [class*='col']{ flex-basis: @glp_col-5-12; max-width: @glp_col-5-12; }
[class*="@{grid}-6"] > [class*='col']{ flex-basis: @glp_col-2; max-width: @glp_col-2; }
[class*="@{grid}-7"] > [class*='col']{ flex-basis: @glp_col-7-12; max-width: @glp_col-7-12; }
[class*="@{grid}-8"] > [class*='col']{ flex-basis: @glp_col-8-12; max-width: @glp_col-8-12; }
[class*="@{grid}-9"] > [class*='col']{ flex-basis: @glp_col-9-12; max-width: @glp_col-9-12; }
[class*="@{grid}-10"] > [class*='col']{ flex-basis: @glp_col-10-12; max-width: @glp_col-10-12; }
[class*="@{grid}-11"] > [class*='col']{ flex-basis: @glp_col-11-12; max-width: @glp_col-11-12; }
[class*="@{grid}-12"] > [class*='col']{ flex-basis: @glp_col-1; max-width: @glp_col-1; }
}

// Function to generate the grid by columns
.makeCol(@col) {
[class*='grid'] {
> [class*="@{col}-1"]{ flex-basis: @col-1;max-width: @col-1; }
> [class*="@{col}-2"]{ flex-basis: @col-2;max-width: @col-2; }
> [class*="@{col}-3"]{ flex-basis: @col-3;max-width: @col-3; }
> [class*="@{col}-4"]{ flex-basis: @col-4;max-width: @col-4;}
> [class*="@{col}-5"]{ flex-basis: @col-5;max-width: @col-5;}
> [class*="@{col}-6"]{ flex-basis: @col-6;max-width: @col-6;}
> [class*="@{col}-7"]{ flex-basis: @col-7;max-width: @col-7;}
> [class*="@{col}-8"]{ flex-basis: @col-8;max-width: @col-8;}
> [class*="@{col}-9"]{ flex-basis: @col-9;max-width: @col-9;}
> [class*="@{col}-10"]{ flex-basis: @col-10;max-width: @col-10;}
> [class*="@{col}-11"]{ flex-basis: @col-11;max-width: @col-11;}
> [class*="@{col}-12"]{ flex-basis: @col-12;max-width: @col-12;}
> [class*="@{col}-1"]{ flex-basis: @glp_col-1;max-width: @glp_col-1; }
> [class*="@{col}-2"]{ flex-basis: @glp_col-2;max-width: @glp_col-2; }
> [class*="@{col}-3"]{ flex-basis: @glp_col-3;max-width: @glp_col-3; }
> [class*="@{col}-4"]{ flex-basis: @glp_col-4;max-width: @glp_col-4;}
> [class*="@{col}-5"]{ flex-basis: @glp_col-5;max-width: @glp_col-5;}
> [class*="@{col}-6"]{ flex-basis: @glp_col-6;max-width: @glp_col-6;}
> [class*="@{col}-7"]{ flex-basis: @glp_col-7;max-width: @glp_col-7;}
> [class*="@{col}-8"]{ flex-basis: @glp_col-8;max-width: @glp_col-8;}
> [class*="@{col}-9"]{ flex-basis: @glp_col-9;max-width: @glp_col-9;}
> [class*="@{col}-10"]{ flex-basis: @glp_col-10;max-width: @glp_col-10;}
> [class*="@{col}-11"]{ flex-basis: @glp_col-11;max-width: @glp_col-11;}
> [class*="@{col}-12"]{ flex-basis: @glp_col-12;max-width: @glp_col-12;}
}
}

// Function to generate the offset
.makeOff(@off) {
[class*="grid"] > {
> [push-left*="@{off}-0"]{ margin-left: 0; }
> [push-left*="@{off}-1"]{ margin-left: @col-1; }
> [push-left*="@{off}-2"]{ margin-left: @col-2; }
> [push-left*="@{off}-3"]{ margin-left: @col-3; }
> [push-left*="@{off}-4"]{ margin-left: @col-4; }
> [push-left*="@{off}-5"]{ margin-left: @col-5; }
> [push-left*="@{off}-6"]{ margin-left: @col-6; }
> [push-left*="@{off}-6"]{ margin-left: @col-6; }
> [push-left*="@{off}-7"]{ margin-left: @col-7; }
> [push-left*="@{off}-8"]{ margin-left: @col-8; }
> [push-left*="@{off}-9"]{ margin-left: @col-9; }
> [push-left*="@{off}-10"]{ margin-left: @col-10; }
> [push-left*="@{off}-11"]{ margin-left: @col-11; }
> [push-left*="@{off}-1"]{ margin-left: @glp_col-1; }
> [push-left*="@{off}-2"]{ margin-left: @glp_col-2; }
> [push-left*="@{off}-3"]{ margin-left: @glp_col-3; }
> [push-left*="@{off}-4"]{ margin-left: @glp_col-4; }
> [push-left*="@{off}-5"]{ margin-left: @glp_col-5; }
> [push-left*="@{off}-6"]{ margin-left: @glp_col-6; }
> [push-left*="@{off}-6"]{ margin-left: @glp_col-6; }
> [push-left*="@{off}-7"]{ margin-left: @glp_col-7; }
> [push-left*="@{off}-8"]{ margin-left: @glp_col-8; }
> [push-left*="@{off}-9"]{ margin-left: @glp_col-9; }
> [push-left*="@{off}-10"]{ margin-left: @glp_col-10; }
> [push-left*="@{off}-11"]{ margin-left: @glp_col-11; }

> [push-right*="@{off}-0"]{ margin-right: 0; }
> [push-right*="@{off}-1"]{ margin-right: @col-1; }
> [push-right*="@{off}-2"]{ margin-right: @col-2; }
> [push-right*="@{off}-3"]{ margin-right: @col-3; }
> [push-right*="@{off}-4"]{ margin-right: @col-4; }
> [push-right*="@{off}-5"]{ margin-right: @col-5; }
> [push-right*="@{off}-6"]{ margin-right: @col-6; }
> [push-right*="@{off}-6"]{ margin-right: @col-6; }
> [push-right*="@{off}-7"]{ margin-right: @col-7; }
> [push-right*="@{off}-8"]{ margin-right: @col-8; }
> [push-right*="@{off}-9"]{ margin-right: @col-9; }
> [push-right*="@{off}-10"]{ margin-right: @col-10; }
> [push-right*="@{off}-11"]{ margin-right: @col-11; }
> [push-right*="@{off}-1"]{ margin-right: @glp_col-1; }
> [push-right*="@{off}-2"]{ margin-right: @glp_col-2; }
> [push-right*="@{off}-3"]{ margin-right: @glp_col-3; }
> [push-right*="@{off}-4"]{ margin-right: @glp_col-4; }
> [push-right*="@{off}-5"]{ margin-right: @glp_col-5; }
> [push-right*="@{off}-6"]{ margin-right: @glp_col-6; }
> [push-right*="@{off}-6"]{ margin-right: @glp_col-6; }
> [push-right*="@{off}-7"]{ margin-right: @glp_col-7; }
> [push-right*="@{off}-8"]{ margin-right: @glp_col-8; }
> [push-right*="@{off}-9"]{ margin-right: @glp_col-9; }
> [push-right*="@{off}-10"]{ margin-right: @glp_col-10; }
> [push-right*="@{off}-11"]{ margin-right: @glp_col-11; }
}
}
20 changes: 10 additions & 10 deletions src/gridlex.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
margin: 0 -@gutter;
margin: 0 -@gl-gutter;
}
[class*="col"]{
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 @gutter (@gutter*2);
padding: 0 @gl-gutter (@gl-gutter*2);
}
[class*="grid"][class*="col"]{
margin: 0;
Expand Down Expand Up @@ -99,16 +99,16 @@
*************************/
.makeGridByNumber(grid);

@media @lg{
@media @gl-lg{
.makeGridByNumber(_lg);
}
@media @md{
@media @gl-md{
.makeGridByNumber(_md);
}
@media @sm{
@media @gl-sm{
.makeGridByNumber(_sm);
}
@media @xs{
@media @gl-xs{
.makeGridByNumber(_xs);
}

Expand All @@ -119,19 +119,19 @@
.makeCol(col);
.makeOff(off);

@media @lg{
@media @gl-lg{
.makeCol(_lg);
.makeOff(_lg);
}
@media @md{
@media @gl-md{
.makeCol(_md);
.makeOff(_md);
}
@media @sm{
@media @gl-sm{
.makeCol(_sm);
.makeOff(_sm);
}
@media @xs{
@media @gl-xs{
.makeCol(_xs);
.makeOff(_xs);
}

0 comments on commit e7dc2db

Please sign in to comment.