styled-bootstrap-grid - npm Package Compare versions

Comparing version 3.0.5 to 3.1.0

dist/components/Col/Col.js

@@ -20,2 +20,72 @@ "use strict";
 
+function _templateObject43() {
+  var data = _taggedTemplateLiteral(["", ""]);
+
+  _templateObject43 = function _templateObject43() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject42() {
+  var data = _taggedTemplateLiteral(["", ""]);
+
+  _templateObject42 = function _templateObject42() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject41() {
+  var data = _taggedTemplateLiteral(["", ""]);
+
+  _templateObject41 = function _templateObject41() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject40() {
+  var data = _taggedTemplateLiteral(["", ""]);
+
+  _templateObject40 = function _templateObject40() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject39() {
+  var data = _taggedTemplateLiteral(["", ""]);
+
+  _templateObject39 = function _templateObject39() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject38() {
+  var data = _taggedTemplateLiteral(["", ""]);
+
+  _templateObject38 = function _templateObject38() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject37() {
+  var data = _taggedTemplateLiteral(["", ""]);
+
+  _templateObject37 = function _templateObject37() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject36() {
@@ -372,3 +442,3 @@ var data = _taggedTemplateLiteral(["", ""]);
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  min-height: 1px;\n  padding-right: ", "px;\n  padding-left: ", "px;\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  min-height: 1px;\n  padding-right: ", "px;\n  padding-left: ", "px;\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"]);
 
@@ -384,2 +454,10 @@ _templateObject = function _templateObject() {
 
+var getGridColumns = function getGridColumns(theme) {
+  if (!theme.styledBootstrapGrid) {
+    return 12;
+  }
+
+  return theme.styledBootstrapGrid.getGridColumns();
+};
+
 var _default = _styledComponents.default.div.attrs(function (props) {
@@ -404,21 +482,21 @@ return {
 }, function (p) {
-  return p.col && _css.default.col[p.col === true ? 'true' : p.col];
+  return p.col && _css.default.col(p.col, getGridColumns(p.theme));
 }, function (p) {
-  return typeof p.offset !== 'undefined' && _css.default.offset[p.offset];
+  return typeof p.offset !== 'undefined' && _css.default.offset(p.offset, getGridColumns(p.theme));
 }, function (p) {
-  return p.auto && _css.default.col.auto;
+  return p.auto && _css.default.col('auto', 0);
 }, function (p) {
   return p.alignSelf && _css.default.alignSelf[p.alignSelf];
 }, function (p) {
-  return p.order && _css.default.order[p.order];
+  return p.order && _css.default.order(p.order);
 }, function (p) {
-  return p.xs && _media.default.xs(_templateObject2(), _css.default.col[p.xs === true ? 'true' : p.xs]);
+  return p.xs && _media.default.xs(_templateObject2(), _css.default.col(p.xs, getGridColumns(p.theme)));
 }, function (p) {
-  return typeof p.xsOffset !== 'undefined' && (0, _utils.isNumber)(p.xsOffset) && _media.default.xs(_templateObject3(), _css.default.offset[p.xsOffset]);
+  return typeof p.xsOffset !== 'undefined' && (0, _utils.isNumber)(p.xsOffset) && _media.default.xs(_templateObject3(), _css.default.offset(p.xsOffset, getGridColumns(p.theme)));
 }, function (p) {
-  return p.xsAuto && _media.default.xs(_templateObject4(), _css.default.col.auto);
+  return p.xsAuto && _media.default.xs(_templateObject4(), _css.default.col('auto', 0));
 }, function (p) {
   return p.xsAlignSelf && _media.default.xs(_templateObject5(), _css.default.alignSelf[p.xsAlignSelf]);
 }, function (p) {
-  return p.xsOrder && _media.default.xs(_templateObject6(), _css.default.order[p.xsOrder]);
+  return p.xsOrder && _media.default.xs(_templateObject6(), _css.default.order(p.xsOrder));
 }, function (p) {
@@ -429,11 +507,11 @@ return p.hiddenXsDown && _media.default.max.xs(_templateObject7(), _css.default.display.none);
 }, function (p) {
-  return p.sm && _media.default.sm(_templateObject9(), _css.default.col[p.sm === true ? 'true' : p.sm]);
+  return p.sm && _media.default.sm(_templateObject9(), _css.default.col(p.sm, getGridColumns(p.theme)));
 }, function (p) {
-  return typeof p.smOffset !== 'undefined' && (0, _utils.isNumber)(p.smOffset) && _media.default.sm(_templateObject10(), _css.default.offset[p.smOffset]);
+  return typeof p.smOffset !== 'undefined' && (0, _utils.isNumber)(p.smOffset) && _media.default.sm(_templateObject10(), _css.default.offset(p.smOffset, getGridColumns(p.theme)));
 }, function (p) {
-  return p.smAuto && _media.default.sm(_templateObject11(), _css.default.col.auto);
+  return p.smAuto && _media.default.sm(_templateObject11(), _css.default.col('auto', 0));
 }, function (p) {
   return p.smAlignSelf && _media.default.sm(_templateObject12(), _css.default.alignSelf[p.smAlignSelf]);
 }, function (p) {
-  return p.smOrder && _media.default.sm(_templateObject13(), _css.default.order[p.smOrder]);
+  return p.smOrder && _media.default.sm(_templateObject13(), _css.default.order(p.smOrder));
 }, function (p) {
@@ -444,11 +522,11 @@ return p.hiddenSmDown && _media.default.max.sm(_templateObject14(), _css.default.display.none);
 }, function (p) {
-  return p.md && _media.default.md(_templateObject16(), _css.default.col[p.md === true ? 'true' : p.md]);
+  return p.md && _media.default.md(_templateObject16(), _css.default.col(p.md, getGridColumns(p.theme)));
 }, function (p) {
-  return typeof p.mdOffset !== 'undefined' && (0, _utils.isNumber)(p.mdOffset) && _media.default.md(_templateObject17(), _css.default.offset[p.mdOffset]);
+  return typeof p.mdOffset !== 'undefined' && (0, _utils.isNumber)(p.mdOffset) && _media.default.md(_templateObject17(), _css.default.offset(p.mdOffset, getGridColumns(p.theme)));
 }, function (p) {
-  return p.mdAuto && _media.default.md(_templateObject18(), _css.default.col.auto);
+  return p.mdAuto && _media.default.md(_templateObject18(), _css.default.col('auto'));
 }, function (p) {
   return p.mdAlignSelf && _media.default.md(_templateObject19(), _css.default.alignSelf[p.mdAlignSelf]);
 }, function (p) {
-  return p.mdOrder && _media.default.md(_templateObject20(), _css.default.order[p.mdOrder]);
+  return p.mdOrder && _media.default.md(_templateObject20(), _css.default.order(p.mdOrder));
 }, function (p) {
@@ -459,11 +537,11 @@ return p.hiddenMdDown && _media.default.max.md(_templateObject21(), _css.default.display.none);
 }, function (p) {
-  return p.lg && _media.default.lg(_templateObject23(), _css.default.col[p.lg === true ? 'true' : p.lg]);
+  return p.lg && _media.default.lg(_templateObject23(), _css.default.col(p.lg, getGridColumns(p.theme)));
 }, function (p) {
-  return typeof p.lgOffset !== 'undefined' && (0, _utils.isNumber)(p.lgOffset) && _media.default.lg(_templateObject24(), _css.default.offset[p.lgOffset]);
+  return typeof p.lgOffset !== 'undefined' && (0, _utils.isNumber)(p.lgOffset) && _media.default.lg(_templateObject24(), _css.default.offset(p.lgOffset, getGridColumns(p.theme)));
 }, function (p) {
-  return p.lgAuto && _media.default.lg(_templateObject25(), _css.default.col.auto);
+  return p.lgAuto && _media.default.lg(_templateObject25(), _css.default.col('auto'));
 }, function (p) {
   return p.lgAlignSelf && _media.default.lg(_templateObject26(), _css.default.alignSelf[p.lgAlignSelf]);
 }, function (p) {
-  return p.lgOrder && _media.default.lg(_templateObject27(), _css.default.order[p.lgOrder]);
+  return p.lgOrder && _media.default.lg(_templateObject27(), _css.default.order(p.lgOrder));
 }, function (p) {
@@ -474,11 +552,11 @@ return p.hiddenLgDown && _media.default.max.lg(_templateObject28(), _css.default.display.none);
 }, function (p) {
-  return p.xl && _media.default.xl(_templateObject30(), _css.default.col[p.xl === true ? 'true' : p.xl]);
+  return p.xl && _media.default.xl(_templateObject30(), _css.default.col(p.xl, getGridColumns(p.theme)));
 }, function (p) {
-  return typeof p.xlOffset !== 'undefined' && (0, _utils.isNumber)(p.xlOffset) && _media.default.xl(_templateObject31(), _css.default.offset[p.xlOffset]);
+  return typeof p.xlOffset !== 'undefined' && (0, _utils.isNumber)(p.xlOffset) && _media.default.xl(_templateObject31(), _css.default.offset(p.xlOffset, getGridColumns(p.theme)));
 }, function (p) {
-  return p.xlAuto && _media.default.xl(_templateObject32(), _css.default.col.auto);
+  return p.xlAuto && _media.default.xl(_templateObject32(), _css.default.col('auto'));
 }, function (p) {
   return p.xlAlignSelf && _media.default.xl(_templateObject33(), _css.default.alignSelf[p.xlAlignSelf]);
 }, function (p) {
-  return p.xlOrder && _media.default.xl(_templateObject34(), _css.default.order[p.xlOrder]);
+  return p.xlOrder && _media.default.xl(_templateObject34(), _css.default.order(p.xlOrder));
 }, function (p) {
@@ -488,4 +566,18 @@ return p.hiddenXlDown && _media.default.max.xl(_templateObject35(), _css.default.display.none);
   return p.hiddenXlUp && _media.default.min.xl(_templateObject36(), _css.default.display.none);
+}, function (p) {
+  return p.xxl && _media.default.xxl(_templateObject37(), _css.default.col(p.xxl, getGridColumns(p.theme)));
+}, function (p) {
+  return typeof p.xxlOffset !== 'undefined' && (0, _utils.isNumber)(p.xxlOffset) && _media.default.xxl(_templateObject38(), _css.default.offset(p.xxlOffset, getGridColumns(p.theme)));
+}, function (p) {
+  return p.xxlAuto && _media.default.xxl(_templateObject39(), _css.default.col('auto'));
+}, function (p) {
+  return p.xxlAlignSelf && _media.default.xxl(_templateObject40(), _css.default.alignSelf[p.xxlAlignSelf]);
+}, function (p) {
+  return p.xxlOrder && _media.default.xxl(_templateObject41(), _css.default.order(p.xxlOrder));
+}, function (p) {
+  return p.hiddenXlDown && _media.default.max.xxl(_templateObject42(), _css.default.display.none);
+}, function (p) {
+  return p.hiddenXlUp && _media.default.min.xxl(_templateObject43(), _css.default.display.none);
 });
 
 exports.default = _default;

dist/components/Col/css.d.ts

 import { ColCss } from './types';
-declare const css: ColCss;
+declare let css: ColCss;
 export default css;

dist/components/Col/css.js

@@ -8,56 +8,41 @@ "use strict";
 var css = {
-  col: {
-    true: "\n      -ms-flex-preferred-size: 0;\n      flex-basis: 0;\n      -ms-flex-positive: 1;\n      flex-grow: 1;\n      max-width: 100%;\n    ",
-    auto: "\n      -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n      width: auto;\n      max-width: none;\n    ",
-    1: "\n      -ms-flex: 0 0 8.333333%;\n      flex: 0 0 8.333333%;\n      max-width: 8.333333%;\n    ",
-    2: "\n      -ms-flex: 0 0 16.666667%;\n      flex: 0 0 16.666667%;\n      max-width: 16.666667%;\n    ",
-    3: "\n      -ms-flex: 0 0 25%;\n      flex: 0 0 25%;\n      max-width: 25%;\n        ",
-    4: "\n      -ms-flex: 0 0 33.333333%;\n      flex: 0 0 33.333333%;\n      max-width: 33.333333%;\n        ",
-    5: "\n      -ms-flex: 0 0 41.666667%;\n      flex: 0 0 41.666667%;\n      max-width: 41.666667%;\n        ",
-    6: "\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      max-width: 50%;\n    ",
-    7: "\n      -ms-flex: 0 0 58.333333%;\n      flex: 0 0 58.333333%;\n      max-width: 58.333333%;\n    ",
-    8: "\n      -ms-flex: 0 0 66.666667%;\n      flex: 0 0 66.666667%;\n      max-width: 66.666667%;\n    ",
-    9: "\n      -ms-flex: 0 0 75%;\n      flex: 0 0 75%;\n      max-width: 75%;\n    ",
-    10: "\n      -ms-flex: 0 0 83.333333%;\n      flex: 0 0 83.333333%;\n      max-width: 83.333333%;\n    ",
-    11: "\n      -ms-flex: 0 0 91.666667%;\n      flex: 0 0 91.666667%;\n      max-width: 91.666667%;\n    ",
-    12: "\n      -ms-flex: 0 0 100%;\n      flex: 0 0 100%;\n      max-width: 100%;\n    "
+  col: function col(column, gridColumns) {
+    switch (column) {
+      case true:
+        return "\n          -ms-flex-preferred-size: 0;\n          flex-basis: 0;\n          -ms-flex-positive: 1;\n          flex-grow: 1;\n          max-width: 100%;\n        ";
+
+      case 'auto':
+        return "\n          -ms-flex: 0 0 auto;\n          flex: 0 0 auto;\n          width: auto;\n          max-width: none;\n        ";
+
+      default:
+        var singleCol = 100 / gridColumns;
+        var colFlexBasis = singleCol * column;
+        return "\n            -ms-flex: 0 0 ".concat(colFlexBasis, "%;\n            flex: 0 0 ").concat(colFlexBasis, "%;\n            max-width: ").concat(colFlexBasis, "%;\n        ");
+    }
   },
-  offset: {
-    0: 'margin-left: 0;',
-    1: 'margin-left: 8.333333%;',
-    2: 'margin-left: 16.666667%;',
-    3: 'margin-left: 25%;',
-    4: 'margin-left: 33.333333%;',
-    5: 'margin-left: 41.666667%;',
-    6: 'margin-left: 50%;',
-    7: 'margin-left: 58.333333%;',
-    8: 'margin-left: 66.666667%;',
-    9: 'margin-left: 75%;',
-    10: 'margin-left: 83.333333%;',
-    11: 'margin-left: 91.666667%;'
+  offset: function offset(_offset, gridColumns) {
+    var singleCol = 100 / gridColumns;
+    var offsetFlexBasis = singleCol * _offset;
+    var offsetUnit = offsetFlexBasis > 0 ? '%' : '';
+    return "margin-left: ".concat(offsetFlexBasis).concat(offsetUnit);
   },
-  order: {
-    first: "\n      -ms-flex-order: -1;\n      order: -1;\n    ",
-    last: "\n      -ms-flex-order: 13;\n      order: 13;\n    ",
-    0: "\n      -ms-flex-order: 0;\n      order: 0;\n    ",
-    1: "\n      -ms-flex-order: 1;\n      order: 1;\n    ",
-    2: "\n      -ms-flex-order: 2;\n      order: 2;\n    ",
-    3: "\n      -ms-flex-order: 3;\n      order: 3;\n    ",
-    4: "\n      -ms-flex-order: 4;\n      order: 4;\n    ",
-    5: "\n      -ms-flex-order: 5;\n      order: 5;\n    ",
-    6: "\n      -ms-flex-order: 6;\n      order: 6;\n    ",
-    7: "\n      -ms-flex-order: 7;\n      order: 7;\n    ",
-    8: "\n      -ms-flex-order: 8;\n      order: 8;\n    ",
-    9: "\n      -ms-flex-order: 9;\n      order: 9;\n    ",
-    10: "\n      -ms-flex-order: 10;\n      order: 10;\n    ",
-    11: "\n      -ms-flex-order: 11;\n      order: 11;\n    ",
-    12: "\n      -ms-flex-order: 12;\n      order: 12;\n    "
+  order: function order(_order) {
+    switch (_order) {
+      case 'first':
+        return "\n          -ms-flex-order: -1;\n          order: -1;\n        ";
+
+      case 'last':
+        return "\n           -ms-flex-order: 13;\n           order: 13;\n        ";
+
+      default:
+        return "\n            -ms-flex-order: ".concat(_order, ";\n            order: ").concat(_order, ";\n        ");
+    }
   },
   alignSelf: {
-    auto: "\n      -ms-flex-item-align: auto !important;\n      align-self: auto !important;\n    ",
-    start: "\n      -ms-flex-item-align: start !important;\n      align-self: flex-start !important;\n    ",
-    end: "\n      -ms-flex-item-align: end !important;\n      align-self: flex-end !important;\n    ",
-    center: "\n      -ms-flex-item-align: center !important;\n      align-self: center !important;\n    ",
-    baseline: "\n      -ms-flex-item-align: baseline !important;\n      align-self: baseline !important;\n    ",
-    stretch: "\n      -ms-flex-item-align: stretch !important;\n      align-self: stretch !important;\n    "
+    auto: "\n      -ms-flex-item-align: auto;\n      align-self: auto;\n    ",
+    start: "\n      -ms-flex-item-align: start;\n      align-self: flex-start;\n    ",
+    end: "\n      -ms-flex-item-align: end;\n      align-self: flex-end;\n    ",
+    center: "\n      -ms-flex-item-align: center;\n      align-self: center;\n    ",
+    baseline: "\n      -ms-flex-item-align: baseline;\n      align-self: baseline;\n    ",
+    stretch: "\n      -ms-flex-item-align: stretch;\n      align-self: stretch;\n    "
   },
@@ -64,0 +49,0 @@ display: {

dist/components/Col/types.d.ts

@@ -1,8 +0,5 @@
-declare type oneToTwelve = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-declare type zeroToTwelve = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-declare type zeroToEleven = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
 export declare type End = 'first' | 'last';
-export declare type Column = oneToTwelve | true | 'auto';
-export declare type Order = zeroToTwelve | End;
-export declare type Offset = zeroToEleven;
+export declare type Column = number | true | 'auto';
+export declare type Order = number | End;
+export declare type Offset = number;
 export declare type Align = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
@@ -50,2 +47,7 @@ export declare type AlignSelf = Align | 'auto';
     xlOrder?: Order;
+    xxl?: Column;
+    xxlOffset?: Offset;
+    xxlAuto?: boolean;
+    xxlAlignSelf?: AlignSelf;
+    xxlOrder?: Order;
     hiddenXlUp?: boolean;
@@ -55,11 +57,5 @@ hiddenXlDown?: boolean;
 export declare type ColCss = {
-    col: {
-        [K in oneToTwelve | 'true' | 'auto']: string;
-    };
-    offset: {
-        [K in Offset]: string;
-    };
-    order: {
-        [K in Order]: string;
-    };
+    col: any;
+    offset: any;
+    order: any;
     alignSelf: {
@@ -73,2 +69,1 @@ [K in AlignSelf]: string;
 };
-export {};

dist/components/ThemeProvider/ThemeProvider.js

@@ -25,2 +25,3 @@ "use strict";
 var defaultContainerMaxWidth = {
+  xxl: 1141,
   xl: 1140,
@@ -70,3 +71,12 @@ lg: 960,
 
+  var getGridColumns = function getGridColumns() {
+    if (styledBootstrapGridTheme && (0, _utils.isNumber)(styledBootstrapGridTheme.gridColumns)) {
+      return styledBootstrapGridTheme.gridColumns;
+    }
+
+    return 12;
+  };
+
   var styledBootstrapGridTheme = {
+    gridColumns: theme.gridColumns,
     breakpoints: (0, _aliases.default)(theme.breakpoints),
@@ -81,3 +91,4 @@ col: theme.col,
     getRowPadding: getRowPadding,
-    getColPadding: getColPadding
+    getColPadding: getColPadding,
+    getGridColumns: getGridColumns
   };
@@ -84,0 +95,0 @@ return _react.default.createElement(_styledComponents.ThemeProvider, _extends({

dist/components/ThemeProvider/types.d.ts

@@ -19,2 +19,3 @@ /// <reference types="react" />
     };
+    gridColumns?: number;
 }
@@ -37,2 +38,3 @@ export interface ThemeProps {
     getColPadding: any;
+    getGridColumns: any;
 }
@@ -39,0 +41,0 @@ export interface Theme {

dist/media/media.js

@@ -41,2 +41,3 @@ "use strict";
 var defaultBreakpoints = (0, _aliases.default)({
+  xxl: 1540,
   xl: 1200,
@@ -43,0 +44,0 @@ lg: 992,

dist/media/types.d.ts

@@ -8,3 +8,4 @@ import { FlattenInterpolation, Interpolation, SimpleInterpolation, ThemedStyledProps } from 'styled-components';
     lg = "desktop",
-    xl = "giant"
+    xl = "giant",
+    xxl = "veryGiant"
 }
@@ -16,3 +17,4 @@ export declare enum MediaAliases {
     desktop = "lg",
-    giant = "xl"
+    giant = "xl",
+    veryGiant = "xxl"
 }
@@ -19,0 +21,0 @@ export declare type Media = MediaLabels | MediaAliases;

dist/media/types.js

@@ -16,2 +16,3 @@ "use strict";
   MediaLabels["xl"] = "giant";
+  MediaLabels["xxl"] = "veryGiant";
 })(MediaLabels || (exports.MediaLabels = MediaLabels = {}));
@@ -28,2 +29,3 @@
   MediaAliases["giant"] = "xl";
+  MediaAliases["veryGiant"] = "xxl";
 })(MediaAliases || (exports.MediaAliases = MediaAliases = {}));

package.json

 {
   "name": "styled-bootstrap-grid",
-  "version": "3.0.5",
+  "version": "3.1.0",
   "description": "bootstrap grid system using styled components",
@@ -60,5 +60,6 @@ "main": "./dist/index.js",
     "eslint-plugin-react": "^7.11.1",
-    "typescript": "^3.2.1",
-    "prettier": "^1.15.3"
-  }
+    "prettier": "^1.15.3",
+    "typescript": "^3.2.1"
+  },
+  "dependencies": {}
 }

README.md

@@ -5,7 +5,2 @@ # styled-bootstrap-grid
 
-#### Warning
-
-[styled-components](https://www.npmjs.com/package/styled-components) has launched their v4 module, which has some major changes.
-For a v3.x compatibility check the version **1.0.5** on [npm](https://www.npmjs.com/package/styled-bootstrap-grid/v/1.0.5) or [github](https://github.com/dragma/styled-bootstrap-grid/tree/v1.0.5).
-
 #### Credits
@@ -137,3 +132,5 @@
 const gridTheme = {
+  gridColumns: 24, // default 12
   breakpoints: { // defaults below
+    xxl: 1440,
     xl: 1200,
@@ -145,2 +142,3 @@ lg: 992,
     // or you can use aliases
+    // veryGiant: 1440,
     // giant: 1200,
@@ -161,2 +159,3 @@ // desktop: 992,
     maxWidth: { // defaults below
+      xxl: 1141,
       xl: 1140,
@@ -168,2 +167,3 @@ lg: 960,
       // or you can use aliases
+      // veryGiant: 1141,
       // giant: 1140,
@@ -236,2 +236,8 @@ // desktop: 960,
   `}
+  ${media.veryGiant`
+    color: orange;
+  `}
+  ${media.xxl`
+    color: orange;
+  `}
 `;
@@ -251,2 +257,3 @@
 | xl | giant | `@media (min-width: 1200px) { /* */ }` |
+| xxl | veryGiant | `@media (min-width: 1440px) { /* */ }` |
 
@@ -266,4 +273,5 @@ ## Props definition
 const gridTheme = {
+  gridColumns: 12, // default 12
   breakpoints: { // defaults below
-    giant: 1200,
+    xxl: 1440,
     xl: 1200,
@@ -275,2 +283,3 @@ lg: 992,
     // or you can use aliases
+    // veryGiant: 1440,
     // giant: 1200,
@@ -291,2 +300,3 @@ // desktop: 992,
     maxWidth: { // defaults below
+      xxl: 1141,
       xl: 1140,
@@ -298,2 +308,3 @@ lg: 960,
       // or you can use aliases
+      // veryGiant: 1141,
       // giant: 1140,
@@ -300,0 +311,0 @@ // desktop: 960,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72098

increased by1.67%

Lines of code

1436

increased by4.44%

Number of lines in readme file

397

increased by2.85%

No dependency changes