Skip to content

Commit

Permalink
Merge branch 'gh-pages' of https://github.com/khamer/gridly into new-…
Browse files Browse the repository at this point in the history 
…version
  • Loading branch information
@IonicaBizau
IonicaBizau committed Oct 14, 2020
2 parents a07d7a8 + 1ac089b commit b86a2b9
Show file tree
Hide file tree
Showing 10 changed files with 183 additions and 8 deletions.
1 change: 1 addition & 0 deletions dist/gridly-gutters.min.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.col-gutters+.col-gutters{margin-left:2em}@media(max-width:48em){.col-gutters+.col-gutters{margin:0 0 2em}}
1 change: 1 addition & 0 deletions dist/gridly.min.css
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
.row{display:flex}.col{flex:1}@media(max-width:48em){.row{flex-direction:column}.col{flex:0 0 auto}}
@media(min-width:48em){.col-tenth{flex:0 0 10%}.col-fifth{flex:0 0 20%}.col-quarter{flex:0 0 25%}.col-third{flex:0 0 33.3333334%}.col-half{flex:0 0 50%}}
.col-gutters+.col-gutters{margin-left:2em}@media(max-width:48em){.col-gutters+.col-gutters{margin:0 0 2em}}
2 changes: 1 addition & 1 deletion dist/prefixed/gridly-col-widths.min.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
@media(min-width:48em){.col-tenth{-webkit-box-flex:0;flex:0 0 10%}.col-fifth{-webkit-box-flex:0;flex:0 0 20%}.col-quarter{-webkit-box-flex:0;flex:0 0 25%}.col-third{-webkit-box-flex:0;flex:0 0 33.3333334%}.col-half{-webkit-box-flex:0;flex:0 0 50%}}
@media(min-width:48em){.col-tenth{flex:0 0 10%}.col-fifth{flex:0 0 20%}.col-quarter{flex:0 0 25%}.col-third{flex:0 0 33.3333334%}.col-half{flex:0 0 50%}}
2 changes: 1 addition & 1 deletion dist/prefixed/gridly-core.min.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
.row{display:-webkit-box;display:flex}.col{-webkit-box-flex:1;flex:1}@media(max-width:48em){.row{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.col{-webkit-box-flex:0;flex:0 0 auto}}
.row{display:flex}.col{flex:1}@media(max-width:48em){.row{flex-direction:column}.col{flex:0 0 auto}}
1 change: 1 addition & 0 deletions dist/prefixed/gridly-gutters.min.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.col-gutters+.col-gutters{margin-left:2em}@media(max-width:48em){.col-gutters+.col-gutters{margin:0 0 2em}}
5 changes: 3 additions & 2 deletions dist/prefixed/gridly.min.css
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
.row{display:-webkit-box;display:flex}.col{-webkit-box-flex:1;flex:1}@media(max-width:48em){.row{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.col{-webkit-box-flex:0;flex:0 0 auto}}
@media(min-width:48em){.col-tenth{-webkit-box-flex:0;flex:0 0 10%}.col-fifth{-webkit-box-flex:0;flex:0 0 20%}.col-quarter{-webkit-box-flex:0;flex:0 0 25%}.col-third{-webkit-box-flex:0;flex:0 0 33.3333334%}.col-half{-webkit-box-flex:0;flex:0 0 50%}}
.row{display:flex}.col{flex:1}@media(max-width:48em){.row{flex-direction:column}.col{flex:0 0 auto}}
@media(min-width:48em){.col-tenth{flex:0 0 10%}.col-fifth{flex:0 0 20%}.col-quarter{flex:0 0 25%}.col-third{flex:0 0 33.3333334%}.col-half{flex:0 0 50%}}
.col-gutters+.col-gutters{margin-left:2em}@media(max-width:48em){.col-gutters+.col-gutters{margin:0 0 2em}}
160 changes: 160 additions & 0 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -799,6 +799,166 @@ <h1 class="title">Gridly</h1>
<div class="content">20</div>
</div>
</div>

<h2>With Gutters</h2>

<div class="row">
<div class="col col-gutters">
<div class="content">1</div>
</div>
<div class="col col-gutters">
<div class="content">2</div>
</div>
</div>
<div class="row">
<div class="col col-gutters">
<div class="content">1</div>
</div>
<div class="col col-gutters">
<div class="content">2</div>
</div>
<div class="col col-gutters">
<div class="content">3</div>
</div>
</div>
<div class="row">
<div class="col col-gutters">
<div class="content">1</div>
</div>
<div class="col col-gutters">
<div class="content">2</div>
</div>
<div class="col col-gutters">
<div class="content">3</div>
</div>
<div class="col col-gutters">
<div class="content">4</div>
</div>
</div>
<div class="row">
<div class="col col-gutters">
<div class="content">1</div>
</div>
<div class="col col-gutters">
<div class="content">2</div>
</div>
<div class="col col-gutters">
<div class="content">3</div>
</div>
<div class="col col-gutters">
<div class="content">4</div>
</div>
<div class="col col-gutters">
<div class="content">5</div>
</div>
</div>
<div class="row">
<div class="col col-gutters">
<div class="content">1</div>
</div>
<div class="col col-gutters">
<div class="content">2</div>
</div>
<div class="col col-gutters">
<div class="content">3</div>
</div>
<div class="col col-gutters">
<div class="content">4</div>
</div>
<div class="col col-gutters">
<div class="content">5</div>
</div>
<div class="col col-gutters">
<div class="content">6</div>
</div>
</div>
<div class="row">
<div class="col col-gutters">
<div class="content">1</div>
</div>
<div class="col col-gutters">
<div class="content">2</div>
</div>
<div class="col col-gutters">
<div class="content">3</div>
</div>
<div class="col col-gutters">
<div class="content">4</div>
</div>
<div class="col col-gutters">
<div class="content">5</div>
</div>
<div class="col col-gutters">
<div class="content">6</div>
</div>
<div class="col col-gutters">
<div class="content">7</div>
</div>
<div class="col col-gutters">
<div class="content">8</div>
</div>
</div>
<div class="row">
<div class="col col-gutters">
<div class="content">1</div>
</div>
<div class="col col-gutters">
<div class="content">2</div>
</div>
<div class="col col-gutters">
<div class="content">3</div>
</div>
<div class="col col-gutters">
<div class="content">4</div>
</div>
<div class="col col-gutters">
<div class="content">5</div>
</div>
<div class="col col-gutters">
<div class="content">6</div>
</div>
<div class="col col-gutters">
<div class="content">7</div>
</div>
<div class="col col-gutters">
<div class="content">8</div>
</div>
<div class="col col-gutters">
<div class="content">9</div>
</div>
</div>
<div class="row">
<div class="col col-gutters">
<div class="content">1</div>
</div>
<div class="col col-gutters">
<div class="content">2</div>
</div>
<div class="col col-gutters">
<div class="content">3</div>
</div>
<div class="col col-gutters">
<div class="content">4</div>
</div>
<div class="col col-gutters">
<div class="content">5</div>
</div>
<div class="col col-gutters">
<div class="content">6</div>
</div>
<div class="col col-gutters">
<div class="content">7</div>
</div>
<div class="col col-gutters">
<div class="content">8</div>
</div>
<div class="col col-gutters">
<div class="content">9</div>
</div>
<div class="col col-gutters">
<div class="content">10</div>
</div>
</div>
</section>
</div>
</body>
Expand Down
4 changes: 4 additions & 0 deletions example/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ h1.title {
text-shadow: 0 1px 2px #2980b9;
}

h2 {
text-align: center;
}

section.demo .row {
margin: 1em;
background-color: #3498db;
Expand Down
4 changes: 4 additions & 0 deletions lib/gridly-gutters.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.col-gutters + .col-gutters { margin-left: 2em; }
@media (max-width: 48em) {
.col-gutters + .col-gutters { margin: 0 0 2em; }
}
11 changes: 7 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,23 @@
"version": "1.5.0",
"description": "The minimal (~100-170 bytes) grid system for modern browsers.",
"main": "lib/gridly.css",
"unpkg": "dist/gridly.min.css",
"directories": {
"example": "example"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"release": "npm run dist && npm run prefixed",
"dist": "npm run dist-main && npm run dist-widths && npm run dist-all",
"dist": "npm run dist-main && npm run dist-widths && npm run dist-gutters && npm run dist-all",
"dist-main": " uglifycss lib/gridly.css > dist/gridly-core.min.css",
"dist-widths": "uglifycss lib/gridly-col-widths.css > dist/gridly-col-widths.min.css",
"dist-all": "uglifycss lib/gridly.css > dist/gridly.min.css && uglifycss lib/gridly-col-widths.css >> dist/gridly.min.css",
"prefixed": "npm run prefixed-main && npm run prefixed-widths && npm run prefixed-all",
"dist-gutters": "uglifycss lib/gridly-gutters.css > dist/gridly-gutters.min.css",
"dist-all": "uglifycss lib/gridly.css > dist/gridly.min.css && uglifycss lib/gridly-col-widths.css >> dist/gridly.min.css && uglifycss lib/gridly-gutters.css >> dist/gridly.min.css",
"prefixed": "npm run prefixed-main && npm run prefixed-widths && npm run prefixed-gutters && npm run prefixed-all",
"prefixed-main": "postcss -u autoprefixer -c postcss.json lib/gridly.css | uglifycss > dist/prefixed/gridly-core.min.css",
"prefixed-widths": "postcss -u autoprefixer -c postcss.json lib/gridly-col-widths.css | uglifycss > dist/prefixed/gridly-col-widths.min.css",
"prefixed-all": "postcss -u autoprefixer -c postcss.json lib/gridly.css | uglifycss > dist/prefixed/gridly.min.css && postcss -u autoprefixer -c postcss.json lib/gridly-col-widths.css | uglifycss >> dist/prefixed/gridly.min.css"
"prefixed-gutters": "postcss -u autoprefixer -c postcss.json lib/gridly-gutters.css | uglifycss > dist/prefixed/gridly-gutters.min.css",
"prefixed-all": "postcss -u autoprefixer -c postcss.json lib/gridly.css | uglifycss > dist/prefixed/gridly.min.css && postcss -u autoprefixer -c postcss.json lib/gridly-col-widths.css | uglifycss >> dist/prefixed/gridly.min.css && postcss -u autoprefixer -c postcss.json lib/gridly-gutters.css | uglifycss >> dist/prefixed/gridly.min.css"
},
"repository": {
"type": "git",
Expand Down

0 comments on commit b86a2b9

Please sign in to comment.