From 1c6f5c027b8c5f9bfb720a9e1664dbdbd5ca0386 Mon Sep 17 00:00:00 2001 From: Jonathan Hornung Date: Fri, 27 Nov 2015 15:48:36 +0100 Subject: [PATCH] added blockgrid for bootstrap 4 --- Gruntfile.js | 7 +-- README.md | 12 +++++- bower.json | 2 +- dist/bootstrap-block-grid.min.css | 1 - ...ock-grid.css => bootstrap3-block-grid.css} | 8 ++-- dist/bootstrap3-block-grid.min.css | 1 + .../bootstrap4-block-grid.css | 14 +++--- dist/bootstrap4-block-grid.min.css | 1 + package.json | 2 +- ...ck-grid.scss => _bootstrap.gridblock.scss} | 43 ++++++++----------- src/_bootstrap3.breakpoints.scss | 9 ++++ src/_bootstrap4.breakpoints.scss | 9 ++++ src/bootstrap3-block-grid.scss | 4 ++ src/bootstrap4-block-grid.scss | 4 ++ 14 files changed, 76 insertions(+), 41 deletions(-) delete mode 100644 dist/bootstrap-block-grid.min.css rename dist/{bootstrap-block-grid.css => bootstrap3-block-grid.css} (99%) create mode 100644 dist/bootstrap3-block-grid.min.css rename src/bootstrap-block-grid.css => dist/bootstrap4-block-grid.css (98%) create mode 100644 dist/bootstrap4-block-grid.min.css rename src/{bootstrap-block-grid.scss => _bootstrap.gridblock.scss} (95%) create mode 100644 src/_bootstrap3.breakpoints.scss create mode 100644 src/_bootstrap4.breakpoints.scss create mode 100644 src/bootstrap3-block-grid.scss create mode 100644 src/bootstrap4-block-grid.scss diff --git a/Gruntfile.js b/Gruntfile.js index e5e4774..14cc544 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -9,7 +9,8 @@ module.exports = function(grunt) { sourcemap: 'none' }, files: { - 'dist/bootstrap-block-grid.min.css': 'src/bootstrap-block-grid.scss' + 'dist/bootstrap3-block-grid.min.css': 'src/bootstrap3-block-grid.scss', + 'dist/bootstrap4-block-grid.min.css': 'src/bootstrap4-block-grid.scss' } }, dist: { @@ -18,8 +19,8 @@ module.exports = function(grunt) { sourcemap: 'none' }, files: { - 'src/bootstrap-block-grid.css': 'src/bootstrap-block-grid.scss', - 'dist/bootstrap-block-grid.css': 'src/bootstrap-block-grid.scss' + 'dist/bootstrap3-block-grid.css': 'src/bootstrap3-block-grid.scss', + 'dist/bootstrap4-block-grid.css': 'src/bootstrap4-block-grid.scss' } } diff --git a/README.md b/README.md index 465f1a8..8705ffa 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # bootstrap-block-grid -real block grid for bootstrap 3 +real block grid for bootstrap ## usage @@ -12,12 +12,20 @@ real block grid for bootstrap 3 2. Add files to your html 1. when using bower ```html - + + + + + ``` 2. when using downloaded files ```html + + + + ``` 3. Sample Markup diff --git a/bower.json b/bower.json index b778aec..8d04feb 100644 --- a/bower.json +++ b/bower.json @@ -4,7 +4,7 @@ "authors": [ "Jonathan Hornung " ], - "version": "1.0.1", + "version": "1.1.0", "description": "block grid for bootstrap", "main": "dist/bootstrap-block-grid.min.css", "moduleType": [ diff --git a/dist/bootstrap-block-grid.min.css b/dist/bootstrap-block-grid.min.css deleted file mode 100644 index 5dd672c..0000000 --- a/dist/bootstrap-block-grid.min.css +++ /dev/null @@ -1 +0,0 @@ -[class*="block-grid-"]{display:block;margin:-15px;padding:0}[class*="block-grid-"]:before{content:" ";display:table}[class*="block-grid-"]:after{content:" ";display:table;clear:both}[class*="block-grid-"]>*{display:inline;margin:0;padding:15px;height:auto;float:left;list-style:none}.block-grid-xs-1>*{width:100%}.block-grid-xs-1>*:nth-of-type(n){clear:none}.block-grid-xs-1>*:nth-of-type(1n+1){clear:both}.block-grid-xs-2>*{width:50%}.block-grid-xs-2>*:nth-of-type(n){clear:none}.block-grid-xs-2>*:nth-of-type(2n+1){clear:both}.block-grid-xs-3>*{width:33.333333333333336%}.block-grid-xs-3>*:nth-of-type(n){clear:none}.block-grid-xs-3>*:nth-of-type(3n+1){clear:both}.block-grid-xs-4>*{width:25%}.block-grid-xs-4>*:nth-of-type(n){clear:none}.block-grid-xs-4>*:nth-of-type(4n+1){clear:both}.block-grid-xs-5>*{width:20%}.block-grid-xs-5>*:nth-of-type(n){clear:none}.block-grid-xs-5>*:nth-of-type(5n+1){clear:both}.block-grid-xs-6>*{width:16.666666666666668%}.block-grid-xs-6>*:nth-of-type(n){clear:none}.block-grid-xs-6>*:nth-of-type(6n+1){clear:both}.block-grid-xs-7>*{width:14.285714285714286%}.block-grid-xs-7>*:nth-of-type(n){clear:none}.block-grid-xs-7>*:nth-of-type(7n+1){clear:both}.block-grid-xs-8>*{width:12.5%}.block-grid-xs-8>*:nth-of-type(n){clear:none}.block-grid-xs-8>*:nth-of-type(8n+1){clear:both}.block-grid-xs-9>*{width:11.11111111111111%}.block-grid-xs-9>*:nth-of-type(n){clear:none}.block-grid-xs-9>*:nth-of-type(9n+1){clear:both}.block-grid-xs-10>*{width:10%}.block-grid-xs-10>*:nth-of-type(n){clear:none}.block-grid-xs-10>*:nth-of-type(10n+1){clear:both}.block-grid-xs-11>*{width:9.090909090909092%}.block-grid-xs-11>*:nth-of-type(n){clear:none}.block-grid-xs-11>*:nth-of-type(11n+1){clear:both}.block-grid-xs-12>*{width:8.333333333333334%}.block-grid-xs-12>*:nth-of-type(n){clear:none}.block-grid-xs-12>*:nth-of-type(12n+1){clear:both}@media (min-width: 768px){.block-grid-sm-1>*{width:100%}.block-grid-sm-1>*:nth-of-type(n){clear:none}.block-grid-sm-1>*:nth-of-type(1n+1){clear:both}.block-grid-sm-2>*{width:50%}.block-grid-sm-2>*:nth-of-type(n){clear:none}.block-grid-sm-2>*:nth-of-type(2n+1){clear:both}.block-grid-sm-3>*{width:33.333333333333336%}.block-grid-sm-3>*:nth-of-type(n){clear:none}.block-grid-sm-3>*:nth-of-type(3n+1){clear:both}.block-grid-sm-4>*{width:25%}.block-grid-sm-4>*:nth-of-type(n){clear:none}.block-grid-sm-4>*:nth-of-type(4n+1){clear:both}.block-grid-sm-5>*{width:20%}.block-grid-sm-5>*:nth-of-type(n){clear:none}.block-grid-sm-5>*:nth-of-type(5n+1){clear:both}.block-grid-sm-6>*{width:16.666666666666668%}.block-grid-sm-6>*:nth-of-type(n){clear:none}.block-grid-sm-6>*:nth-of-type(6n+1){clear:both}.block-grid-sm-7>*{width:14.285714285714286%}.block-grid-sm-7>*:nth-of-type(n){clear:none}.block-grid-sm-7>*:nth-of-type(7n+1){clear:both}.block-grid-sm-8>*{width:12.5%}.block-grid-sm-8>*:nth-of-type(n){clear:none}.block-grid-sm-8>*:nth-of-type(8n+1){clear:both}.block-grid-sm-9>*{width:11.11111111111111%}.block-grid-sm-9>*:nth-of-type(n){clear:none}.block-grid-sm-9>*:nth-of-type(9n+1){clear:both}.block-grid-sm-10>*{width:10%}.block-grid-sm-10>*:nth-of-type(n){clear:none}.block-grid-sm-10>*:nth-of-type(10n+1){clear:both}.block-grid-sm-11>*{width:9.090909090909092%}.block-grid-sm-11>*:nth-of-type(n){clear:none}.block-grid-sm-11>*:nth-of-type(11n+1){clear:both}.block-grid-sm-12>*{width:8.333333333333334%}.block-grid-sm-12>*:nth-of-type(n){clear:none}.block-grid-sm-12>*:nth-of-type(12n+1){clear:both}}@media (min-width: 992px){.block-grid-md-1>*{width:100%}.block-grid-md-1>*:nth-of-type(n){clear:none}.block-grid-md-1>*:nth-of-type(1n+1){clear:both}.block-grid-md-2>*{width:50%}.block-grid-md-2>*:nth-of-type(n){clear:none}.block-grid-md-2>*:nth-of-type(2n+1){clear:both}.block-grid-md-3>*{width:33.333333333333336%}.block-grid-md-3>*:nth-of-type(n){clear:none}.block-grid-md-3>*:nth-of-type(3n+1){clear:both}.block-grid-md-4>*{width:25%}.block-grid-md-4>*:nth-of-type(n){clear:none}.block-grid-md-4>*:nth-of-type(4n+1){clear:both}.block-grid-md-5>*{width:20%}.block-grid-md-5>*:nth-of-type(n){clear:none}.block-grid-md-5>*:nth-of-type(5n+1){clear:both}.block-grid-md-6>*{width:16.666666666666668%}.block-grid-md-6>*:nth-of-type(n){clear:none}.block-grid-md-6>*:nth-of-type(6n+1){clear:both}.block-grid-md-7>*{width:14.285714285714286%}.block-grid-md-7>*:nth-of-type(n){clear:none}.block-grid-md-7>*:nth-of-type(7n+1){clear:both}.block-grid-md-8>*{width:12.5%}.block-grid-md-8>*:nth-of-type(n){clear:none}.block-grid-md-8>*:nth-of-type(8n+1){clear:both}.block-grid-md-9>*{width:11.11111111111111%}.block-grid-md-9>*:nth-of-type(n){clear:none}.block-grid-md-9>*:nth-of-type(9n+1){clear:both}.block-grid-md-10>*{width:10%}.block-grid-md-10>*:nth-of-type(n){clear:none}.block-grid-md-10>*:nth-of-type(10n+1){clear:both}.block-grid-md-11>*{width:9.090909090909092%}.block-grid-md-11>*:nth-of-type(n){clear:none}.block-grid-md-11>*:nth-of-type(11n+1){clear:both}.block-grid-md-12>*{width:8.333333333333334%}.block-grid-md-12>*:nth-of-type(n){clear:none}.block-grid-md-12>*:nth-of-type(12n+1){clear:both}}@media (min-width: 1200px){.block-grid-lg-1>*{width:100%}.block-grid-lg-1>*:nth-of-type(n){clear:none}.block-grid-lg-1>*:nth-of-type(1n+1){clear:both}.block-grid-lg-2>*{width:50%}.block-grid-lg-2>*:nth-of-type(n){clear:none}.block-grid-lg-2>*:nth-of-type(2n+1){clear:both}.block-grid-lg-3>*{width:33.333333333333336%}.block-grid-lg-3>*:nth-of-type(n){clear:none}.block-grid-lg-3>*:nth-of-type(3n+1){clear:both}.block-grid-lg-4>*{width:25%}.block-grid-lg-4>*:nth-of-type(n){clear:none}.block-grid-lg-4>*:nth-of-type(4n+1){clear:both}.block-grid-lg-5>*{width:20%}.block-grid-lg-5>*:nth-of-type(n){clear:none}.block-grid-lg-5>*:nth-of-type(5n+1){clear:both}.block-grid-lg-6>*{width:16.666666666666668%}.block-grid-lg-6>*:nth-of-type(n){clear:none}.block-grid-lg-6>*:nth-of-type(6n+1){clear:both}.block-grid-lg-7>*{width:14.285714285714286%}.block-grid-lg-7>*:nth-of-type(n){clear:none}.block-grid-lg-7>*:nth-of-type(7n+1){clear:both}.block-grid-lg-8>*{width:12.5%}.block-grid-lg-8>*:nth-of-type(n){clear:none}.block-grid-lg-8>*:nth-of-type(8n+1){clear:both}.block-grid-lg-9>*{width:11.11111111111111%}.block-grid-lg-9>*:nth-of-type(n){clear:none}.block-grid-lg-9>*:nth-of-type(9n+1){clear:both}.block-grid-lg-10>*{width:10%}.block-grid-lg-10>*:nth-of-type(n){clear:none}.block-grid-lg-10>*:nth-of-type(10n+1){clear:both}.block-grid-lg-11>*{width:9.090909090909092%}.block-grid-lg-11>*:nth-of-type(n){clear:none}.block-grid-lg-11>*:nth-of-type(11n+1){clear:both}.block-grid-lg-12>*{width:8.333333333333334%}.block-grid-lg-12>*:nth-of-type(n){clear:none}.block-grid-lg-12>*:nth-of-type(12n+1){clear:both}} diff --git a/dist/bootstrap-block-grid.css b/dist/bootstrap3-block-grid.css similarity index 99% rename from dist/bootstrap-block-grid.css rename to dist/bootstrap3-block-grid.css index de6770a..501b1cd 100644 --- a/dist/bootstrap-block-grid.css +++ b/dist/bootstrap3-block-grid.css @@ -4,15 +4,17 @@ margin: -15px; padding: 0; } -[class*="block-grid-"]:before { + +[class*="block-grid-"]:before, +[class*="block-grid-"]:after { content: " "; display: table; } + [class*="block-grid-"]:after { - content: " "; - display: table; clear: both; } + [class*="block-grid-"] > * { display: inline; margin: 0; diff --git a/dist/bootstrap3-block-grid.min.css b/dist/bootstrap3-block-grid.min.css new file mode 100644 index 0000000..1c18ed2 --- /dev/null +++ b/dist/bootstrap3-block-grid.min.css @@ -0,0 +1 @@ +[class*="block-grid-"]{display:block;margin:-15px;padding:0}[class*="block-grid-"]:before,[class*="block-grid-"]:after{content:" ";display:table}[class*="block-grid-"]:after{clear:both}[class*="block-grid-"]>*{display:inline;margin:0;padding:15px;height:auto;float:left;list-style:none}.block-grid-xs-1>*{width:100%}.block-grid-xs-1>*:nth-of-type(n){clear:none}.block-grid-xs-1>*:nth-of-type(1n+1){clear:both}.block-grid-xs-2>*{width:50%}.block-grid-xs-2>*:nth-of-type(n){clear:none}.block-grid-xs-2>*:nth-of-type(2n+1){clear:both}.block-grid-xs-3>*{width:33.333333333333336%}.block-grid-xs-3>*:nth-of-type(n){clear:none}.block-grid-xs-3>*:nth-of-type(3n+1){clear:both}.block-grid-xs-4>*{width:25%}.block-grid-xs-4>*:nth-of-type(n){clear:none}.block-grid-xs-4>*:nth-of-type(4n+1){clear:both}.block-grid-xs-5>*{width:20%}.block-grid-xs-5>*:nth-of-type(n){clear:none}.block-grid-xs-5>*:nth-of-type(5n+1){clear:both}.block-grid-xs-6>*{width:16.666666666666668%}.block-grid-xs-6>*:nth-of-type(n){clear:none}.block-grid-xs-6>*:nth-of-type(6n+1){clear:both}.block-grid-xs-7>*{width:14.285714285714286%}.block-grid-xs-7>*:nth-of-type(n){clear:none}.block-grid-xs-7>*:nth-of-type(7n+1){clear:both}.block-grid-xs-8>*{width:12.5%}.block-grid-xs-8>*:nth-of-type(n){clear:none}.block-grid-xs-8>*:nth-of-type(8n+1){clear:both}.block-grid-xs-9>*{width:11.11111111111111%}.block-grid-xs-9>*:nth-of-type(n){clear:none}.block-grid-xs-9>*:nth-of-type(9n+1){clear:both}.block-grid-xs-10>*{width:10%}.block-grid-xs-10>*:nth-of-type(n){clear:none}.block-grid-xs-10>*:nth-of-type(10n+1){clear:both}.block-grid-xs-11>*{width:9.090909090909092%}.block-grid-xs-11>*:nth-of-type(n){clear:none}.block-grid-xs-11>*:nth-of-type(11n+1){clear:both}.block-grid-xs-12>*{width:8.333333333333334%}.block-grid-xs-12>*:nth-of-type(n){clear:none}.block-grid-xs-12>*:nth-of-type(12n+1){clear:both}@media (min-width: 768px){.block-grid-sm-1>*{width:100%}.block-grid-sm-1>*:nth-of-type(n){clear:none}.block-grid-sm-1>*:nth-of-type(1n+1){clear:both}.block-grid-sm-2>*{width:50%}.block-grid-sm-2>*:nth-of-type(n){clear:none}.block-grid-sm-2>*:nth-of-type(2n+1){clear:both}.block-grid-sm-3>*{width:33.333333333333336%}.block-grid-sm-3>*:nth-of-type(n){clear:none}.block-grid-sm-3>*:nth-of-type(3n+1){clear:both}.block-grid-sm-4>*{width:25%}.block-grid-sm-4>*:nth-of-type(n){clear:none}.block-grid-sm-4>*:nth-of-type(4n+1){clear:both}.block-grid-sm-5>*{width:20%}.block-grid-sm-5>*:nth-of-type(n){clear:none}.block-grid-sm-5>*:nth-of-type(5n+1){clear:both}.block-grid-sm-6>*{width:16.666666666666668%}.block-grid-sm-6>*:nth-of-type(n){clear:none}.block-grid-sm-6>*:nth-of-type(6n+1){clear:both}.block-grid-sm-7>*{width:14.285714285714286%}.block-grid-sm-7>*:nth-of-type(n){clear:none}.block-grid-sm-7>*:nth-of-type(7n+1){clear:both}.block-grid-sm-8>*{width:12.5%}.block-grid-sm-8>*:nth-of-type(n){clear:none}.block-grid-sm-8>*:nth-of-type(8n+1){clear:both}.block-grid-sm-9>*{width:11.11111111111111%}.block-grid-sm-9>*:nth-of-type(n){clear:none}.block-grid-sm-9>*:nth-of-type(9n+1){clear:both}.block-grid-sm-10>*{width:10%}.block-grid-sm-10>*:nth-of-type(n){clear:none}.block-grid-sm-10>*:nth-of-type(10n+1){clear:both}.block-grid-sm-11>*{width:9.090909090909092%}.block-grid-sm-11>*:nth-of-type(n){clear:none}.block-grid-sm-11>*:nth-of-type(11n+1){clear:both}.block-grid-sm-12>*{width:8.333333333333334%}.block-grid-sm-12>*:nth-of-type(n){clear:none}.block-grid-sm-12>*:nth-of-type(12n+1){clear:both}}@media (min-width: 992px){.block-grid-md-1>*{width:100%}.block-grid-md-1>*:nth-of-type(n){clear:none}.block-grid-md-1>*:nth-of-type(1n+1){clear:both}.block-grid-md-2>*{width:50%}.block-grid-md-2>*:nth-of-type(n){clear:none}.block-grid-md-2>*:nth-of-type(2n+1){clear:both}.block-grid-md-3>*{width:33.333333333333336%}.block-grid-md-3>*:nth-of-type(n){clear:none}.block-grid-md-3>*:nth-of-type(3n+1){clear:both}.block-grid-md-4>*{width:25%}.block-grid-md-4>*:nth-of-type(n){clear:none}.block-grid-md-4>*:nth-of-type(4n+1){clear:both}.block-grid-md-5>*{width:20%}.block-grid-md-5>*:nth-of-type(n){clear:none}.block-grid-md-5>*:nth-of-type(5n+1){clear:both}.block-grid-md-6>*{width:16.666666666666668%}.block-grid-md-6>*:nth-of-type(n){clear:none}.block-grid-md-6>*:nth-of-type(6n+1){clear:both}.block-grid-md-7>*{width:14.285714285714286%}.block-grid-md-7>*:nth-of-type(n){clear:none}.block-grid-md-7>*:nth-of-type(7n+1){clear:both}.block-grid-md-8>*{width:12.5%}.block-grid-md-8>*:nth-of-type(n){clear:none}.block-grid-md-8>*:nth-of-type(8n+1){clear:both}.block-grid-md-9>*{width:11.11111111111111%}.block-grid-md-9>*:nth-of-type(n){clear:none}.block-grid-md-9>*:nth-of-type(9n+1){clear:both}.block-grid-md-10>*{width:10%}.block-grid-md-10>*:nth-of-type(n){clear:none}.block-grid-md-10>*:nth-of-type(10n+1){clear:both}.block-grid-md-11>*{width:9.090909090909092%}.block-grid-md-11>*:nth-of-type(n){clear:none}.block-grid-md-11>*:nth-of-type(11n+1){clear:both}.block-grid-md-12>*{width:8.333333333333334%}.block-grid-md-12>*:nth-of-type(n){clear:none}.block-grid-md-12>*:nth-of-type(12n+1){clear:both}}@media (min-width: 1200px){.block-grid-lg-1>*{width:100%}.block-grid-lg-1>*:nth-of-type(n){clear:none}.block-grid-lg-1>*:nth-of-type(1n+1){clear:both}.block-grid-lg-2>*{width:50%}.block-grid-lg-2>*:nth-of-type(n){clear:none}.block-grid-lg-2>*:nth-of-type(2n+1){clear:both}.block-grid-lg-3>*{width:33.333333333333336%}.block-grid-lg-3>*:nth-of-type(n){clear:none}.block-grid-lg-3>*:nth-of-type(3n+1){clear:both}.block-grid-lg-4>*{width:25%}.block-grid-lg-4>*:nth-of-type(n){clear:none}.block-grid-lg-4>*:nth-of-type(4n+1){clear:both}.block-grid-lg-5>*{width:20%}.block-grid-lg-5>*:nth-of-type(n){clear:none}.block-grid-lg-5>*:nth-of-type(5n+1){clear:both}.block-grid-lg-6>*{width:16.666666666666668%}.block-grid-lg-6>*:nth-of-type(n){clear:none}.block-grid-lg-6>*:nth-of-type(6n+1){clear:both}.block-grid-lg-7>*{width:14.285714285714286%}.block-grid-lg-7>*:nth-of-type(n){clear:none}.block-grid-lg-7>*:nth-of-type(7n+1){clear:both}.block-grid-lg-8>*{width:12.5%}.block-grid-lg-8>*:nth-of-type(n){clear:none}.block-grid-lg-8>*:nth-of-type(8n+1){clear:both}.block-grid-lg-9>*{width:11.11111111111111%}.block-grid-lg-9>*:nth-of-type(n){clear:none}.block-grid-lg-9>*:nth-of-type(9n+1){clear:both}.block-grid-lg-10>*{width:10%}.block-grid-lg-10>*:nth-of-type(n){clear:none}.block-grid-lg-10>*:nth-of-type(10n+1){clear:both}.block-grid-lg-11>*{width:9.090909090909092%}.block-grid-lg-11>*:nth-of-type(n){clear:none}.block-grid-lg-11>*:nth-of-type(11n+1){clear:both}.block-grid-lg-12>*{width:8.333333333333334%}.block-grid-lg-12>*:nth-of-type(n){clear:none}.block-grid-lg-12>*:nth-of-type(12n+1){clear:both}} diff --git a/src/bootstrap-block-grid.css b/dist/bootstrap4-block-grid.css similarity index 98% rename from src/bootstrap-block-grid.css rename to dist/bootstrap4-block-grid.css index de6770a..942d2fe 100644 --- a/src/bootstrap-block-grid.css +++ b/dist/bootstrap4-block-grid.css @@ -4,15 +4,17 @@ margin: -15px; padding: 0; } -[class*="block-grid-"]:before { + +[class*="block-grid-"]:before, +[class*="block-grid-"]:after { content: " "; display: table; } + [class*="block-grid-"]:after { - content: " "; - display: table; clear: both; } + [class*="block-grid-"] > * { display: inline; margin: 0; @@ -166,7 +168,7 @@ clear: both; } -@media (min-width: 768px) { +@media (min-width: 34em) { .block-grid-sm-1 > * { width: 100%; } @@ -311,7 +313,7 @@ clear: both; } } -@media (min-width: 992px) { +@media (min-width: 48em) { .block-grid-md-1 > * { width: 100%; } @@ -456,7 +458,7 @@ clear: both; } } -@media (min-width: 1200px) { +@media (min-width: 62em) { .block-grid-lg-1 > * { width: 100%; } diff --git a/dist/bootstrap4-block-grid.min.css b/dist/bootstrap4-block-grid.min.css new file mode 100644 index 0000000..06cbba5 --- /dev/null +++ b/dist/bootstrap4-block-grid.min.css @@ -0,0 +1 @@ +[class*="block-grid-"]{display:block;margin:-15px;padding:0}[class*="block-grid-"]:before,[class*="block-grid-"]:after{content:" ";display:table}[class*="block-grid-"]:after{clear:both}[class*="block-grid-"]>*{display:inline;margin:0;padding:15px;height:auto;float:left;list-style:none}.block-grid-xs-1>*{width:100%}.block-grid-xs-1>*:nth-of-type(n){clear:none}.block-grid-xs-1>*:nth-of-type(1n+1){clear:both}.block-grid-xs-2>*{width:50%}.block-grid-xs-2>*:nth-of-type(n){clear:none}.block-grid-xs-2>*:nth-of-type(2n+1){clear:both}.block-grid-xs-3>*{width:33.333333333333336%}.block-grid-xs-3>*:nth-of-type(n){clear:none}.block-grid-xs-3>*:nth-of-type(3n+1){clear:both}.block-grid-xs-4>*{width:25%}.block-grid-xs-4>*:nth-of-type(n){clear:none}.block-grid-xs-4>*:nth-of-type(4n+1){clear:both}.block-grid-xs-5>*{width:20%}.block-grid-xs-5>*:nth-of-type(n){clear:none}.block-grid-xs-5>*:nth-of-type(5n+1){clear:both}.block-grid-xs-6>*{width:16.666666666666668%}.block-grid-xs-6>*:nth-of-type(n){clear:none}.block-grid-xs-6>*:nth-of-type(6n+1){clear:both}.block-grid-xs-7>*{width:14.285714285714286%}.block-grid-xs-7>*:nth-of-type(n){clear:none}.block-grid-xs-7>*:nth-of-type(7n+1){clear:both}.block-grid-xs-8>*{width:12.5%}.block-grid-xs-8>*:nth-of-type(n){clear:none}.block-grid-xs-8>*:nth-of-type(8n+1){clear:both}.block-grid-xs-9>*{width:11.11111111111111%}.block-grid-xs-9>*:nth-of-type(n){clear:none}.block-grid-xs-9>*:nth-of-type(9n+1){clear:both}.block-grid-xs-10>*{width:10%}.block-grid-xs-10>*:nth-of-type(n){clear:none}.block-grid-xs-10>*:nth-of-type(10n+1){clear:both}.block-grid-xs-11>*{width:9.090909090909092%}.block-grid-xs-11>*:nth-of-type(n){clear:none}.block-grid-xs-11>*:nth-of-type(11n+1){clear:both}.block-grid-xs-12>*{width:8.333333333333334%}.block-grid-xs-12>*:nth-of-type(n){clear:none}.block-grid-xs-12>*:nth-of-type(12n+1){clear:both}@media (min-width: 34em){.block-grid-sm-1>*{width:100%}.block-grid-sm-1>*:nth-of-type(n){clear:none}.block-grid-sm-1>*:nth-of-type(1n+1){clear:both}.block-grid-sm-2>*{width:50%}.block-grid-sm-2>*:nth-of-type(n){clear:none}.block-grid-sm-2>*:nth-of-type(2n+1){clear:both}.block-grid-sm-3>*{width:33.333333333333336%}.block-grid-sm-3>*:nth-of-type(n){clear:none}.block-grid-sm-3>*:nth-of-type(3n+1){clear:both}.block-grid-sm-4>*{width:25%}.block-grid-sm-4>*:nth-of-type(n){clear:none}.block-grid-sm-4>*:nth-of-type(4n+1){clear:both}.block-grid-sm-5>*{width:20%}.block-grid-sm-5>*:nth-of-type(n){clear:none}.block-grid-sm-5>*:nth-of-type(5n+1){clear:both}.block-grid-sm-6>*{width:16.666666666666668%}.block-grid-sm-6>*:nth-of-type(n){clear:none}.block-grid-sm-6>*:nth-of-type(6n+1){clear:both}.block-grid-sm-7>*{width:14.285714285714286%}.block-grid-sm-7>*:nth-of-type(n){clear:none}.block-grid-sm-7>*:nth-of-type(7n+1){clear:both}.block-grid-sm-8>*{width:12.5%}.block-grid-sm-8>*:nth-of-type(n){clear:none}.block-grid-sm-8>*:nth-of-type(8n+1){clear:both}.block-grid-sm-9>*{width:11.11111111111111%}.block-grid-sm-9>*:nth-of-type(n){clear:none}.block-grid-sm-9>*:nth-of-type(9n+1){clear:both}.block-grid-sm-10>*{width:10%}.block-grid-sm-10>*:nth-of-type(n){clear:none}.block-grid-sm-10>*:nth-of-type(10n+1){clear:both}.block-grid-sm-11>*{width:9.090909090909092%}.block-grid-sm-11>*:nth-of-type(n){clear:none}.block-grid-sm-11>*:nth-of-type(11n+1){clear:both}.block-grid-sm-12>*{width:8.333333333333334%}.block-grid-sm-12>*:nth-of-type(n){clear:none}.block-grid-sm-12>*:nth-of-type(12n+1){clear:both}}@media (min-width: 48em){.block-grid-md-1>*{width:100%}.block-grid-md-1>*:nth-of-type(n){clear:none}.block-grid-md-1>*:nth-of-type(1n+1){clear:both}.block-grid-md-2>*{width:50%}.block-grid-md-2>*:nth-of-type(n){clear:none}.block-grid-md-2>*:nth-of-type(2n+1){clear:both}.block-grid-md-3>*{width:33.333333333333336%}.block-grid-md-3>*:nth-of-type(n){clear:none}.block-grid-md-3>*:nth-of-type(3n+1){clear:both}.block-grid-md-4>*{width:25%}.block-grid-md-4>*:nth-of-type(n){clear:none}.block-grid-md-4>*:nth-of-type(4n+1){clear:both}.block-grid-md-5>*{width:20%}.block-grid-md-5>*:nth-of-type(n){clear:none}.block-grid-md-5>*:nth-of-type(5n+1){clear:both}.block-grid-md-6>*{width:16.666666666666668%}.block-grid-md-6>*:nth-of-type(n){clear:none}.block-grid-md-6>*:nth-of-type(6n+1){clear:both}.block-grid-md-7>*{width:14.285714285714286%}.block-grid-md-7>*:nth-of-type(n){clear:none}.block-grid-md-7>*:nth-of-type(7n+1){clear:both}.block-grid-md-8>*{width:12.5%}.block-grid-md-8>*:nth-of-type(n){clear:none}.block-grid-md-8>*:nth-of-type(8n+1){clear:both}.block-grid-md-9>*{width:11.11111111111111%}.block-grid-md-9>*:nth-of-type(n){clear:none}.block-grid-md-9>*:nth-of-type(9n+1){clear:both}.block-grid-md-10>*{width:10%}.block-grid-md-10>*:nth-of-type(n){clear:none}.block-grid-md-10>*:nth-of-type(10n+1){clear:both}.block-grid-md-11>*{width:9.090909090909092%}.block-grid-md-11>*:nth-of-type(n){clear:none}.block-grid-md-11>*:nth-of-type(11n+1){clear:both}.block-grid-md-12>*{width:8.333333333333334%}.block-grid-md-12>*:nth-of-type(n){clear:none}.block-grid-md-12>*:nth-of-type(12n+1){clear:both}}@media (min-width: 62em){.block-grid-lg-1>*{width:100%}.block-grid-lg-1>*:nth-of-type(n){clear:none}.block-grid-lg-1>*:nth-of-type(1n+1){clear:both}.block-grid-lg-2>*{width:50%}.block-grid-lg-2>*:nth-of-type(n){clear:none}.block-grid-lg-2>*:nth-of-type(2n+1){clear:both}.block-grid-lg-3>*{width:33.333333333333336%}.block-grid-lg-3>*:nth-of-type(n){clear:none}.block-grid-lg-3>*:nth-of-type(3n+1){clear:both}.block-grid-lg-4>*{width:25%}.block-grid-lg-4>*:nth-of-type(n){clear:none}.block-grid-lg-4>*:nth-of-type(4n+1){clear:both}.block-grid-lg-5>*{width:20%}.block-grid-lg-5>*:nth-of-type(n){clear:none}.block-grid-lg-5>*:nth-of-type(5n+1){clear:both}.block-grid-lg-6>*{width:16.666666666666668%}.block-grid-lg-6>*:nth-of-type(n){clear:none}.block-grid-lg-6>*:nth-of-type(6n+1){clear:both}.block-grid-lg-7>*{width:14.285714285714286%}.block-grid-lg-7>*:nth-of-type(n){clear:none}.block-grid-lg-7>*:nth-of-type(7n+1){clear:both}.block-grid-lg-8>*{width:12.5%}.block-grid-lg-8>*:nth-of-type(n){clear:none}.block-grid-lg-8>*:nth-of-type(8n+1){clear:both}.block-grid-lg-9>*{width:11.11111111111111%}.block-grid-lg-9>*:nth-of-type(n){clear:none}.block-grid-lg-9>*:nth-of-type(9n+1){clear:both}.block-grid-lg-10>*{width:10%}.block-grid-lg-10>*:nth-of-type(n){clear:none}.block-grid-lg-10>*:nth-of-type(10n+1){clear:both}.block-grid-lg-11>*{width:9.090909090909092%}.block-grid-lg-11>*:nth-of-type(n){clear:none}.block-grid-lg-11>*:nth-of-type(11n+1){clear:both}.block-grid-lg-12>*{width:8.333333333333334%}.block-grid-lg-12>*:nth-of-type(n){clear:none}.block-grid-lg-12>*:nth-of-type(12n+1){clear:both}} diff --git a/package.json b/package.json index 28cea8a..7d9b16c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bootstrap-block-grid", - "version": "1.0.1", + "version": "1.1.0", "description": "block grid for bootstrap", "main": "Gruntfile.js", "scripts": { diff --git a/src/bootstrap-block-grid.scss b/src/_bootstrap.gridblock.scss similarity index 95% rename from src/bootstrap-block-grid.scss rename to src/_bootstrap.gridblock.scss index e943104..4f2c2b2 100644 --- a/src/bootstrap-block-grid.scss +++ b/src/_bootstrap.gridblock.scss @@ -5,29 +5,24 @@ display: block; margin: -15px; padding: 0; - - &:before { - content: " "; - display: table; - } - - &:after { - content: " "; - display: table; - clear: both; - } - - > * { - display: inline; - margin: 0; - padding: 15px; - height: auto; - float: left; - list-style: none; - } - +} +[class*="block-grid-"]:before, +[class*="block-grid-"]:after { + content: " "; + display: table; +} +[class*="block-grid-"]:after { + clear: both; } +[class*="block-grid-"] > * { + display: inline; + margin: 0; + padding: 15px; + height: auto; + float: left; + list-style: none; +} .block-grid-xs-1 > * { width: 100%; } @@ -136,7 +131,7 @@ .block-grid-xs-12 > *:nth-of-type(12n+1) { clear: both; } -@media (min-width: 768px) { +@media (min-width: $min-sm) { .block-grid-sm-1 > * { width: 100%; } @@ -246,7 +241,7 @@ clear: both; } } -@media (min-width: 992px) { +@media (min-width: $min-md) { .block-grid-md-1 > * { width: 100%; } @@ -356,7 +351,7 @@ clear: both; } } -@media (min-width: 1200px) { +@media (min-width: $min-lg) { .block-grid-lg-1 > * { width: 100%; } diff --git a/src/_bootstrap3.breakpoints.scss b/src/_bootstrap3.breakpoints.scss new file mode 100644 index 0000000..512b92b --- /dev/null +++ b/src/_bootstrap3.breakpoints.scss @@ -0,0 +1,9 @@ +$max-xs: 767px; + +$min-sm: $max-xs+1; +$max-sm: 991px; + +$min-md: $max-sm+1; +$max-md: 1199px; + +$min-lg: $max-md+1; \ No newline at end of file diff --git a/src/_bootstrap4.breakpoints.scss b/src/_bootstrap4.breakpoints.scss new file mode 100644 index 0000000..6136ead --- /dev/null +++ b/src/_bootstrap4.breakpoints.scss @@ -0,0 +1,9 @@ +$max-xs: 33.9em; + +$min-sm: 34em; +$max-sm: 47.9em; + +$min-md: 48em; +$max-md: 61.9em; + +$min-lg: 62em; \ No newline at end of file diff --git a/src/bootstrap3-block-grid.scss b/src/bootstrap3-block-grid.scss new file mode 100644 index 0000000..bad89f1 --- /dev/null +++ b/src/bootstrap3-block-grid.scss @@ -0,0 +1,4 @@ +@charset "utf-8"; + +@import "bootstrap3.breakpoints"; +@import "bootstrap.gridblock"; diff --git a/src/bootstrap4-block-grid.scss b/src/bootstrap4-block-grid.scss new file mode 100644 index 0000000..850ec60 --- /dev/null +++ b/src/bootstrap4-block-grid.scss @@ -0,0 +1,4 @@ +@charset "utf-8"; + +@import "bootstrap4.breakpoints"; +@import "bootstrap.gridblock"; \ No newline at end of file