murb_design_system 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e75ed719a2a7f8cbe5b2188e8f608950e51855aaa0c016a9a7e42020757bac7a
-  data.tar.gz: 002353bd083622339656be5789fe8686d220d991675693beac143eef813e358d
+  metadata.gz: 8dcadd7bc9ec8288bb945f9b21a7c45c45d8902114215e4614f89fa965b6b8f9
+  data.tar.gz: 71dedccbc9057140736248f88fb8fe19a7389fe25c7607ffb1c79caa921dfa4b
 SHA512:
-  metadata.gz: 8859deb98cce7e10f9292fcc44990e392dcfe2bcedee76fd64b42fd370b880ace92e84e308bb083a2504bbe74a0ce1283a8918cf212d28eb86b81b2e7ad05b80
-  data.tar.gz: 93c31c7c692edc37d83932c45df627e432ccffc6d238793b0a78a5c910f4fa50ab56449102af5d64ef8f0e6da52e5134683074e2659af6086c56afc57db554d5
+  metadata.gz: f30b4f943c81060359ecc4118ccc799e19b4e915d9007ad392930571cd9424ca7cb480f3d9dc0a0e739e7ee34140cb8a2c3bacd88662f53f53b8917b7618c071
+  data.tar.gz: 8995f0be639879e58ca8d83179bb57b7a5eb58898740fbb80e2cca5b5bc4f00a50d635f663ae1823a043f833b6cc8a9d3c6e625b7037ab6edcd835336ad1583f

data/.ruby-version

@@ -0,0 +1 @@
+4.0.6

data/CHANGELOG.md

@@ -1,4 +1,26 @@
-## [Unreleased]
+## [unreleased]
+
+...
+
+## [0.2.0] - 2026-09-27
+
+- Dark mode introduced: automatically adjust the theme colours based on `@media (prefers-color-scheme: dark)`
+- Multiple bug fixes, including contrast fixes for improved accessibility
+- Initial support for microformat notations
+- Definition list styling
+- .sticky class for nav
+- Allow for an `aside` *next* to a `main`
+- Button within small
+- Added footer styling
+- Improved form styling
+- Block quotes
+- pre / code styling
+- tables
+  - ascending descending icons
+- fluid ui text
+- article mode (larger text)
+- **breaking** .u-columns--reduced to .u-column--reduced
+- **experimental** .grid to enable a CSS grid based layout
 
 ## [0.1.0] - 2022-08-21
 

data/Gemfile

@@ -10,3 +10,4 @@ gem "rake", "~> 13.0"
 gem "minitest", "~> 5.0"
 
 gem "rubocop", "~> 1.21"
+gem "logger"

data/Gemfile.lock

@@ -6,39 +6,80 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
-    ast (2.4.2)
-    json (2.6.2)
-    minitest (5.16.3)
-    parallel (1.22.1)
-    parser (3.1.2.1)
+    ast (2.4.3)
+    ffi (1.17.3)
+    ffi (1.17.3-aarch64-linux-gnu)
+    ffi (1.17.3-aarch64-linux-musl)
+    ffi (1.17.3-arm-linux-gnu)
+    ffi (1.17.3-arm-linux-musl)
+    ffi (1.17.3-arm64-darwin)
+    ffi (1.17.3-x86-linux-gnu)
+    ffi (1.17.3-x86-linux-musl)
+    ffi (1.17.3-x86_64-darwin)
+    ffi (1.17.3-x86_64-linux-gnu)
+    ffi (1.17.3-x86_64-linux-musl)
+    json (2.15.2)
+    language_server-protocol (3.17.0.5)
+    lint_roller (1.1.0)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    logger (1.7.0)
+    minitest (5.27.0)
+    parallel (1.27.0)
+    parser (3.3.10.0)
       ast (~> 2.4.1)
+      racc
+    prism (1.6.0)
+    racc (1.8.1)
     rainbow (3.1.1)
-    rake (13.0.6)
-    regexp_parser (2.5.0)
-    rexml (3.2.5)
-    rubocop (1.35.0)
+    rake (13.3.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
+    regexp_parser (2.11.3)
+    rubocop (1.81.7)
       json (~> 2.3)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
       parallel (~> 1.10)
-      parser (>= 3.1.2.1)
+      parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
-      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.20.1, < 2.0)
+      regexp_parser (>= 2.9.3, < 3.0)
+      rubocop-ast (>= 1.47.1, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.21.0)
-      parser (>= 3.1.1.0)
-    ruby-progressbar (1.11.0)
-    unicode-display_width (2.2.0)
+      unicode-display_width (>= 2.4.0, < 4.0)
+    rubocop-ast (1.47.1)
+      parser (>= 3.3.7.2)
+      prism (~> 1.4)
+    ruby-progressbar (1.13.0)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    unicode-display_width (3.2.0)
+      unicode-emoji (~> 4.1)
+    unicode-emoji (4.2.0)
 
 PLATFORMS
-  arm64-darwin-20
+  aarch64-linux-gnu
+  aarch64-linux-musl
+  arm-linux-gnu
+  arm-linux-musl
+  arm64-darwin
+  ruby
+  x86-linux-gnu
+  x86-linux-musl
+  x86_64-darwin
+  x86_64-linux-gnu
+  x86_64-linux-musl
 
 DEPENDENCIES
+  listen
+  logger
   minitest (~> 5.0)
   murb_design_system!
   rake (~> 13.0)
   rubocop (~> 1.21)
+  sassc
 
 BUNDLED WITH
-   2.2.29
+   2.5.11

data/README.md

@@ -1,8 +1,8 @@
-# MurbDesignSystem
+# murb design system
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/murb_design_system`. To experiment with that code, run `bin/console` for an interactive prompt.
+A very basic and bare bones system of components that will be used for [murb](https://murb.nl)'s non-marketing / more app type projects.
 
-TODO: Delete this and the text above, and describe your gem
+A preview can be shown here: [the latest auto deployed preview](https://murb-org.gitlab.io/murb-design-system/)
 
 ## Installation
 
@@ -12,6 +12,13 @@ Add this line to your application's Gemfile:
 gem 'murb_design_system'
 ```
 
+Or if you want to live on the edge:
+
+
+```ruby
+gem 'murb_design_system', git: "https://gitlab.com/murb-org/murb-design-system.git"
+```
+
 And then execute:
 
     $ bundle install
@@ -20,14 +27,13 @@ Or install it yourself as:
 
     $ gem install murb_design_system
 
-## Usage
-
-TODO: Write usage instructions here
 
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
 
+To add or change styles, use `bin/watch` (which uses the listen gem to auto build) or just the one-time `bin/build`
+
 To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
 ## Contributing
@@ -41,3 +47,7 @@ The gem is available as open source under the terms of the [MIT License](https:/
 ## Code of Conduct
 
 Everyone interacting in the MurbDesignSystem project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/murb_design_system/blob/main/CODE_OF_CONDUCT.md).
+
+## Alternatives
+
+* [SimpleCSS](https://simplecss.org/simple-css-version-2)

data/_navigation.html.erb

@@ -0,0 +1,15 @@
+<nav class="sticky" aria-label="Primary">
+  <ul>
+    <li><a href="./index.html" class="active">Home</a></li>
+    <li><a href="./basis.html">Basis</a></li>
+    <li><a href="./navigation.html">Navigation</a></li>
+    <li><a href="./blocks.html">Blocks</a></li>
+    <li><a href="./print.html">Print</a></li>
+    <li><a href="./layout.html">Layout</a></li>
+    <li><a href="./promo.html">Promo</a></li>
+  </ul>
+
+  <ul>
+    <li><a href="javascript:alert('yea');" class="button alert">Fake sign out button</a></li>
+  </ul>
+</nav>

data/basis.html.erb

@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="stylesheet" href="dist/murb_design_system.css">
+
+  <title>murb design system</title>
+  <% if ENV['REFRESH'] %>
+    <meta http-equiv="refresh" content="<%=ENV['REFRESH'] %>">
+  <% end %>
+
+</head>
+
+<body>
+  <%= File.read("_navigation.html.erb") %>
+  <main>
+    <h1 id="intro">The Basis</h1>
+    <p>Examples of how regular HTML elements are styled</p>
+
+        <section id="headers" class="visual-comparison-block">
+      <h2>Headers</h2>
+
+      <p>You've already come accross <code>h1</code> and <code>h2</code></p>
+
+      <h3>Level 3</h3>
+
+      <h4>Level 4</h4>
+
+      <h5>Level 5</h5>
+
+      <h6>Level 6</h6>
+
+      <p>Note we also have article display; these headers are a tad bit nicer.</p>
+
+      <p>Links on headers don't get additional colouring</p>
+
+      <h3><a href="#">A linking h3</a></h3>
+    </section>
+
+
+    <section id="lists" class="visual-comparison-block">
+    <h2 id="lists">Lists</h2>
+    <p>Just use regular HTML</p>
+    <h3>Unordered lists</h3>
+    <ul>
+      <li>Use semantic HTML and rely on it <em>without using additional classes</em></li>
+      <li>Do not reset the browser stylesheets (there might be a reason for it)</li>
+      <li>...</li>
+    </ul>
+    <p>There is a variant of this list, called <code>.labels</code>, just add the class to the <code>ul</code> to present a list of labels (or tags if you wish):</p>
+    <ul class="labels">
+      <li>Tag</li>
+      <li><a href="#lists">Linked tag</a></li>
+    </ul>
+    <p>If you need them more flexibly, there is also the <code>.label</code> class so you can
+        <span class="label">use</span>
+        <span class="label">this</span>
+        <span class="label">style</span>
+        <span class="label">inside</span>
+     a sentence. I don't like this solution as much as there is no semantics attached, but it could perhaps be derived from the content.</p>
+
+    <h3>Ordered lists</h3>
+    <ol>
+      <li>Use semantic HTML and rely on it <em>without using additional classes</em></li>
+      <li>Do not reset the browser stylesheets (there might be a reason for it)</li>
+      <li>...</li>
+    </ol>
+    <h3>Definition lists</h3>
+    <dl>
+      <dt>CSS</dt>
+      <dd>Cascading Style Sheets</dd>
+      <dt>HTML</dt>
+      <dd>HyperText Markup Language</dd>
+    </dl>
+    <p>The above is basically unstyled. You can add a <code>.no-inset</code> class to remove the default padding. A slight bottom margin is added to keep the visual grouping</p>
+    <dl class="no-inset">
+      <dt>CSS</dt>
+      <dd>Cascading Style Sheets</dd>
+      <dt>HTML</dt>
+      <dd>HyperText Markup Language</dd>
+    </dl>
+    <p>Finally, you there is an inline variant, where the dt and dd are displayed inline. This is done by adding a <code>.inline</code> class to the dl-element.</p>
+    <dl class="inline">
+      <dt>CSS</dt>
+      <dd>Cascading Style Sheets. Also here we add a small bottom margin to make sure that even when the text is very long, like this, there is some visual grouping.</dd>
+      <dt>HTML</dt>
+      <dd>HyperText Markup Language</dd>
+    </dl>
+
+    </section>
+    <section id="images" class="visual-comparison-block">
+    <h2>Images</h2>
+    <h3>Figure with a figcaption</h3>
+    <p>
+      <figure>
+        <img src="dist/GLOBE---1850-2024-MO.png" alt="stripes showing temperature rise from 1850 till 2024; blue is cooler; red is warmer, dark red is warmest; rising temperature is made absolutely clear from left to right" title="Warming Strips 1850-2024 for the globe provided by #ShowYourStripes, data by UK MetOffice" />
+        <figcaption>Warming Strips 1850-2024 for the globe provided by #ShowYourStripes, data by UK MetOffice</figcaption>
+      </figure>
+    </p>
+    <p>Note, this also works in article view, see below.</p>
+    </section>
+    <section id="forms" class="visual-comparison-block">
+    <h2 >Forms</h2>
+    <form>
+      <label>This is a label with the input inside it.<input type="text" /></label>
+      <label>This is a label with the input inside it.<input type="text" aria-invalid="true" /><span class="error">with
+          an error</span></label>
+      <label for="uniqueInputId">Label and input NOT nested</label>
+      <input type="text" id="uniqueInputId" />
+      <label>Date input, just use HTML5 inputs.<input type="date" /></label>
+      <label>A disabled number input.<input type="number" disabled="disabled" /></label>
+      <label>We cab also have a hint<input type="number" disabled="disabled" /></label>
+      <p class="hint">This field is disabled because it has the disabled property set</p>
+      <label>Textarea.<textarea>Some text</textarea></label>
+      <label>A .large textarea<textarea class="large">Some text</textarea></label>
+      <fieldset>
+        <legend>Buttons</legend>
+        <p>These buttons are indeed presented within a fieldset</p>
+        <input type="submit" value="Plain submit button" />
+        <button>A button</button>
+        <a href="" class="button">A link with a button class</a>
+        <br />
+        <a href="" class="small button">.button.small</a>
+        <button class="small">A button-element with just a small class</button>
+        <small><button>Button-element within a small-element container</button></small>
+        <br />
+        <button class="warn">add .warn</button>
+        <button class="secondary">add .secondary</button>
+        <button class="primary">add .primary</button>
+
+      </fieldset>
+      <h3>Selecting one or more from a list of variables</h3>
+      <p>We use a option select if there is more than > 8 options to present.</p>
+
+      <label>Option select<select>
+          <option>Default</option>
+          <option>Other</option>
+          <option>Yet another</option>
+        </select></label>
+      <fieldset>
+        <legend>Radiobuttons</legend>
+        <label><input type="radio" name="radio" />Option 1</label>
+        <label><input type="radio" name="radio" />Option 2</label>
+        <label><input type="radio" name="radio" />Option 3</label>
+        <p>Non nested:</p>
+        <input type="radio" name="radio" id="nonnestedradio1" /><label for="nonnestedradio1">Option 1</label>
+        <input type="radio" name="radio" id="nonnestedradio2" /><label for="nonnestedradio2">Option 1</label>
+        <input type="radio" name="radio" id="nonnestedradio3" /><label for="nonnestedradio3">Option 1</label>
+      </fieldset>
+      <fieldset>
+        <legend>Checkboxes</legend>
+        <label><input type="checkbox" name="check" />Option 1</label>
+        <label><input type="checkbox" name="check" />Option 2</label>
+        <label><input type="checkbox" name="check" />Option 3</label>
+        <p>Non nested:</p>
+        <input type="checkbox" name="check" id="nonnestedcheckbox1" /><label for="nonnestedcheckbox1">Option 1</label>
+        <input type="checkbox" name="check" id="nonnestedcheckbox2" /><label for="nonnestedcheckbox2">Option 2</label>
+        <input type="checkbox" name="check" id="nonnestedcheckbox3" /><label for="nonnestedcheckbox3">Option 3</label>
+      </fieldset>
+    </form>
+    <p>Note we do a few nice things, this is a form (but invisible)</p>
+    <form>
+      <h2>This doesn't get top margin</h2>
+      <h2>This does</h2>
+    </form>
+    </section>
+
+
+    <section id="tables" class="visual-comparison-block">
+    <h2>Tables</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Head</th>
+          <th class="number">Other<br/>head</th>
+        </tr>
+      </thead>
+      <tfoot>
+        <tr>
+          <td>Foot</td>
+          <td class="number"><strong>€ 12335.00</strong></td>
+        </tr>
+        <tbody>
+          <tr>
+            <th>Number next <br/><small>(with .number class)</small></th>
+            <td class="number">€ 12.00</td>
+          </tr>
+          <tr>
+            <th>Other number (with .number class)</th>
+            <td class="number">€ 12323.00</td>
+          </tr>
+        </tbody>
+    </table>
+
+    <h3>Sorting tables</h3>
+    <p>When applying <code>aria-sort="ascending"</code> or <code>aria-sort="descending"</code> (see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort">MDN on Aria Sort</a>) you get automatic content after</p>
+    <table>
+      <thead>
+        <tr>
+          <th aria-sort="ascending">Ascending</th>
+          <th aria-sort="descending">Descending</th>
+        </tr>
+      </thead>
+    </table>
+    </section>
+
+    <section id="other-text-blocks" class="visual-comparison-block">
+
+          <section>I'm writing this in a section containing a section, hence the super section has a small line on top :)</section>
+    <h2>Other text blocks</h2>
+    <h3>Just `pre`</h3>
+    <pre>The MIT License (MIT)
+
+Copyright © 2025
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.</pre>
+    <h3>A code block `pre > code`</h3>
+    <pre><code># My favourite programming language is ruby
+
+def say(what)
+  puts what || ["Euh", "Ah", "..."].sample
+end
+
+10.times { say "Hello!" } # prints Hello! 10 times :)
+10.times { say } # prints randomly one of the texts "Euh", "Ah" ...</code></pre>
+    <small>Aside: I have some concerns about ruby and its climate impact, but there are multiple ways to make delivery more efficient. Caching is one of them.</small>
+    <h3>Inline code</h3>
+    <p>Sometimes you just want to say that a method called <code>puts</code> writes something to the screen.</p>
+    <h3>Blockquote</h3>
+    <p>Friday's for future, which started with Greta Thunberg's weekly strike works towards the following goals</p>
+
+    <blockquote cite="https://fridaysforfuture.org/what-we-do/our-demands/">
+    <ol><li>Keep the global temperature rise below 1.5 °C compared to pre-industrial levels. </li>
+    <li>Ensure climate justice and equity.</li>
+    <li>Listen to the best united science currently available.</li></ol>
+    </blockquote>
+
+        <blockquote cite="https://fridaysforfuture.org/what-we-do/our-demands/">
+    <ol><li>Keep the global temperature rise below 1.5 °C compared to pre-industrial levels. </li>
+    <li>Ensure climate justice and equity.</li>
+    <li>Listen to the best united science currently available.</li></ol>
+    </blockquote>
+
+    <p>We can present this a bit nicer using a figure block</p>
+
+    <figure class="quote">
+  <blockquote cite="https://fridaysforfuture.org/what-we-do/our-demands/">
+    <ol><li>Keep the global temperature rise below 1.5 °C compared to pre-industrial levels. </li>
+    <li>Ensure climate justice and equity.</li>
+    <li>Listen to the best united science currently available.</li></ol>  </blockquote>
+  <figcaption><cite><a href="https://fridaysforfuture.org/what-we-do/our-demands/">Declaration of Lausanne</a></cite> | August 2019, 400 climate activists from 38 countries</figcaption>
+</figure>
+
+    <p>Sometimes the quote quotes a quote</p>
+
+       <figure class="quote">
+  <blockquote cite="https://fridaysforfuture.org/what-we-do/our-demands/">
+    <ol><li>Keep the global temperature rise below 1.5 °C compared to pre-industrial levels. </li>
+    <li>Ensure climate justice and equity.</li>
+    <li>Listen to the best united science currently available.</li></ol>
+
+       <figure class="quote">
+  <blockquote cite="https://fridaysforfuture.org/what-we-do/our-demands/">
+    <ol><li>Keep the global temperature rise below 1.5 °C compared to pre-industrial levels. </li>
+    <li>Ensure climate justice and equity.</li>
+    <li>Listen to the best united science currently available.</li></ol>  </blockquote>
+  <figcaption><cite><a href="https://fridaysforfuture.org/what-we-do/our-demands/">Declaration of Lausanne</a></cite> | August 2019, 400 climate activists from 38 countries</figcaption>
+</figure>
+
+    </blockquote>
+  <figcaption><cite><a href="https://fridaysforfuture.org/what-we-do/our-demands/">Declaration of Lausanne</a></cite> | August 2019, 400 climate activists from 38 countries</figcaption>
+</figure>
+
+<aside>An <code>aside</code> in a section within main gets a grey background to make it more distinct from the running text</aside>
+
+
+    </section>
+    <footer>
+    Any page can have a footer, right?
+    </footer>
+
+
+  <h2>Visual comparison</h2>
+
+  <div id="outputCanvas"></div>
+
+  <script src="html2canvas.min.js"></script>
+
+  <script>
+    container = document.getElementById("outputCanvas")
+    document.querySelectorAll(".visual-comparison-block").forEach(element => {
+      const header = document.createElement("h3");
+
+      const headerText = document.createTextNode(element.id);
+      header.appendChild(headerText);
+
+      html2canvas(element).then(canvas => {
+
+        container.appendChild(header);
+        container.appendChild(canvas);
+        const link = document.createElement("a");
+        const linkText = document.createTextNode("Download " + element.id);
+        setTimeout(() => {
+          const linkTarget = canvas.toDataURL();
+          link.href = linkTarget;
+          link.appendChild(linkText);
+          link.setAttribute("download", element.id + ".png");
+          container.appendChild(link);
+        }, 100);
+
+      });
+    });
+
+
+
+  </script>
+
+</body>
+
+</html>

data/bin/build

@@ -0,0 +1,41 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "bundler/setup"
+require "murb_design_system"
+require "sassc"
+require "erb"
+
+stylesheets_path = File.expand_path("../../vendor/assets/stylesheets", __FILE__)
+root_path = File.expand_path("../..", __FILE__)
+
+SassC.load_paths << stylesheets_path
+
+Dir.mkdir File.join(root_path, "public") rescue Errno::EEXIST
+Dir.mkdir File.join(root_path, "public", "dist") rescue Errno::EEXIST
+scss_file_names = Dir.glob(File.join(stylesheets_path,"*.scss"))
+
+output = scss_file_names.flat_map do |scss_file_name|
+  ["/* #{scss_file_name} */\n",SassC::Engine.new(File.open(scss_file_name).read).render]
+end.join("\n")
+
+File.write(File.join(root_path, "dist/murb_design_system.css"), output)
+File.write(File.join(root_path, "dist/murb_design_system.min.css"), SassC::Engine.new(output, style: :compressed).render)
+File.write(File.join(root_path, "public/dist/murb_design_system.css"), output)
+File.write(File.join(root_path, "public/dist/murb_design_system.min.css"), SassC::Engine.new(output, style: :compressed).render)
+
+
+erb_file_names = Dir.glob(File.join(root_path,"*.html.erb"))
+erb_file_names.each do |erb_file|
+  unless erb_file.to_s.match("/_")
+    index_html = ERB.new(File.read(erb_file)).result
+    file_name = erb_file.split("/").last
+
+    # binding.irb
+    File.write(File.join(root_path, "public", file_name.sub("html.erb","html")), index_html)
+  end
+end
+
+
+# require "irb"
+# IRB.start(__FILE__)

data/bin/watch

@@ -0,0 +1,25 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "bundler/setup"
+require "murb_design_system"
+require 'listen'
+
+root_path = File.expand_path("../..", __FILE__)
+
+`#{File.join(root_path, 'bin', 'build')}`
+
+listener = Listen.to(root_path) do |modified, added, removed|
+  puts "Change picked up @ #{Time.now}"
+  # puts "modified"
+  hash = {modified: modified}
+  puts hash
+  `#{File.join(root_path, 'bin', 'build')}`
+end
+
+# don't loop
+listener.ignore(/dist/)
+listener.ignore(/\.html$/)
+
+listener.start
+sleep