@madgex/design-system 1.7.2 → 1.8.0

package/fractal-theme/assets/css/styles.css

@@ -39,3 +39,12 @@
   width: calc(100% + 48px);
   float: left;
 }
+
+.grid-example span {
+  display: block;
+  background: #3e2563;
+  color: #fff;
+  padding: 10px;
+  text-align: center;
+  margin-bottom: 1rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/design-system",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
@@ -59,7 +59,7 @@
     "postcss-loader": "^3.0.0",
     "rimraf": "^2.6.3",
     "sass-loader": "^7.1.0",
-    "semantic-release": "^15.13.16",
+    "semantic-release": "^15.13.18",
     "style-dictionary": "^2.8.0",
     "style-loader": "^0.23.1",
     "svg-sprite-loader": "^4.1.6",

package/src/components/_preview.njk

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="{{ '/css/index.css' | path }}" />
+    <link rel="stylesheet" href="{{ '/assets/css/styles.css' | path }}" />
 
     <title>{{ _target.title }} - {{ _config.project.title }}</title>
 

package/src/layout/grid/README.md

@@ -0,0 +1,61 @@
+## Grid
+
+Use the grid system to lay out the content on the different pages.
+We are using a 12 column grid system based on Flexbox and a mobile-first approach.
+
+The grid is structured with a `mds-grid-row`  wrapper which acts as a row to contain your grid columns.
+
+You can add columns inside this wrapper to create your layout.
+To define your columns, add the class beginning with `mds-grid-col-` to a new container followed by the viewport width (`sm`,`md`,`lg`,`xl`) and/or the size of the container, for example: `mds-grid-col-6 mds-grid-col-md-4`.
+The default will start at 0 and then we add breakpoints to target the wider viewport widths.
+
+We are using the following breakpoints:
+
+- `$mds-size-breakpoint-sm` : `400px`
+- `$mds-size-breakpoint-md` : `600px`
+- `$mds-size-breakpoint-lg` : `1008px`
+- `$mds-size-breakpoint-xl` : `1280px`
+
+They can be overridden as necessary.
+
+### Offset
+
+You can offset a column at any breakpoint by using for example `mds-grid-col-offset-3`
+
+### Alignment
+
+Add classes to align elements horizontally or vertically within a row.
+- `.mds-grid-start-`, `.mds-grid-center-`, `.mds-grid-end-`,
+- `.mds-grid-top-`, `.mds-grid-middle-`, `.mds-grid-bottom-`
+
+Example:
+
+```
+<div class="mds-grid-row mds-grid-start-xs"></div>
+```
+
+### Distribution
+
+You can use `space-around` or `space-between` by adding the classes `mds-grid-around-`,`mds-grid-between-` 
+
+### Reordering and Reversing
+
+You can move an element to the first or last position with the classes `mds-grid-first-` and `mds-grid-last-`
+You can also reverse the order by adding `mds-grid-reverse` on the row.
+
+Example:
+
+```
+<div class="mds-grid-row">
+    <div class="mds-grid-col-4"></div>
+    <div class="mds-grid-col-4"></div>
+    <div class="mds-grid-col-4 mds-grid-first"></div>
+</div>
+```
+
+## Accessibility
+
+Changing the order in which the items appear visually can have an impact on accessibility, as it can create a disconnect between the visual order and keyboard navigation order. So please use with caution :)
+
+## Reference
+http://flexboxgrid.com/

package/src/layout/grid/grid.njk

@@ -0,0 +1,58 @@
+<div class="grid-example">
+    <h2>Default</h2>
+    <div class="mds-grid-row">
+        <div class="mds-grid-col-1"><span>1</span></div>
+        <div class="mds-grid-col-1"><span>1</span></div>
+        <div class="mds-grid-col-1"><span>1</span></div>
+        <div class="mds-grid-col-1"><span>1</span></div>
+        <div class="mds-grid-col-1"><span>1</span></div>
+        <div class="mds-grid-col-1"><span>1</span></div>
+        <div class="mds-grid-col-1"><span>1</span></div>
+        <div class="mds-grid-col-1"><span>1</span></div>
+        <div class="mds-grid-col-1"><span>1</span></div>
+        <div class="mds-grid-col-1"><span>1</span></div>
+        <div class="mds-grid-col-1"><span>1</span></div>
+        <div class="mds-grid-col-1"><span>1</span></div>
+    </div>
+    <div class="mds-grid-row">
+        <div class="mds-grid-col-2"><span>2</span></div>
+        <div class="mds-grid-col-2"><span>2</span></div>
+        <div class="mds-grid-col-2"><span>2</span></div>
+        <div class="mds-grid-col-2"><span>2</span></div>
+        <div class="mds-grid-col-2"><span>2</span></div>
+        <div class="mds-grid-col-2"><span>2</span></div>
+    </div>
+    <div class="mds-grid-row">
+        <div class="mds-grid-col-3"><span>3</span></div>
+        <div class="mds-grid-col-3"><span>3</span></div>
+        <div class="mds-grid-col-3"><span>3</span></div>
+        <div class="mds-grid-col-3"><span>3</span></div>
+    </div>
+    <div class="mds-grid-row">
+        <div class="mds-grid-col-4"><span>4</span></div>
+        <div class="mds-grid-col-4"><span>4</span></div>
+        <div class="mds-grid-col-4"><span>4</span></div>
+    </div>
+    <div class="mds-grid-row">
+        <div class="mds-grid-col-6"><span>6</span></div>
+        <div class="mds-grid-col-6"><span>6</span></div>
+    </div>
+    <div class="mds-grid-row">
+        <div class="mds-grid-col-12"><span>12</span></div>
+    </div>
+    <hr>
+    <h2>Offset</h2>
+    <div class="mds-grid-row">
+        <div class="mds-grid-col-8 mds-grid-col-offset-4"><span>8 with offset</span></div>
+        <div class="mds-grid-col-9 mds-grid-col-offset-3"><span>9 with offset</span></div>
+        <div class="mds-grid-col-10 mds-grid-col-offset-2"><span>10 with offset</span></div>
+        <div class="mds-grid-col-11 mds-grid-col-offset-1"><span>11 with offset</span></div>
+    </div>
+    <hr>
+    <h2>With different breakpoints</h2>
+    <div class="mds-grid-row">
+        <div class="mds-grid-col-12 mds-grid-col-sm-4 mds-grid-col-md-6 mds-grid-col-lg-8 mds-grid-col-xl-10"><span></span></div>
+        <div class="mds-grid-col-6 mds-grid-col-sm-4 mds-grid-col-md-3 mds-grid-col-lg-2 mds-grid-col-xl-1"><span></span></div>
+        <div class="mds-grid-col-6 mds-grid-col-sm-4 mds-grid-col-md-3 mds-grid-col-lg-2 mds-grid-col-xl-1"><span></span></div>
+    </div>
+</div>

package/src/scss/core/__index.scss

@@ -1,2 +1,3 @@
 @import 'defaults';
 @import 'lists';
+@import 'grid';