Merge pull request #765 from tedk13/tk-717

max-container wrapper

Author: mrtrimble

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ritterim/platform-ui",
-  "version": "1.4.10",
+  "version": "1.4.11",
   "description": "A CSS framework used by Ritter Insurance Marketing (RIM) for our platform of agent tools.",
   "homepage": "https://style.rimdev.io",
   "main": "gulpfile.js",

package.json

@@ -664,6 +664,79 @@
 // Styleguide Layout.Blocks.Utilities
 
 
+// Blocks - Max Width Container
+// 
+// The `max-container` adds a max-width to your content. The size is set to `1440px` and is added to the `:root` with the `--max-container` custom property.
+// you can change this size in your project by setting `--max-container` to a different value.
+// 
+// <div class="max-container">
+//   <div class="block-container blocks p-2 tablet-up-2 laptop-up-3 desktop-up-4">
+//     <div class="block">
+//       <div class="card">
+//         <strong class="text--navy">block</strong>
+//       </div>
+//     </div>
+//     <div class="block">
+//       <div class="card">
+//         <strong class="text--navy">block</strong>
+//       </div>
+//     </div>
+//     <div class="block">
+//       <div class="card">
+//         <strong class="text--navy">block</strong>
+//       </div>
+//     </div>
+//     <div class="block">
+//       <div class="card">
+//         <strong class="text--navy">block</strong>
+//       </div>
+//     </div>
+//     <div class="block block--fill">
+//       <div class="card">
+//         <strong class="text--navy">block block--fill</strong>
+//       </div>
+//     </div>
+//   </div>
+// </div>
+// <div class="my-3"></div>
+// 
+// ```html
+// <div class="max-container">
+//   <div class="block-container blocks p-2 tablet-up-2 laptop-up-3 desktop-up-4">
+//     <div class="block">
+//       <div class="card">
+//         <strong class="text--navy">block</strong>
+//       </div>
+//     </div>
+//     <div class="block">
+//       <div class="card">
+//         <strong class="text--navy">block</strong>
+//       </div>
+//     </div>
+//     <div class="block">
+//       <div class="card">
+//         <strong class="text--navy">block</strong>
+//       </div>
+//     </div>
+//     <div class="block">
+//       <div class="card">
+//         <strong class="text--navy">block</strong>
+//       </div>
+//     </div>
+//     <div class="block block--fill">
+//       <div class="card">
+//         <strong class="text--navy">block block--fill</strong>
+//       </div>
+//     </div>
+//   </div>
+// </div>
+// ```
+// 
+// Weight: 7
+// 
+// Styleguide Layout.Blocks.Max
+
+
 
 // Block layout
 .block-container {
@@ -861,3 +934,12 @@
     }
   }
 }
+
+
+// max-width on a block-container
+.max-container {  
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--max-container);
+  width: 100%;
+}

src/assets/stylesheets/sass/_blocks.scss

@@ -51,4 +51,5 @@ $site-colors: () !default;
     --duration: #{config.$duration};
     --transitions: #{config.$transitions};
     --opacity: #{config.$opacity};
+    --max-container: 1440px;
 }