diff --git a/src/assets/stylesheets/styles.css b/src/assets/stylesheets/styles.css
index 50d8681..94da69b 100644
--- a/src/assets/stylesheets/styles.css
+++ b/src/assets/stylesheets/styles.css
@@ -2,44 +2,6 @@
#STYLES
\*------------------------------------*/
-/**
- * CONTENTS
- *
- * SETTINGS
- * Global...............Global variables and settings
- * Colors...............Global color variables
- *
- * TOOLS
- * -
- *
- * BASE
- * Page.................Page setup like html and body
- * Form.................Inputs
- * Table................Table
- * Type.................Header, links, paragraphs
- * Quote................Blockquote
- *
- * COMPONENTS
- * Button...............Buttons
- * Card.................Cards
- * Container............Container to center your web site
- * Form.................Forms
- * Grid.................Global grid system based on Lost
- * Heading..............Heading
- * Icon.................Icons
- * Label................Labels
- * List.................List
- * Media................Media
- * Message..............Message
- * Pagination...........Pagination
- * Panel................Panels
- * Paragraph............Paragraph
- * Wrapper..............Wrappers for full width backgrounds
- *
- * Utilities
- * Global...............Global utility states like u-hidden
- */
-
/*
* #SETTINGS
@@ -69,6 +31,8 @@
@import "../../components/Card/Card.css";
@import "../../components/Container/Container.css";
@import "../../components/Form/Form.css";
+@import "../../components/FormField/FormField.css";
+@import "../../components/FormSelect/FormSelect.css";
@import "../../components/Grid/Grid.css";
@import "../../components/Heading/Heading.css";
@import "../../components/Icon/Icon.css";
diff --git a/src/components/Card/Card.html b/src/components/Card/Card.html
index e7b34f9..c7359a1 100644
--- a/src/components/Card/Card.html
+++ b/src/components/Card/Card.html
@@ -23,4 +23,5 @@
{{ caller() }}
+
{% endmacro %}
diff --git a/src/components/Form/Form.html b/src/components/Form/Form.html
new file mode 100644
index 0000000..c9110da
--- /dev/null
+++ b/src/components/Form/Form.html
@@ -0,0 +1,8 @@
+{% from 'components/FormInput/FormInput.html' import FormInput %}
+
+{% macro Form(value='', type='', description='', label='') %}
+
+ {{ FormInput(value=value) }}
+ {{ label }}
+
+{% endmacro %}
diff --git a/src/components/Form/example.html b/src/components/Form/example.html
new file mode 100644
index 0000000..4a89bb4
--- /dev/null
+++ b/src/components/Form/example.html
@@ -0,0 +1,3 @@
+{% from 'components/Form/Form.html' import Form %}
+
+{{ Form(label='Label', type='text', value='pietje', description='desc') }}
diff --git a/src/components/FormCheckbox/FormCheckbox.html b/src/components/FormCheckbox/FormCheckbox.html
new file mode 100644
index 0000000..fba403f
--- /dev/null
+++ b/src/components/FormCheckbox/FormCheckbox.html
@@ -0,0 +1,3 @@
+{% macro FormCheckbox() %}
+
+{% endmacro %}
diff --git a/src/components/FormCheckbox/example.html b/src/components/FormCheckbox/example.html
new file mode 100644
index 0000000..bc5b2b5
--- /dev/null
+++ b/src/components/FormCheckbox/example.html
@@ -0,0 +1,3 @@
+{% from 'components/FormCheckbox/FormCheckbox.html' import FormCheckbox %}
+
+{{ FormCheckbox() }}
diff --git a/src/components/FormField/FormField.css b/src/components/FormField/FormField.css
new file mode 100644
index 0000000..fb0703f
--- /dev/null
+++ b/src/components/FormField/FormField.css
@@ -0,0 +1,12 @@
+/*------------------------------------*\
+ #COMPONENTS-FORM-FIELD
+\*------------------------------------*/
+
+.c-form-field {
+
+}
+
+.c-form-field--error {
+
+ color: var(--color-alert-50);
+}
diff --git a/src/components/FormField/FormField.html b/src/components/FormField/FormField.html
new file mode 100644
index 0000000..94695f1
--- /dev/null
+++ b/src/components/FormField/FormField.html
@@ -0,0 +1,9 @@
+{% macro FormField(label='', error='', description='') %}
+
+
+ {{ label }}
+ {{ caller() }}
+ {{ description }}
+
+
+{% endmacro %}
diff --git a/src/components/FormField/example.html b/src/components/FormField/example.html
new file mode 100644
index 0000000..e3f3a15
--- /dev/null
+++ b/src/components/FormField/example.html
@@ -0,0 +1,10 @@
+{% from 'components/FormField/FormField.html' import FormField %}
+{% from 'components/FormInput/FormInput.html' import FormInput %}
+
+{% call FormField(label='Label', error='true', description='Dit is een beschrijving') %}
+ {% call FormInput(type='text', value='Tekst') %}{% endcall %}
+{% endcall %}
+
+{% call FormField(label='Label', description='Dit is een beschrijving') %}
+ {% call FormInput(type='text') %}{% endcall %}
+{% endcall %}
diff --git a/src/components/FormInput/FormInput.html b/src/components/FormInput/FormInput.html
new file mode 100644
index 0000000..a8bbf83
--- /dev/null
+++ b/src/components/FormInput/FormInput.html
@@ -0,0 +1,5 @@
+{% macro FormInput(type='text', value='', placeholder='', disabled='false') %}
+
+
+
+{% endmacro %}
diff --git a/src/components/FormInput/example.html b/src/components/FormInput/example.html
new file mode 100644
index 0000000..5cd896c
--- /dev/null
+++ b/src/components/FormInput/example.html
@@ -0,0 +1,7 @@
+{% from 'components/FormInput/FormInput.html' import FormInput %}
+
+{{ FormInput(type='text', value='', placeholder='Met placeholder') }}
+{{ FormInput(type='text', value='Disabled', disabled="true") }}
+{{ FormInput(type='email', value='Met value', placeholder='') }}
+{{ FormInput(type='number', value='Met value', placeholder='') }}
+{{ FormInput(type='password', value='ditismijnpassword', placeholder='') }}
diff --git a/src/components/FormRadiobutton/FormRadiobutton.html b/src/components/FormRadiobutton/FormRadiobutton.html
new file mode 100644
index 0000000..01bf2f4
--- /dev/null
+++ b/src/components/FormRadiobutton/FormRadiobutton.html
@@ -0,0 +1,3 @@
+{% macro FormRadiobutton() %}
+
+{% endmacro %}
diff --git a/src/components/FormRadiobutton/example.html b/src/components/FormRadiobutton/example.html
new file mode 100644
index 0000000..7933eae
--- /dev/null
+++ b/src/components/FormRadiobutton/example.html
@@ -0,0 +1,3 @@
+{% from 'components/FormRadiobutton/FormRadiobutton.html' import FormRadiobutton %}
+
+{{ FormRadiobutton() }}
diff --git a/src/components/FormSelect/FormSelect.css b/src/components/FormSelect/FormSelect.css
new file mode 100644
index 0000000..34915e8
--- /dev/null
+++ b/src/components/FormSelect/FormSelect.css
@@ -0,0 +1,17 @@
+.c-form-select {
+ border: 1px solid var(--color-neutral-30);
+ border-radius: var(--border-radius-10);
+ box-shadow: 0px 1px 3px color(var(--color-neutral-10) alpha(10%));
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ background: url('image.svg') right 0.5rem center no-repeat;
+
+ & select {
+ border: none;
+ box-shadow: none;
+ background: transparent;
+ background-image: none;
+ -webkit-appearance: none;
+ }
+}
diff --git a/src/components/FormSelect/FormSelect.html b/src/components/FormSelect/FormSelect.html
new file mode 100644
index 0000000..1b5befc
--- /dev/null
+++ b/src/components/FormSelect/FormSelect.html
@@ -0,0 +1,9 @@
+{% macro FormSelect() %}
+
+
+
+ {{ caller() }}
+
+
+
+{% endmacro %}
diff --git a/src/components/FormSelect/example.html b/src/components/FormSelect/example.html
new file mode 100644
index 0000000..8822fc1
--- /dev/null
+++ b/src/components/FormSelect/example.html
@@ -0,0 +1,7 @@
+{% from 'components/FormSelect/FormSelect.html' import FormSelect %}
+
+{% call FormSelect() %}
+ Value 1
+ Value 2
+ Value 3
+{% endcall %}
diff --git a/src/components/FormTextarea/FormTextarea.html b/src/components/FormTextarea/FormTextarea.html
new file mode 100644
index 0000000..348344a
--- /dev/null
+++ b/src/components/FormTextarea/FormTextarea.html
@@ -0,0 +1,5 @@
+{% macro FormTextarea(placeholder='') %}
+
+
+
+{% endmacro %}
diff --git a/src/components/FormTextarea/example.html b/src/components/FormTextarea/example.html
new file mode 100644
index 0000000..62f39ac
--- /dev/null
+++ b/src/components/FormTextarea/example.html
@@ -0,0 +1,3 @@
+{% from 'components/FormTextarea/FormTextarea.html' import FormTextarea %}
+
+{% call FormTextarea(placeholder='Placeholder') %}Dit is een textarea.{% endcall %}
diff --git a/src/components/Icon/example.html b/src/components/Icon/example.html
index baee181..c5d047a 100644
--- a/src/components/Icon/example.html
+++ b/src/components/Icon/example.html
@@ -1,3 +1,3 @@
{% from 'components/Icon/Icon.html' import Icon %}
-{% call Icon(icon='printer') %}{% endcall %}
+{{ Icon(icon='printer') }}
diff --git a/src/components/Media/example.html b/src/components/Media/example.html
index c697d13..9254af7 100644
--- a/src/components/Media/example.html
+++ b/src/components/Media/example.html
@@ -1,4 +1,4 @@
{% from 'components/Media/Media.html' import Media %}
-{% call Media(type='image', url='https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Canis_lupus_laying.jpg/266px-Canis_lupus_laying.jpg', caption='My caption') %}{% endcall %}
-{% call Media(type='video', url='https://player.vimeo.com/video/155640569?title=0&byline=0&portrait=0') %}{% endcall %}
+{{ Media(type='image', url='https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Canis_lupus_laying.jpg/266px-Canis_lupus_laying.jpg', caption='My caption') }}
+{{ Media(type='video', url='https://player.vimeo.com/video/155640569?title=0&byline=0&portrait=0') }}
diff --git a/src/components/Pagination/example.html b/src/components/Pagination/example.html
index 10f901b..434e96c 100644
--- a/src/components/Pagination/example.html
+++ b/src/components/Pagination/example.html
@@ -1,3 +1,3 @@
{% from 'components/Pagination/Pagination.html' import Pagination %}
-{% call Pagination() %}{% endcall %}
+{{ Pagination() }}
diff --git a/src/layout/styleguide.html b/src/layout/styleguide.html
index e732a49..4d09874 100644
--- a/src/layout/styleguide.html
+++ b/src/layout/styleguide.html
@@ -26,7 +26,6 @@ Styleguide
Introduction
Settings
Base
- Layout
Components
Utilities
diff --git a/src/styleguide/components.html b/src/styleguide/components.html
index cf2c6bd..7b5a350 100644
--- a/src/styleguide/components.html
+++ b/src/styleguide/components.html
@@ -61,84 +61,39 @@ Pagination
{% include 'components/Pagination/example.html' %}
+ FormInput
+
+ {% include 'components/FormInput/example.html' %}
+
+ FormSelect
+
+ {% include 'components/FormSelect/example.html' %}
+
- Ok, voor het form heb je de volgende componenten:
-
- Form
- FormField
- FormInput (type=text, email, number etc etc)
- FormSelect
- FormTextarea
-
-
-
- Floated
-
-
+
FormTextarea
+
+ {% include 'components/FormTextarea/example.html' %}
+
+
+
FormRadiobutton
+
+ {% include 'components/FormRadiobutton/example.html' %}
+
+
+
FormCheckbox
+
+ {% include 'components/FormCheckbox/example.html' %}
+
+
+
FormField
+
+ {% include 'components/FormField/example.html' %}
+
+
+
Form
+
+ {% include 'components/Form/example.html' %}
{% endblock %}
diff --git a/src/styleguide/layout.html b/src/styleguide/layout.html
deleted file mode 100644
index 0d7de23..0000000
--- a/src/styleguide/layout.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% extends 'layout/styleguide.html' %}
-
-{% set page_title = 'Layout' %}
-
-{% block content %}
-
-
{{page_title}}
-
-
Grid
-
Standard
-
-
-
-
-
-
-
-{% endblock %}