components/01_Atoms/_atoms.scss

@@ -1,5 +1,4 @@
 @import 'link/link';
 @import 'headline/headline';
 @import 'text/text';
-@import 'icon/icon';
+@import 'icon/icon';
-@import 'input/input';

components/01_Atoms/input/_input.scss

@@ -1,67 +0,0 @@
-.LP-Input{
-    $-margin-bottom: 30px;
-    display: flex;
-    flex-direction: column;
-    margin-bottom: -$-margin-bottom;
-    padding: 10px 0;
-
-    .LP-Input__Field{
-        border: none;
-        border-bottom: 1px solid $-secondary-color;
-        padding: 8px;
-        margin-bottom: $-margin-bottom;
-
-        &:focus, &:active{
-            margin-bottom: $-margin-bottom - 1px;
-            border-bottom: 2px solid $-primary-accent-color;
-            background-color: $-secondary-background-color;
-            border-radius: 3px 3px 0 0;
-        }
-    }
-    .LP-Input__Label{
-        font-family: $-primary-sans-serif-font;
-        font-size: 18px;
-    }
-    .LP-Input__Message{
-        font-family: $-primary-sans-serif-font;
-        font-style: italic;
-        font-size: 13px;
-        padding: 3px;
-        position: relative;
-        top: -$-margin-bottom;
-
-        &:before{
-            content: '* ';
-        }
-    }
-
-    &--error{
-        .LP-Input__Field{
-            margin-bottom: 25px;
-            border-bottom: 2px solid $-primary-accent-color;
-            margin-bottom: $-margin-bottom - 1px;
-        }
-
-        .LP-Input__Message{
-            color: $-primary-accent-color;
-        }
-    }
-}
-
-@media(max-width: $-viewport-small){
-    .LP-Input{
-        .LP-Input__Label{
-            font-family: $-primary-sans-serif-font;
-            font-size: 2.5vw;
-        }
-    }
-}
-
-@media(max-width: $-viewport-extra-small){
-    .LP-Input{
-        .LP-Input__Label{
-            font-family: $-primary-sans-serif-font;
-            font-size: 18px;
-        }
-    }
-}

components/01_Atoms/input/input.config.json

@@ -1,3 +0,0 @@
-{
-    
-}

components/01_Atoms/input/input.hbs

@@ -1,5 +0,0 @@
-<div class="LP-Input">
-    <label for="input123" class="LP-Input__Label">First name</label>
-    <input type="text" id="input123" class="LP-Input__Field"/>
-    <span class="LP-Input__Message">Field is required</span>
-</div>

components/02_Molecules/form/_form.scss

@@ -1,70 +0,0 @@
-.LP-Form{
-    max-width: 900px;
-    .LP-Form__Fieldset{
-        border: none;
-
-        .LP-Form__Legend{
-            margin: 0;
-            padding: 0;
-        }
-
-        .LP-Form__Composition{
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-
-            .LP-Form__Field{
-                flex: 3 1 100px;
-                padding: 0 15px;
-
-                &--wider{
-                    flex: 5 1 200px;
-                }
-
-                &--wide{
-                    flex: 4 1 150px;
-                }
-
-                &--narrow{
-                    flex: 2 0 50px;
-                }
-
-                &--narrower{
-                    flex: 1 0 25px;
-                }
-
-                input{
-                    width: 100%;
-                }
-            }
-        }
-    }
-}
-
-@media(max-width: $-viewport-small){
-    .LP-Form{
-        .LP-Form__Fieldset{
-            .LP-Form__Composition--breakable{
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-            }
-        }
-    }
-}
-
-@media(max-width: $-viewport-extra-small){
-    .LP-Form{
-        .LP-Form__Fieldset{
-            .LP-Form__Composition{
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-
-                .LP-Form__Field{
-                    flex: 3 1 100px;
-                }
-            }
-        }
-    }
-}

components/02_Molecules/form/form.config.json

@@ -1,3 +0,0 @@
-{
-    
-}

components/02_Molecules/form/form.hbs

@@ -1,42 +1,14 @@
 <form class="LP-Form">
     <fieldset class="LP-Form__Fieldset">
         <legend class="LP-Form__Legend">Basic data</legend>
-
+        <div class="LP-Form__Row">
-        <div class="LP-Form__Composition LP-Form__Composition--breakable">
+            <span class="LP-Form__Field">
-            <span class="LP-Form__Field LP-Input LP-Input--error">
+                <label for="textinput123" class="LP-Input__Label">Enter your text here</label>
-                <label for="input123" class="LP-Input__Label">First name</label>
+                <input id="textinput123" type="text" class="LP-Input__Text"/>
-                <input type="text" id="input123" class="LP-Input__Field"/>
+                <span class="LP-Input__ErrorMessage">
-                <span class="LP-Input__Message">Field is required</span>
+                    <p>Text is required</p>
-            </span>
+                </span>
-            <span class="LP-Form__Field LP-Input">
-                <label for="input123" class="LP-Input__Label">Last name</label>
-                <input type="text" id="input123" class="LP-Input__Field"/>
             </span>
         </div>
-
-        <div class="LP-Form__Composition">
-            <span class="LP-Form__Field LP-Form__Field--wider LP-Input">
-                <label for="input123" class="LP-Input__Label">Street</label>
-                <input type="text" id="input123" class="LP-Input__Field"/>
-                <span class="LP-Input__Message">We won't send any stalkers, promise</span>
-            </span>
-            <span class="LP-Form__Field LP-Form__Field--narrower LP-Input">
-                <label for="input123" class="LP-Input__Label">House no</label>
-                <input type="text" id="input123" class="LP-Input__Field"/>
-                <span class="LP-Input__Message">Field is required</span>
-            </span>
-        </div>
-
-        <div class="LP-Form__Composition">
-            <span class="LP-Form__Field LP-Form__Field--narrow LP-Input">
-                <label for="input123" class="LP-Input__Label">Postal Code</label>
-                <input type="text" id="input123" class="LP-Input__Field"/>
-            </span>
-            <span class="LP-Form__Field LP-Form__Field--wide LP-Input">
-                <label for="input123" class="LP-Input__Label">Town</label>
-                <input type="text" id="input123" class="LP-Input__Field"/>
-            </span>
-        </div>
-
     </fieldset>
 </form>

components/components.scss

@@ -1,18 +1,12 @@
 @font-face {
     font-family: Crimson;
     src:
-        url('fonts/Crimson/CrimsonText-Regular.ttf'),
+        url('fonts/CrimsonText-Regular.ttf'),
-        url('fonts/Crimson/CrimsonText-Bold.ttf'),
+        url('fonts/CrimsonText-Bold.ttf'),
-        url('fonts/Crimson/CrimsonText-Italic.ttf')
+        url('fonts/CrimsonText-Italic.ttf'),
-        ;
+        url('fonts/CrimsonText-BoldItalic.ttf'),
-  }
+        url('fonts/CrimsonText-SemiBold.ttf'),
-
+        url('fonts/CrimsonText-SemiBoldItalic.ttf')
-  @font-face {
-    font-family: Montserrat;
-    src:
-        url('fonts/Montserrat/Montserrat-Regular.ttf'),
-        url('fonts/Montserrat/Montserrat-Bold.ttf'),
-        url('fonts/Montserrat/Montserrat-Italic.ttf')
         ;
   }
 
@@ -22,12 +16,11 @@ $-primary-accent-color: #76323F;
 $-secondary-accent-color: #C09F80;
 $-secondary-background-color: #f9f9f9;
 
-$-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
+$-primary-sans-serif-font: "Trebuchet MS", Helvetica, sans-serif;
 $-primary-serif-font: Crimson, Times, serif;
 $-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;
 
 $-viewport-small: 650px;
-$-viewport-extra-small: 390px;
 
 
 @import '01_Atoms/atoms';