From 6f7165298d3959cd96c938612e4cc37ee29f8121 Mon Sep 17 00:00:00 2001
From: Sebastian Buckpesch <s.buckpesch@app-arena.com>
Date: Tue, 17 Oct 2017 18:33:59 +0200
Subject: [PATCH 1/2] Refactor styleguide to use bootstrap 4 beta

---
 source/_patterns/01-molecules/navbar/navbar.mustache   |  4 ++--
 source/_patterns/02-organisms/layout/footer.mustache   |  2 +-
 .../02-organisms/slider/references-slider.mustache     |  2 +-
 .../_patterns/02-organisms/tabs/vertical-tabs.mustache | 10 +++++-----
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/source/_patterns/01-molecules/navbar/navbar.mustache b/source/_patterns/01-molecules/navbar/navbar.mustache
index 5f734de6..5f5d5f74 100644
--- a/source/_patterns/01-molecules/navbar/navbar.mustache
+++ b/source/_patterns/01-molecules/navbar/navbar.mustache
@@ -15,7 +15,7 @@
                     </div>
                 {{/searchForm}}
 
-                <div class="text-right hidden-md-down cd-morph-dropdown">
+                <div class="text-right d-none d-lg-block cd-morph-dropdown">
                     {{#navs}}
                         <ul class="main-nav navbar-nav {{ class }}">
                             {{# items }}
@@ -49,7 +49,7 @@
                                                                             <div class="product-link-content">
                                                                             <span class="link-title">
                                                                                 {{text}}</span>
-                                                                                <p class="link-sub hidden-sm-down">{{description}}</p>
+                                                                                <p class="link-sub d-none d-md-block">{{description}}</p>
                                                                             </div>
                                                                         </a>
                                                                     </li>
diff --git a/source/_patterns/02-organisms/layout/footer.mustache b/source/_patterns/02-organisms/layout/footer.mustache
index a633ad3c..e662ca3f 100644
--- a/source/_patterns/02-organisms/layout/footer.mustache
+++ b/source/_patterns/02-organisms/layout/footer.mustache
@@ -63,7 +63,7 @@
                 </div>
                 <div class="o-footer-copyright col-12">
                     <span class="countup">{{ year }}</span> &copy; {{ company.name }}™
-                    <span class="hidden-md-up"><br></span><span class="hidden-sm-down"> | </span>
+                    <span class="d-md-none"><br></span><span class="d-none d-md-block"> | </span>
                     Made with <i class="aa-icon aa-icon-heart"></i> in Cologne, Germany.
                 </div>
             {{/footer.copyright}}
diff --git a/source/_patterns/02-organisms/slider/references-slider.mustache b/source/_patterns/02-organisms/slider/references-slider.mustache
index 1bb89fdb..82a472be 100644
--- a/source/_patterns/02-organisms/slider/references-slider.mustache
+++ b/source/_patterns/02-organisms/slider/references-slider.mustache
@@ -11,7 +11,7 @@
                             <img class="reference-screen-mobile" data-lazy="{{screens.mobile}}" alt="{{#title}}{{title}}{{/title}}">
                         {{/screens.mobile}}
                     </div>
-                    <div class="reference-quote text-center hidden-xs-down">
+                    <div class="reference-quote text-center d-none d-sm-block">
                         <blockquote>
                             {{#title}}<h3>{{title}}</h3>{{/title}}
                             <p class="quote">" {{quote}} "</p>
diff --git a/source/_patterns/02-organisms/tabs/vertical-tabs.mustache b/source/_patterns/02-organisms/tabs/vertical-tabs.mustache
index 06bbb709..3f203de1 100644
--- a/source/_patterns/02-organisms/tabs/vertical-tabs.mustache
+++ b/source/_patterns/02-organisms/tabs/vertical-tabs.mustache
@@ -2,7 +2,7 @@
     <div class="o-vertical-tabs">
         <div class="row">
             {{# navigation.positionLeft }}
-                <div class="tabs-nav hidden-xs-down col-sm-12 col-lg-6">
+                <div class="tabs-nav d-none d-sm-block col-sm-12 col-lg-6">
                     <ul class="nav  hover-tabs list-unstyled  flex-column" role="tablist">
                         {{#items}}
                             <li class="nav-item">
@@ -28,7 +28,7 @@
                     </ul>
                 </div>
             {{/navigation.positionLeft}}
-            <div class="tab-content hidden-xs-down col-sm-12 col-lg-6">
+            <div class="tab-content d-none d-sm-block col-sm-12 col-lg-6">
                 {{#items}}
                     <div class="tab-pane {{#isActive}}active{{/isActive}}" id="{{id}}" role="tabpanel">
                         {{{content}}}
@@ -36,7 +36,7 @@
                 {{/items}}
             </div>
             {{^ navigation.positionLeft }}
-                <div class="tabs-nav hidden-xs-down col-sm-12 col-lg-6">
+                <div class="tabs-nav d-none d-sm-block col-sm-12 col-lg-6">
                     <ul class="nav  hover-tabs list-unstyled  flex-column" role="tablist">
                         {{#items}}
                             <!--<img class="d-flex mr-3" src="..." alt="Generic placeholder image">-->
@@ -64,7 +64,7 @@
                 </div>
             {{/navigation.positionLeft}}
             {{# slider }}
-                <div class="o-slider hidden-sm-up col-12">
+                <div class="o-slider d-sm-none col-12">
                     <div id="{{id}}" class="slider">
                         {{# items }}
                             <div class="carouselContainer">
@@ -77,7 +77,7 @@
                     </div>
                 </div>
                 <div class="col-12 text-center">
-                    <div class="slick-btn hidden-sm-up">
+                    <div class="slick-btn d-sm-none">
                         {{#cta}}
                             <a href="{{url}}" class="btn {{class}}">{{{text}}}</a>
                         {{/cta}}

From 69b72975e87211ebef42a7acfb80f48f56eb64f5 Mon Sep 17 00:00:00 2001
From: Sebastian Buckpesch <s.buckpesch@app-arena.com>
Date: Tue, 17 Oct 2017 18:54:02 +0200
Subject: [PATCH 2/2] Refactor styleguide to use bootstrap 4 beta

---
 package.json                                   | 2 +-
 source/_patterns/01-molecules/website/usp.scss | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e5687378..287ecc5d 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
   "dependencies": {
     "axios": "^0.15.3",
     "babel-polyfill": "^6.16.0",
-    "bootstrap": "4.0.0-alpha.6",
+    "bootstrap": "^4.0.0-beta",
     "classnames": "^2.2.5",
     "clipboard": "^1.6.1",
     "copy-webpack-plugin": "^4.0.1",
diff --git a/source/_patterns/01-molecules/website/usp.scss b/source/_patterns/01-molecules/website/usp.scss
index bb6d31c3..3f878620 100644
--- a/source/_patterns/01-molecules/website/usp.scss
+++ b/source/_patterns/01-molecules/website/usp.scss
@@ -6,6 +6,7 @@
   }
   .m-usp-title {
     padding-top: 1rem;
+    font-size: 1.4rem;
   }
   .m-usp-description {
   }