The .container class can be used in any context, but mostly as a direct child of either:
-
-
.nav
+ .navbar.hero.section.footer
+ The container breakpoints have an offset defined by the $container-offset variable. It has a default value of 60px.
+
This is how the container will behave:
-
-
- on mobile and tablet {% include bp/touch.html %}, it will have a margin of 24px on each side. -
- on desktop {% include bp/desktop.html %}, it will have a maximum width of 960px and will be horizontally centered. -
- on widescreen {% include bp/widescreen.html %}, it will have a maximum width of 1152px. -
- on fullhd {% include bp/fullhd.html %}, it will have a maximum width of 1344px. +
- on
$desktop+$container-offset=>= 1068pxit will have a maximum width of 960px and will be horizontally centered.
+ - on
$widescreen+$container-offset=>= 1260pxit will have a maximum width of 1152px.
+ - on
$fullhd+$container-offset=>= 1452pxit will have a maximum width of 1344px.
The $gap variable has a default value of 24px but can be modified.
diff --git a/sass/elements/_all.sass b/sass/elements/_all.sass
index 54f5b2fc..2234322a 100755
--- a/sass/elements/_all.sass
+++ b/sass/elements/_all.sass
@@ -2,6 +2,7 @@
@import "box.sass"
@import "button.sass"
+@import "container.sass"
@import "content.sass"
@import "form.sass"
@import "icon.sass"
diff --git a/sass/elements/container.sass b/sass/elements/container.sass
new file mode 100644
index 00000000..54f73ada
--- /dev/null
+++ b/sass/elements/container.sass
@@ -0,0 +1,27 @@
+$container-offset: 60px !default
+
+.container
+ margin: 0 auto
+ position: relative
+ +from($desktop + $container-offset)
+ max-width: $desktop - (2 * $gap)
+ width: $desktop - (2 * $gap)
+ &.is-fluid
+ margin-left: $gap
+ margin-right: $gap
+ max-width: none
+ width: auto
+ +until($widescreen + $container-offset)
+ &.is-widescreen
+ max-width: $widescreen - (2 * $gap)
+ width: auto
+ +until($fullhd + $container-offset)
+ &.is-fullhd
+ max-width: $fullhd - (2 * $gap)
+ width: auto
+ +from($widescreen + $container-offset)
+ max-width: $widescreen - (2 * $gap)
+ width: $widescreen - (2 * $gap)
+ +from($fullhd + $container-offset)
+ max-width: $fullhd - (2 * $gap)
+ width: $fullhd - (2 * $gap)
\ No newline at end of file
diff --git a/sass/elements/other.sass b/sass/elements/other.sass
index d955427c..8a6b39cb 100755
--- a/sass/elements/other.sass
+++ b/sass/elements/other.sass
@@ -1,34 +1,6 @@
.block
+block
-$container-offset: 60px !default
-
-.container
- margin: 0 auto
- position: relative
- +from($desktop + $container-offset)
- max-width: $desktop - (2 * $gap)
- width: $desktop - (2 * $gap)
- &.is-fluid
- margin-left: $gap
- margin-right: $gap
- max-width: none
- width: auto
- +until($widescreen + $container-offset)
- &.is-widescreen
- max-width: $widescreen - (2 * $gap)
- width: auto
- +until($fullhd + $container-offset)
- &.is-fullhd
- max-width: $fullhd - (2 * $gap)
- width: auto
- +from($widescreen + $container-offset)
- max-width: $widescreen - (2 * $gap)
- width: $widescreen - (2 * $gap)
- +from($fullhd + $container-offset)
- max-width: $fullhd - (2 * $gap)
- width: $fullhd - (2 * $gap)
-
.delete
+delete