Removed container xs and added container doc page

amir2mi · Jan 14, 2022 · f8ef068 · f8ef068
1 parent 66400fe
commit f8ef068
Show file tree

Hide file tree

Showing 6 changed files with 225 additions and 1,433 deletions.
diff --git a/dist/css/flatify-noprefix.css b/dist/css/flatify-noprefix.css
diff --git a/dist/js/flatify.js b/dist/js/flatify.js
diff --git a/dist/maps/flatify-noprefix.css.map b/dist/maps/flatify-noprefix.css.map
diff --git a/dist/maps/flatify.js.map b/dist/maps/flatify.js.map
diff --git a/scss/helpers/_container.scss b/scss/helpers/_container.scss
@@ -1,8 +1,11 @@
 @use "sass:math";
 
 @each $name, $value in $RESPONSIVE_BREAKPOINTS {
-  .container-#{$name} {
-    max-width: math.floor($value);
+  // xs and sm are the same
+  @if $name != "xs" {
+    .container-#{$name} {
+      max-width: math.floor($value);
+    }
   }
 }
 

diff --git a/website/docs/helpers/containers.mdx b/website/docs/helpers/containers.mdx
@@ -0,0 +1,24 @@
+---
+title: Containers
+---
+
+To have a clean layout using containers to limit the width will be a practical example, there are some predefined container classes that you can use:   
+
+`.container-sm`   
+`.container-md`   
+`.container-lg`   
+`.container-xl`   
+`.container-xxl`   
+
+These classes are generated based on the `$RESPONSIVE_BREAKPOINTS` variable inside the `_config.scss` file:
+
+```scss title="_config.scss"
+$RESPONSIVE_BREAKPOINTS: (
+  xs: 575.98px,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+) !default;
+```