added blockgrid for bootstrap 4

JohnnyTheTank · Nov 27, 2015 · 1c6f5c0 · 1c6f5c0
1 parent 508b0e7
commit 1c6f5c0
Show file tree

Hide file tree

Showing 14 changed files with 76 additions and 41 deletions.
diff --git 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
@@ -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
-    <script src="bower_components/bootstrap-block-grid/dist/bootstrap-block-grid.min.css"></script>
+    <!-- bootstrap 3 -->
+    <script src="bower_components/bootstrap-block-grid/dist/bootstrap3-block-grid.min.css"></script>
+
+    <!-- bootstrap 4 -->
+    <script src="bower_components/bootstrap-block-grid/dist/bootstrap4-block-grid.min.css"></script>
     ```
 
     2. when using downloaded files
     ```html
+    <!-- bootstrap 3 -->
     <script src="bootstrap-block-grid.min.css"></script>
+
+    <!-- bootstrap 4 -->
+    <script src="bootstrap4-block-grid.min.css"></script>
     ```
 
 3. Sample Markup

diff --git a/bower.json b/bower.json
@@ -4,7 +4,7 @@
   "authors": [
     "Jonathan Hornung <[email protected]>"
   ],
-  "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
diff --git a/dist/bootstrap-block-grid.css → dist/bootstrap3-block-grid.css b/dist/bootstrap-block-grid.css → 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
diff --git a/src/bootstrap-block-grid.css → dist/bootstrap4-block-grid.css b/src/bootstrap-block-grid.css → 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%;
   }