mp-design-system 0.9.6 → 0.9.16

package/src/assets/scss/objects/grid.scss

@@ -22,6 +22,23 @@ $grid-gutter-width: 36;
   @return (($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)) * 1px;
 }
 
+@mixin o-grid($columns) {
+  $width: math.div(100%, $columns);
+  
+  & > * {
+    width: calc(($width - (($columns - 1) * #{space-unit()} / $columns)) - 0.1px);
+    width: calc(($width - (($columns - 1) * var(--gutter) / $columns)) - 0.1px);
+    
+    & + * {
+      @include margin-left("gutter");
+    }
+
+    &:nth-child(#{$columns}n + 1) {
+      margin-left: 0;
+    }
+  }
+}
+
 .o-grid {
   display: flex;
   flex-wrap: wrap;
@@ -51,131 +68,69 @@ $grid-gutter-width: 36;
 
   &--of-two {
     @media (min-width: 40em) {
-      & > * {
-        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);
-        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
-
-        &:nth-child(2n + 1) {
-          margin-left: 0;
-        }
-      }
+      @include o-grid(2)
     }
   }
 
   &--of-two-late {
     @media (min-width: 55em) {
-      & > * {
-        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);
-        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
+      @include o-grid(2)
+    }
+  }
 
-        &:nth-child(2n + 1) {
-          margin-left: 0;
-        }
-      }
+  &--of-two-early {
+    @media (min-width: 22.4em) {
+      @include o-grid(2)
     }
   }
 
   &--of-three {
     @media (min-width: 38em) and (max-width: 54.9375em) { // 608 - 1087
-      & > * {
-        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);
-        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
-
-        &:nth-child(2n + 1) {
-          margin-left: 0;
-        }
-      }
+      @include o-grid(2)
     }
 
     @media (min-width: 55em) {
-      & > * {
-        width: calc((33.333% - (2 * #{space-unit()} / 3)) - 0.1px);
-        width: calc((33.333% - (2 * var(--gutter) / 3)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
-
-        &:nth-child(3n + 1) {
-          margin-left: 0;
-        }
-      }
+      @include o-grid(3)
     }
   }
 
   &--of-three-late {
     @media (min-width: 38em) and (max-width: 67.9375em) {
-      & > * {
-        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);
-        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
-
-        &:nth-child(2n + 1) {
-          margin-left: 0;
-        }
-      }
+      @include o-grid(2)
     }
 
     @media (min-width: 68em) {
-      & > * {
-        width: calc((33.333% - (2 * #{space-unit()} / 3)) - 0.1px);
-        width: calc((33.333% - (2 * var(--gutter) / 3)) - 0.1px);
+      @include o-grid(3)
+    }
+  }
 
-        & + * {
-          @include margin-left("gutter");
-        }
+  &--of-three-early {
+    @media (min-width: 22.4em) and (max-width: 54.9375em) {
+      @include o-grid(2)
+    }
 
-        &:nth-child(3n + 1) {
-          margin-left: 0;
-        }
-      }
+    @media (min-width: 55em) {
+      @include o-grid(3)
     }
   }
 
   &--of-four {
     @media (min-width: 38em) and (max-width: 59.9375em) {
-      & > * {
-        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);
-        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
-
-        &:nth-child(2n + 1) {
-          margin-left: 0;
-        }
-      }
+      @include o-grid(2)
     }
 
     @media (min-width: 60em) {
-      & > * {
-        width: calc((25% - (3 * #{space-unit()} / 4)) - 0.1px);
-        width: calc((25% - (3 * var(--gutter) / 4)) - 0.1px);
+      @include o-grid(4)
+    }
+  }
 
-        & + * {
-          @include margin-left("gutter");
-        }
+  &--of-four-early {
+    @media (min-width: 22.4em) and (max-width: 59.9375em) {
+      @include o-grid(2)
+    }
 
-        &:nth-child(4n + 1) {
-          margin-left: 0;
-        }
-      }
+    @media (min-width: 60em) {
+      @include o-grid(4)
     }
   }
 

package/src/assets/scss/objects/prose.scss

@@ -20,7 +20,8 @@
   }
 
   p a:not(.c-button),
-  li a:not(.c-button) {
+  li a:not(.c-button),
+  td a:not(.c-button) {
     color: color('utility-blue');
     text-decoration: underline;
     text-underline-offset: 3px;

package/src/assets/scss/utilities/hr.scss

@@ -10,6 +10,10 @@
   border-top: 1px solid color('petrol', 'step-2');
 }
 
+.u-border-bottom {
+  border-bottom: 1px solid color('petrol', 'step-2');
+}
+
 .u-border {
   border: 1px solid color('petrol', 'step-2');
 }

package/src/assets/scss/utilities/link.scss

@@ -7,7 +7,19 @@
     text-decoration: underline;
   }
 
+  &--petrol {
+    color: color('petrol');
+  }
+
   &--red {
     color: color('red');
   }
-}
+  
+  &--underline {
+    text-decoration: underline;
+  
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

package/src/assets/scss/utilities/space.scss

@@ -97,6 +97,10 @@
   @include padding('xl');
 }
 
+.u-pad-y-xs {
+  @include padding-top('xs');
+  @include padding-bottom('xs');
+}
 .u-pad-y-s {
   @include padding-top('s');
   @include padding-bottom('s');
@@ -303,6 +307,18 @@
   @include margin-bottom('xl');
 }
 
+.u-margin-x-3xs {
+  @include margin-left('3xs');
+  @include margin-right('3xs');
+}
+.u-margin-x-2xs {
+  @include margin-left('2xs');
+  @include margin-right('2xs');
+}
+.u-margin-x-xs {
+  @include margin-left('xs');
+  @include margin-right('xs');
+}
 .u-margin-x-s {
   @include margin-left('s');
   @include margin-right('s');

package/src/assets/scss/utilities/typography.scss

@@ -29,3 +29,7 @@
 .u-text-center {
   text-align: center;
 }
+
+.u-remove-bullets {
+  list-style-type: none;
+}

package/src/brand/colors.njk

@@ -35,12 +35,14 @@ Step 0 is the 'default' shade for each color."
             {
                 name: "-1",
                 hex: '003039',
-                cmyk: '93.65.57.57'
+                cmyk: '93.65.57.57',
+                pantone: 'PAN 547'
             },
             {
                 name: 0,
                 hex: '005461',
-                cmyk: '93.54.49.27'
+                cmyk: '93.54.49.27',
+                pantone: 'PAN 3165'
             },
             {
                 name: 1,
@@ -71,7 +73,8 @@ Step 0 is the 'default' shade for each color."
             {
                 name: 0,
                 hex: '00a2c2',
-                cmyk: '77.17.17.00'
+                cmyk: '77.17.17.00',
+                pantone: 'PAN 312'
             },
             {
                 name: 1,
@@ -102,7 +105,8 @@ Step 0 is the 'default' shade for each color."
             {
                 name: 0,    
                 hex: '13aa13',
-                cmyk: '81.04.100.01'
+                cmyk: '81.04.100.01',
+                pantone: 'PAN 354'
             },
             {
                 name: 1,
@@ -128,7 +132,8 @@ Step 0 is the 'default' shade for each color."
             {
                 name: 0,    
                 hex: 'ce0058',
-                cmyk: '14.100.50.2'
+                cmyk: '14.100.50.2',
+                pantone: 'PAN Rubine Red'
             }
         ]
     },
@@ -145,7 +150,8 @@ Step 0 is the 'default' shade for each color."
             {
                 name: 0,    
                 hex: '333333',
-                cmyk: '00.00.00.91'
+                cmyk: '00.00.00.91',
+                pantone: 'PAN 447'
             },
             {
                 name: 1,
@@ -228,6 +234,9 @@ Step 0 is the 'default' shade for each color."
                     <tbody>
                         <tr><td>Hex</td><td>#{{step.hex | upper}}</td></tr>
                         <tr><td>CMYK</td><td>{{step.cmyk}}</td></tr>
+                        <tr class="{{ "u-petrol-step-3" if not step.pantone }}">
+                            <td>Pantone</td><td>{{step.pantone if step.pantone}}</td>
+                        </tr>
                     </tbody>
                 </table>
             {% endfor %}

package/src/brand/illustration.md

@@ -0,0 +1,44 @@
+---
+title: Illustration
+layout: content-page
+sidebar: brand
+tags: brand
+version: 1.0.0
+status: 'Ready'
+---
+Photography covers most of our needs for visual imagery, but there are times when photography isn't a good fit. For example when dealing with more abstract transactional concepts like "log in" or "verify your account". In these cases, we use illustration to add some vibrance to our designs.
+
+## Guidelines
+Our illustration style is still a work-in-progress; currently it follows a few simple guidelines.
+
+- Vector
+- Isometric perspective
+- Simple details
+- Small characters (usually) around a large object
+- Limited color palette
+- White background
+
+## Resources
+We have a library of pre-made characters which can be adapted for new designs, and an Adobe Illustrator color palette. Contact Will Wallace for access to both of these; I'll aim to make the available on this site in future.
+
+## Examples
+
+<div class="c-library__illustration-grid">
+
+![alt text][login]
+
+![alt text][thankyou]
+
+![alt text][confirm]
+
+![alt text][support]
+
+![alt text][opt-in]
+
+</div>
+
+[login]: https://www.malvernpanalytical.com/resource/svg/login3.svg
+[thankyou]: https://p3.aprimocdn.net/malvernpanalytical/0cd71419-bc75-4b43-8c4d-af69010bf927/thankyou_Original%20file.svg
+[support]: https://p3.aprimocdn.net/malvernpanalytical/aef489f7-a3cc-4a0c-ad6c-af3300baaa3b/support3_Original%20file.svg
+[opt-in]: https://p3.aprimocdn.net/malvernpanalytical/383c6156-cefd-4d8e-a913-af6d00cebf8a/opt-in%20success%20v02_Original%20file.svg
+[confirm]: https://p3.aprimocdn.net/malvernpanalytical/68ccc179-959e-4b2e-b1c1-af7100be26af/get-started_Original%20file.svg

package/src/brand/images.md

@@ -4,7 +4,7 @@ layout: system-page
 sidebar: brand
 tags: brand
 version: 1.0.0
-status: 'In production'
+status: 'Ready'
 ---
 
 <div class="mp o-prose u-flow--prose">

package/src/components/grid/generic.njk

@@ -6,8 +6,10 @@ crumb: ["/components/grid/", "Grid"]
 ---
 
 <div class="u-flow--l">
+  <p>All <code>o-grid</code>s are single-column, full width, below 22.4em/358px. Three- and four-column grids begin to split into columns above 38em/608px, and two-column grids split into columns above 40em/640px.</p>
   <div class="u-flow--xs">
     <p class="u-step--1"><code>.o-grid .o-grid--of-two</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 40em/640px</p>
     <div class="o-grid o-grid--of-two">
       <div>
         <div class="c-library-grid"></div>
@@ -18,8 +20,35 @@ crumb: ["/components/grid/", "Grid"]
     </div>
   </div>
 
+  <div class="u-flow--xs">
+    <p class="u-step--1"><code>.o-grid .o-grid--of-two-late</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 55em/880px</p>
+    <div class="o-grid o-grid--of-two-late">
+      <div>
+        <div class="c-library-grid"></div>
+      </div>
+      <div>
+        <div class="c-library-grid"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="u-flow--xs">
+    <p class="u-step--1"><code>.o-grid .o-grid--of-two-early</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 22.4em/358px</p>
+    <div class="o-grid o-grid--of-two-early">
+      <div>
+        <div class="c-library-grid"></div>
+      </div>
+      <div>
+        <div class="c-library-grid"></div>
+      </div>
+    </div>
+  </div>
+
   <div class="u-flow--xs">
     <p class="u-step--1"><code>.o-grid .o-grid--of-three</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 38em/608px, then three columns above 55em/880px</p>
     <div class="o-grid o-grid--of-three">
       <div>
         <div class="c-library-grid"></div>
@@ -35,6 +64,7 @@ crumb: ["/components/grid/", "Grid"]
 
   <div class="u-flow--xs">
     <p class="u-step--1"><code>.o-grid .o-grid--of-three-late</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 38em/608px, then three columns above 68em/1088px</p>
     <div class="o-grid o-grid--of-three-late">
       <div>
         <div class="c-library-grid"></div>
@@ -50,6 +80,7 @@ crumb: ["/components/grid/", "Grid"]
   
   <div class="u-flow--xs">
     <p class="u-step--1"><code>.o-grid .o-grid--of-four</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 38em/608px, then three columns above 60em/960px</p>
     <div class="o-grid o-grid--of-four">
       <div>
         <div class="c-library-grid"></div>

package/src/components/grid/index.njk

@@ -5,8 +5,9 @@ sidebar: components
 ---
 
 {% from "components/card/macro.njk" import card %}
+{% from "components/prose/macro.njk" import markdown %}
 
-<div class="o-grid o-grid--of-three-late">
+<div class="o-grid o-grid--of-three-late u-margin-bottom-s">
   {{ card({
       theme: {
         layout: 'single',
@@ -64,4 +65,22 @@ sidebar: components
         }
       }
   }) }}
-</div>
+</div>
+
+{% set content %}
+## Common breakpoints (mobile first)
+
+These are guidelines, not strict rules. In general you should add a breakpoint whenever the design requires it, not whenever these guidelines say so.
+
+| Ems | Px | What happens above this breakpoint: |
+|-----|----|--------|
+| 38em | 608px | [Generic grids](/components/grid/generic) expand from single- to multi-column (anything below this is considered "Mobile") |
+| 40em | 641px | Comparison tables expand from single- to multi-column |
+| 48em | 768px | Mobile menu becomes desktop menu |
+| 55em | 880px | [Layout grids](/components/grid/layout) expand from single- to multi-column |
+| 70em | 1120px | Column widths expand slightly (anything above this is considered "Desktop") |
+{% endset %}
+
+{{ markdown({
+  content: content
+}) }}

package/src/components/grid/layout.njk

@@ -24,11 +24,11 @@ Options have been included to control component order when the layout is stacked
     {% set item = i[0] %}
     {% set modifier = i[1] %}
     <div class="u-flow">
-      <h2 class="c-h c-h--step-3">{{ item }}{% if modifier %} ({{ modifier | replace('o-grid--', '') }}){% endif %}</h2>
+      <h2 class="c-h c-h--step-3">{{ item }} {{ '(' + modifier + ')' | replace('o-grid--', '') if modifier }}</h2>
 
       <div class="u-flow--xs">
-        <p class="u-step--1"><code>o-grid o-grid--{{ item }}{% if modifier %} {{ modifier }}{% endif %}</code></p>
-        <div class="o-grid o-grid--layout o-grid--{{ item }}{% if modifier %} {{ modifier }}{% endif %}">
+        <p class="u-step--1"><code>o-grid o-grid--{{ item }} {{ modifier if modifier }}</code></p>
+        <div class="o-grid o-grid--layout o-grid--{{ item }} {{ modifier if modifier }}">
           <main>
             <div class="c-library-grid c-library-grid--first"></div>
           </main>
@@ -39,8 +39,8 @@ Options have been included to control component order when the layout is stacked
       </div>
 
       <div class="u-flow--xs">
-        <p class="u-step--1"><code>o-grid o-grid--{{ item }}-switch{% if modifier %} {{ modifier }}{% endif %}</code></p>
-        <div class="o-grid o-grid--layout o-grid--{{ item }}-switch{% if modifier %} {{ modifier }}{% endif %}">
+        <p class="u-step--1"><code>o-grid o-grid--{{ item }}-switch {{ modifier if modifier }}</code></p>
+        <div class="o-grid o-grid--layout o-grid--{{ item }}-switch {{ modifier if modifier }}">
           <main>
             <div class="c-library-grid c-library-grid--first"></div>
           </main>