issue/3177 column structure

example.json

@@ -178,6 +178,24 @@ Block classes
 Component classes
 --------------------------------------------------
 
+Columns
+Breakpoints are assigned from the smallest screen resolution to the widest until they reach the max width value. Multiple column classes can be defined on a singular component to change the layout responsively. The column number assigned to a component is configurable and can be any number between 1 and 12. It is advisable to not exceed a combined total of 12 columns for all components within a block for each breakpoint.
+
+"_classes": "col-xs-8",
+"_comment": "On screens ranging from 0px to 520px the component fills 8 out of the 12 columns available.",
+
+"_classes": "col-sm-8",
+"_comment": "On screens ranging from 520px to 760px the component fills 8 out of the 12 columns available.",
+
+"_classes": "col-md-8",
+"_comment": "On screens ranging from 760px to 900px the component fills 8 out of the 12 columns available.",
+
+"_classes": "col-lg-8",
+"_comment": "On screens ranging from 900px to 1440px the component fills 8 out of the 12 columns available.",
+
+"_classes": "col-xl-8",
+"_comment": "On screens above 1440px the component fills 8 out of the 12 columns available.",
+
 Accordion item
 "_classes": "align-image-left",
 "_comment": "Aligns the image to the left of the body text on desktop, defaults to underneath on smaller screens.",
@@ -205,3 +223,5 @@ Media
 Narrative
 "_classes": "items-are-full-width",
 "_comment": "Increases the width of the narrative elements to 100% in desktop view.",
+
+

less/project/columns.less

@@ -0,0 +1,26 @@
+.make-columns(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) {
+  @media (min-width: @media-query) {
+    .component.col-@{size}-@{iteration} {
+      width: (@iteration * 100% / @count);
+    }
+  }
+
+  .make-columns(@size, @media-query, @count, (@iteration + 1));
+}
+
+// Custom classes
+// e.g. 'col-sm-8 col-md-10'
+// min small viewport takes up 8 out of 12 columns
+// min medium viewport takes up 10 columns
+// if undefined element defaults to 100% width
+.make-columns(xs, 0, 12);
+.make-columns(sm, @device-width-small, 12);
+.make-columns(md, @device-width-medium, 12);
+.make-columns(lg, @device-width-large, 12);
+.make-columns(xl, @max-width, 12);
+
+.component {
+  &__container {
+    flex-direction: unset;
+  }
+}

less/project/theme-extras.less

@@ -34,6 +34,7 @@
       background-color: @@color;
     }
   }
+
   .menu,
   .page {
     &__title,
@@ -42,7 +43,7 @@
     &__body a,
     &__instruction,
     &__instruction a {
-     color: @@color-inverted;
+      color: @@color-inverted;
     }
   }
 }