Move cypress to docs folder

docs/cyp/elements/box.html

@@ -0,0 +1,8 @@
+---
+layout: cypress
+title: Elements/Box
+---
+
+<div class="box">
+  I'm in a box.
+</div>

docs/cyp/elements/button.html

@@ -0,0 +1,66 @@
+---
+layout: cypress
+title: Elements/Button
+---
+
+<div class="block">
+  <button id="button-default" class="button">
+    Button
+  </button>
+
+  <button id="button-hover" class="button is-hovered">
+    Hover
+  </button>
+
+  <button id="button-focus" class="button is-focused">
+    Focus
+  </button>
+
+  <button id="button-active" class="button is-active">
+    Active
+  </button>
+</div>
+
+{% for color in site.data.colors.justColors %}
+  <div class="block">
+    <button id="button-{{ color }}" class="button is-{{ color }}">
+      {{ color | capitalize }}
+    </button>
+
+    <button id="button-{{ color }}-hover" class="button is-hovered is-{{ color }}">
+      Hover
+    </button>
+
+    <button id="button-{{ color }}-focus" class="button is-focused is-{{ color }}">
+      Focus
+    </button>
+
+    <button id="button-{{ color }}-active" class="button is-active is-{{ color }}">
+      Active
+    </button>
+  </div>
+
+  <div class="block">
+    <button id="button-{{ color }}-outlined" class="button is-outlined is-{{ color }}">
+      Outlined
+    </button>
+
+    <button id="button-{{ color }}-outlined-hover" class="button is-outlined is-hovered is-{{ color }}">
+      Hover
+    </button>
+
+    <button id="button-{{ color }}-inverted" class="button is-inverted is-{{ color }}">
+      Inverted
+    </button>
+
+    <button id="button-{{ color }}-inverted-outlined" class="button is-inverted is-outlined is-{{ color }}">
+      Inverted Outlined
+    </button>
+  </div>
+
+  <div class="block">
+    <button id="button-{{ color }}-light" class="button is-light is-{{ color }}">
+      Light
+    </button>
+  </div>
+{% endfor %}

docs/cyp/elements/container.html

@@ -0,0 +1,28 @@
+---
+layout: cypress
+title: Elements/Container
+---
+
+<div id="container" class="container">
+  I'm a container
+</div>
+
+<div id="container-max-desktop" class="container is-max-desktop">
+  I'm a max desktop container
+</div>
+
+<div id="container-max-widescreen" class="container is-max-widescreen">
+  I'm a max widescreen container
+</div>
+
+<div id="container-widescreen" class="container is-widescreen">
+  I'm a widescreen container
+</div>
+
+<div id="container-fullhd" class="container is-fullhd">
+  I'm a fullhd container
+</div>
+
+<div id="container-fluid" class="container is-fluid">
+  I'm a fluid container
+</div>