Retina 15"
@@ -491,17 +491,17 @@
Hidden on...
- UHD
- ✔ Visible on UHD
+ UHD 4K
+ ✔ Visible on UHD 4K
- 4k
- ✔ Visible on 4k
+ 5K
+ ✔ Visible on 5K
- 8k
- ✔ Visible on 8k
+ 8K
+ ✔ Visible on 8K
diff --git a/less/big-grid.less b/less/big-grid.less
deleted file mode 100644
index 7a049b4..0000000
--- a/less/big-grid.less
+++ /dev/null
@@ -1,13 +0,0 @@
-/*!
- * Bootstrap Big Grid v0.2.0
- * Copyright 2013 BenWhitehead
- * Licensed under http://www.apache.org/licenses/LICENSE-2.0
- */
-
-@import "../bower_components/bootstrap/less/mixins";
-@import "../bower_components/bootstrap/less/variables";
-@import "variables";
-
-@import "grid";
-
-@import "responsive-utilities";
diff --git a/less/grid.less b/less/grid.less
deleted file mode 100644
index 8811e8e..0000000
--- a/less/grid.less
+++ /dev/null
@@ -1,27 +0,0 @@
-@media (min-width: @screen-xlg-min) {
- .make-grid(xlg);
-}
-
-@media (min-width: @screen-fhd-min) {
- .make-grid(fhd);
-}
-
-@media (min-width: @screen-rt-min) {
- .make-grid(rt);
-}
-
-@media (min-width: @screen-rt15-min) {
- .make-grid(rt15);
-}
-
-@media (min-width: @screen-uhd-min) {
- .make-grid(uhd);
-}
-
-@media (min-width: @screen-4k-min) {
- .make-grid(4k);
-}
-
-@media (min-width: @screen-8k-min) {
- .make-grid(8k);
-}
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
deleted file mode 100644
index 887893b..0000000
--- a/less/responsive-utilities.less
+++ /dev/null
@@ -1,1248 +0,0 @@
-@import "variables";
-
-// Visibility utilities
-
-.visible-xs {
- .responsive-invisibility();
- @media (max-width: @screen-xs-max) {
- .responsive-visibility();
- }
- &.visible-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-visibility();
- }
- }
- &.visible-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-visibility();
- }
- }
- &.visible-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-visibility();
- }
- }
- &.visible-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-visibility();
- }
- }
- &.visible-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-visibility();
- }
- }
- &.visible-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-visibility();
- }
- }
- &.visible-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-visibility();
- }
- }
-}
-
-.visible-sm {
- .responsive-invisibility();
- &.visible-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-visibility();
- }
- }
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-visibility();
- }
- &.visible-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-visibility();
- }
- }
- &.visible-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-visibility();
- }
- }
- &.visible-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-visibility();
- }
- }
- &.visible-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-visibility();
- }
- }
- &.visible-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-visibility();
- }
- }
- &.visible-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-visibility();
- }
- }
-}
-
-.visible-md {
- .responsive-invisibility();
- &.visible-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-visibility();
- }
- }
- &.visible-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-visibility();
- }
- }
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-visibility();
- }
- &.visible-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-visibility();
- }
- }
- &.visible-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-visibility();
- }
- }
- &.visible-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-visibility();
- }
- }
- &.visible-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-visibility();
- }
- }
- &.visible-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-visibility();
- }
- }
-}
-
-.visible-lg {
- .responsive-invisibility();
- &.visible-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-visibility();
- }
- }
- &.visible-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-visibility();
- }
- }
- &.visible-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-visibility();
- }
- }
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-visibility();
- }
- &.visible-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-visibility();
- }
- }
- &.visible-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-visibility();
- }
- }
- &.visible-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-visibility();
- }
- }
- &.visible-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-visibility();
- }
- }
-}
-
-.visible-xlg {
- .responsive-invisibility();
- &.visible-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-visibility();
- }
- }
- &.visible-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-visibility();
- }
- }
- &.visible-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-visibility();
- }
- }
- &.visible-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-visibility();
- }
- }
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-visibility();
- }
- &.visible-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-visibility();
- }
- }
- &.visible-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-visibility();
- }
- }
- &.visible-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-visibility();
- }
- }
-}
-
-.visible-fhd {
- .responsive-invisibility();
- &.visible-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-visibility();
- }
- }
- &.visible-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-visibility();
- }
- }
- &.visible-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-visibility();
- }
- }
- &.visible-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-visibility();
- }
- }
- &.visible-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-visibility();
- }
- }
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-visibility();
- }
- &.visible-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-visibility();
- }
- }
- &.visible-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-visibility();
- }
- }
- &.visible-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-visibility();
- }
- }
-}
-
-.visible-rt {
- .responsive-invisibility();
- &.visible-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-visibility();
- }
- }
- &.visible-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-visibility();
- }
- }
- &.visible-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-visibility();
- }
- }
- &.visible-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-visibility();
- }
- }
- &.visible-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-visibility();
- }
- }
- &.visible-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-visibility();
- }
- }
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-visibility();
- }
- &.visible-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-visibility();
- }
- }
- &.visible-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-visibility();
- }
- }
- &.visible-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-visibility();
- }
- }
-}
-
-.visible-rt15 {
- .responsive-invisibility();
- &.visible-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-visibility();
- }
- }
- &.visible-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-visibility();
- }
- }
- &.visible-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-visibility();
- }
- }
- &.visible-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-visibility();
- }
- }
- &.visible-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-visibility();
- }
- }
- &.visible-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-visibility();
- }
- }
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-visibility();
- }
- &.visible-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-visibility();
- }
- }
- &.visible-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-visibility();
- }
- }
-}
-
-.visible-uhd {
- .responsive-invisibility();
- &.visible-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-visibility();
- }
- }
- &.visible-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-visibility();
- }
- }
- &.visible-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-visibility();
- }
- }
- &.visible-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-visibility();
- }
- }
- &.visible-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-visibility();
- }
- }
- &.visible-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-visibility();
- }
- }
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-visibility();
- }
- &.visible-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-visibility();
- }
- }
- &.visible-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-visibility();
- }
- }
-}
-
-.visible-4k {
- .responsive-invisibility();
- &.visible-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-visibility();
- }
- }
- &.visible-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-visibility();
- }
- }
- &.visible-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-visibility();
- }
- }
- &.visible-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-visibility();
- }
- }
- &.visible-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-visibility();
- }
- }
- &.visible-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-visibility();
- }
- }
- &.visible-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-visibility();
- }
- }
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-visibility();
- }
- &.visible-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-visibility();
- }
- }
-}
-
-.visible-8k {
- .responsive-invisibility();
- &.visible-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-visibility();
- }
- }
- &.visible-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-visibility();
- }
- }
- &.visible-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-visibility();
- }
- }
- &.visible-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-visibility();
- }
- }
- &.visible-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-visibility();
- }
- }
- &.visible-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-visibility();
- }
- }
- &.visible-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-visibility();
- }
- }
- &.visible-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-visibility();
- }
- }
- &.visible-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-visibility();
- }
- }
- @media (min-width: @screen-8k-min) {
- .responsive-visibility();
- }
-}
-
-// Hidden Utilities
-.hidden-xs {
- .responsive-visibility();
- @media (max-width: @screen-xs-max) {
- .responsive-invisibility();
- }
- &.hidden-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-invisibility();
- }
- }
-}
-.hidden-sm {
- .responsive-visibility();
- &.hidden-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-invisibility();
- }
- }
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-invisibility();
- }
- &.hidden-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-invisibility();
- }
- }
-}
-.hidden-md {
- .responsive-visibility();
- &.hidden-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-invisibility();
- }
- }
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-invisibility();
- }
- &.hidden-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-invisibility();
- }
- }
-}
-.hidden-lg {
- .responsive-visibility();
- &.hidden-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-invisibility();
- }
- }
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-invisibility();
- }
- &.hidden-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-invisibility();
- }
- }
-}
-.hidden-xlg {
- .responsive-visibility();
- &.hidden-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-invisibility();
- }
- }
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-invisibility();
- }
- &.hidden-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-invisibility();
- }
- }
-}
-.hidden-fhd {
- .responsive-visibility();
- &.hidden-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-invisibility();
- }
- }
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-invisibility();
- }
- &.hidden-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-invisibility();
- }
- }
-}
-.hidden-rt {
- .responsive-visibility();
- &.hidden-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-invisibility();
- }
- }
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-invisibility();
- }
- &.hidden-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-invisibility();
- }
- }
-}
-.hidden-rt15 {
- .responsive-visibility();
- &.hidden-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-invisibility();
- }
- }
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-invisibility();
- }
- &.hidden-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-invisibility();
- }
- }
-}
-.hidden-uhd {
- .responsive-visibility();
- &.hidden-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-invisibility();
- }
- }
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-invisibility();
- }
- &.hidden-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-invisibility();
- }
- }
-}
-.hidden-4k {
- .responsive-visibility();
- &.hidden-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-invisibility();
- }
- }
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-invisibility();
- }
- &.hidden-8k {
- @media (min-width: @screen-8k-min) {
- .responsive-invisibility();
- }
- }
-}
-.hidden-8k {
- .responsive-visibility();
- &.hidden-xs {
- @media (max-width: @screen-xs-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-sm {
- @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-md {
- @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-lg {
- @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-xlg {
- @media (min-width: @screen-xlg-min) and (max-width: @screen-xlg-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-fhd {
- @media (min-width: @screen-fhd-min) and (max-width: @screen-fhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt {
- @media (min-width: @screen-rt-min) and (max-width: @screen-rt-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-rt15 {
- @media (min-width: @screen-rt15-min) and (max-width: @screen-rt15-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-uhd {
- @media (min-width: @screen-uhd-min) and (max-width: @screen-uhd-max) {
- .responsive-invisibility();
- }
- }
- &.hidden-4k {
- @media (min-width: @screen-4k-min) and (max-width: @screen-4k-max) {
- .responsive-invisibility();
- }
- }
- @media (min-width: @screen-8k-min) {
- .responsive-invisibility();
- }
-}
diff --git a/less/variables.less b/less/variables.less
deleted file mode 100644
index c635e24..0000000
--- a/less/variables.less
+++ /dev/null
@@ -1,36 +0,0 @@
-@screen-xlg-min: 1366px;
-
-@screen-fhd-min: 1920px;
-
-@screen-rt-min: 2560px;
-
-@screen-rt15-min: 2880px;
-
-@screen-uhd-min: 3840px;
-
-@screen-4k-min: 4096px;
-
-@screen-8k-min: 8192px;
-
-@screen-lg-max: (@screen-xlg-min - 1);
-@screen-xlg-max: (@screen-fhd-min - 1);
-@screen-fhd-max: (@screen-rt-min - 1);
-@screen-rt-max: (@screen-rt15-min - 1);
-@screen-rt15-max: (@screen-uhd-min - 1);
-@screen-uhd-max: (@screen-4k-min - 1);
-@screen-4k-max: (@screen-8k-min - 1);
-
-@container-xlg-desktop: ((1306px + @grid-gutter-width));
-@container-xlg: @container-xlg-desktop;
-@container-fhd-desktop: ((1860px + @grid-gutter-width));
-@container-fhd: @container-fhd-desktop;
-@container-rt-desktop: ((2500px + @grid-gutter-width));
-@container-rt: @container-rt-desktop;
-@container-rt15-desktop: ((2820px + @grid-gutter-width));
-@container-rt15: @container-rt15-desktop;
-@container-uhd-desktop: ((3840px + @grid-gutter-width));
-@container-uhd: @container-uhd-desktop;
-@container-4k-desktop: ((4036px + @grid-gutter-width));
-@container-4k: @container-4k-desktop;
-@container-8k-desktop: ((8132px + @grid-gutter-width));
-@container-8k: @container-8k-desktop;
diff --git a/package.json b/package.json
index 36de0d9..b7a6f09 100644
--- a/package.json
+++ b/package.json
@@ -1,15 +1,16 @@
{
"name": "bootstrap-big-grid",
"description": "A set of larger grid options for Bootstrap.",
- "version": "0.2.0",
- "keywords": ["bootstrap", "css", "grid"],
+ "version": "0.3.0",
+ "keywords": [
+ "bootstrap",
+ "css",
+ "grid"
+ ],
"main": "Gruntfile.js",
"author": "BenWhitehead",
"homepage": "https://github.com/BenWhitehead/bootstrap-big-grid",
- "repository": {
- "type": "git",
- "url": "https://github.com/BenWhitehead/bootstrap-big-grid.git"
- },
+ "repository": "https://github.com/BenWhitehead/bootstrap-big-grid.git",
"bugs": {
"url": "https://github.com/BenWhitehead/bootstrap-big-grid/issues"
},
@@ -20,11 +21,15 @@
}
],
"devDependencies": {
- "bower": "~1.2.7",
- "grunt": "~0.4.2",
- "grunt-cli": "~0.1.11",
- "grunt-contrib-watch": "~0.5.3",
- "grunt-contrib-connect": "~0.5.0",
- "grunt-contrib-less": "~0.8.2"
- }
+ "bootstrap": "^4.4.1",
+ "grunt": "~1.0.4",
+ "grunt-cli": "~1.3.2",
+ "grunt-contrib-connect": "~2.1.0",
+ "grunt-contrib-less": "~2.0.0",
+ "grunt-contrib-watch": "~1.1.0",
+ "jquery": "^3.4.1",
+ "popper.js": "^1.16.0"
+ },
+ "dependencies": {},
+ "license": "Apache-2.0"
}
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
new file mode 100644
index 0000000..6661b75
--- /dev/null
+++ b/scss/_dropdown.scss
@@ -0,0 +1,15 @@
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .dropdown-menu#{$infix}-left {
+ right: auto;
+ left: 0;
+ }
+
+ .dropdown-menu#{$infix}-right {
+ right: 0;
+ left: auto;
+ }
+ }
+}
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
new file mode 100644
index 0000000..528b472
--- /dev/null
+++ b/scss/_list-group.scss
@@ -0,0 +1,39 @@
+// Horizontal
+//
+// Change the layout of list group items from vertical (default) to horizontal.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .list-group-horizontal#{$infix} {
+ flex-direction: row;
+
+ .list-group-item {
+ &:first-child {
+ @include border-bottom-left-radius($list-group-border-radius);
+ @include border-top-right-radius(0);
+ }
+
+ &:last-child {
+ @include border-top-right-radius($list-group-border-radius);
+ @include border-bottom-left-radius(0);
+ }
+
+ &.active {
+ margin-top: 0;
+ }
+
+ & + .list-group-item {
+ border-top-width: $list-group-border-width;
+ border-left-width: 0;
+
+ &.active {
+ margin-left: -$list-group-border-width;
+ border-left-width: $list-group-border-width;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
new file mode 100644
index 0000000..aa3ea8b
--- /dev/null
+++ b/scss/_navbar.scss
@@ -0,0 +1,108 @@
+// Navbar
+//
+// Provide a static navbar from which we expand to create full-width, fixed, and
+// other navbar variations.
+
+.navbar {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap; // allow us to do the line break for collapsing content
+ align-items: center;
+ justify-content: space-between; // space out brand from logo
+ padding: $navbar-padding-y $navbar-padding-x;
+
+ // Because flex properties aren't inherited, we need to redeclare these first
+ // few properties so that content nested within behave properly.
+ %container-flex-properties {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .container,
+ .container-fluid {
+ @extend %container-flex-properties;
+ }
+
+ @each $breakpoint, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+ @extend %container-flex-properties;
+ }
+ }
+}
+
+
+// Generate series of `.navbar-expand-*` responsive classes for configuring
+// where your navbar collapses.
+.navbar-expand {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ {$infix} {
+ @include media-breakpoint-down($breakpoint) {
+ %container-navbar-expand-#{$breakpoint} {
+ padding-right: 0;
+ padding-left: 0;
+ }
+
+ > .container,
+ > .container-fluid {
+ @extend %container-navbar-expand-#{$breakpoint};
+ }
+
+ @each $size, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($size, $container-max-widths)} {
+ @extend %container-navbar-expand-#{$breakpoint};
+ }
+ }
+ }
+
+ @include media-breakpoint-up($next) {
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+
+ .navbar-nav {
+ flex-direction: row;
+
+ .dropdown-menu {
+ position: absolute;
+ }
+
+ .nav-link {
+ padding-right: $navbar-nav-link-padding-x;
+ padding-left: $navbar-nav-link-padding-x;
+ }
+ }
+
+ // For nesting containers, have to redeclare for alignment purposes
+ %container-nesting-#{$breakpoint} {
+ flex-wrap: nowrap;
+ }
+
+ > .container,
+ > .container-fluid {
+ @extend %container-nesting-#{$breakpoint};
+ }
+
+ @each $size, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($size, $container-max-widths)} {
+ @extend %container-nesting-#{$breakpoint};
+ }
+ }
+
+ .navbar-collapse {
+ display: flex !important; // stylelint-disable-line declaration-no-important
+
+ // Changes flex-bases to auto because of an IE10 bug
+ flex-basis: auto;
+ }
+
+ .navbar-toggler {
+ display: none;
+ }
+ }
+ }
+ }
+}
diff --git a/scss/_root.scss b/scss/_root.scss
new file mode 100644
index 0000000..6289738
--- /dev/null
+++ b/scss/_root.scss
@@ -0,0 +1,7 @@
+// Do not forget to update getting-started/theming.md!
+:root {
+ // Custom variable values only support SassScript inside `#{}`.
+ @each $bp, $value in $grid-breakpoints {
+ --breakpoint-#{$bp}: #{$value};
+ }
+}
diff --git a/scss/_tables.scss b/scss/_tables.scss
new file mode 100644
index 0000000..9e125b7
--- /dev/null
+++ b/scss/_tables.scss
@@ -0,0 +1,25 @@
+// Responsive tables
+//
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
+
+.table-responsive {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ {$infix} {
+ @include media-breakpoint-down($breakpoint) {
+ display: block;
+ width: 100%;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+
+ // Prevent double border on horizontal scroll due to use of `display: block;`
+ > .table-bordered {
+ border: 0;
+ }
+ }
+ }
+ }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
new file mode 100644
index 0000000..e61345c
--- /dev/null
+++ b/scss/_variables.scss
@@ -0,0 +1,72 @@
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-grid-classes: true !default;
+
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default;
+$spacers: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$spacers: map-merge(
+ (
+ 0: 0,
+ 1: ($spacer * .25),
+ 2: ($spacer * .5),
+ 3: $spacer,
+ 4: ($spacer * 1.5),
+ 5: ($spacer * 3)
+ ),
+ $spacers
+);
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ hd: 1366px,
+ fhd: 1920px,
+ rt: 2560px,
+ rt15: 2880px,
+ 4k: 3840px,
+ 5k: 5120px,
+ 8k: 7680px
+) !default;
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ hd: 1306px,
+ fhd: 1860px,
+ rt: 2500px,
+ rt15: 2820px,
+ 4k: 3780px,
+ 5k: 5060px,
+ 8k: 7620px
+) !default;
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
diff --git a/scss/big_grid.scss b/scss/big_grid.scss
new file mode 100644
index 0000000..aa2712e
--- /dev/null
+++ b/scss/big_grid.scss
@@ -0,0 +1,28 @@
+/*!
+ * Bootstrap Big Grid v0.3.0
+ * Copyright 2013 BenWhitehead
+ * Licensed under http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+@import "../node_modules/bootstrap/scss/functions";
+@import "variables";
+@import "../node_modules/bootstrap/scss/variables";
+@import "root";
+
+@import "../node_modules/bootstrap/scss/mixins/breakpoints";
+@import "../node_modules/bootstrap/scss/mixins/grid-framework";
+@import "../node_modules/bootstrap/scss/mixins/grid";
+@import "../node_modules/bootstrap/scss/mixins/border-radius";
+
+@import "../node_modules/bootstrap/scss/grid";
+
+@import "tables";
+@import "dropdown";
+@import "navbar";
+@import "list-group";
+
+@import "../node_modules/bootstrap/scss/utilities/display";
+@import "../node_modules/bootstrap/scss/utilities/flex";
+@import "../node_modules/bootstrap/scss/utilities/float";
+@import "../node_modules/bootstrap/scss/utilities/spacing";
+@import "utilities/text";
\ No newline at end of file
diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
new file mode 100644
index 0000000..22868d5
--- /dev/null
+++ b/scss/utilities/_text.scss
@@ -0,0 +1,11 @@
+// Responsive alignment
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .text#{$infix}-left { text-align: left !important; }
+ .text#{$infix}-right { text-align: right !important; }
+ .text#{$infix}-center { text-align: center !important; }
+ }
+}