From 9246295721d4dd33cb1be8e5d459ec236e7080a8 Mon Sep 17 00:00:00 2001 From: codecalm Date: Wed, 17 Feb 2021 22:38:56 +0100 Subject: [PATCH] form demos --- src/pages/_data/docs.yml | 15 ++++ src/pages/_docs/form-color-check.md | 21 +++++ src/pages/_docs/form-elements.md | 80 ------------------- src/pages/_docs/form-fieldset.md | 11 +++ src/pages/_docs/form-image-check.md | 17 ++++ src/pages/_docs/form-selectboxes.md | 23 ++++++ src/pages/_docs/form-validation.md | 20 +++++ src/pages/_includes/parts/form/fieldset.html | 6 +- .../parts/form/input-image-people.html | 18 +++++ 9 files changed, 128 insertions(+), 83 deletions(-) create mode 100644 src/pages/_docs/form-color-check.md create mode 100644 src/pages/_docs/form-fieldset.md create mode 100644 src/pages/_docs/form-image-check.md create mode 100644 src/pages/_docs/form-selectboxes.md create mode 100644 src/pages/_docs/form-validation.md create mode 100644 src/pages/_includes/parts/form/input-image-people.html diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml index a25b902d2..63a654221 100644 --- a/src/pages/_data/docs.yml +++ b/src/pages/_data/docs.yml @@ -37,6 +37,21 @@ forms: form-helpers: title: Form helpers url: docs/form-helpers.html + validation-states: + title: Validation states + url: docs/form-validation.html + image-check: + title: Image check + url: docs/form-image-check.html + color-check: + title: Color check + url: docs/form-color-check.html + selectboxes: + title: Form selectboxes + url: docs/form-selectboxes.html + fieldset: + title: Form fieldset + url: docs/form-fieldset.html components: diff --git a/src/pages/_docs/form-color-check.md b/src/pages/_docs/form-color-check.md new file mode 100644 index 000000000..d17936d42 --- /dev/null +++ b/src/pages/_docs/form-color-check.md @@ -0,0 +1,21 @@ +--- +title: Color check +menu: docs.forms.color-check +--- + +Your input controls can come in a variety of colors, depending on your preferences. Click [here]({% docs_url colors %}) to see the list of available colors. + +{% capture code %} +{% include parts/form/input-color.html %} +{% endcapture %} +{% include example.html code=code %} + + +## Input color picker + +Add an color picker to your form to let users customise it according to their preferences. + +{% capture code %} +{% include parts/form/input-colorpicker.html %} +{% endcapture %} +{% include example.html code=code %} \ No newline at end of file diff --git a/src/pages/_docs/form-elements.md b/src/pages/_docs/form-elements.md index b59500ccd..37c25aa90 100644 --- a/src/pages/_docs/form-elements.md +++ b/src/pages/_docs/form-elements.md @@ -79,26 +79,6 @@ Add one of the available selects - either a dropdown or a multiple choice select {% include example.html code=code %} -## Validation states - -To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect. - -{% capture code %} -{% include parts/form/validation-states.html %} -{% endcapture %} -{% include example.html code=code %} - - -### Subtle validation states - -If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback. - -{% capture code %} -{% include parts/form/validation-states.html lite=true %} -{% endcapture %} -{% include example.html code=code %} - - ## Input size Choose the size of an input control that will go well with your form design. Apart from the default size, you can also use small and large input controls. @@ -109,35 +89,6 @@ Choose the size of an input control that will go well with your form design. Apa {% include example.html code=code %} -## Image check - -Add an image check to your form and give users visually attractive options to choose from. - -{% capture code %} -{% include parts/form/input-image.html %} -{% endcapture %} -{% include example.html code=code max-width="25rem" %} - - -## Input color - -Your input controls can come in a variety of colors, depending on your preferences. Click [here]({% docs_url colors %}) to see the list of available colors. - -{% capture code %} -{% include parts/form/input-color.html %} -{% endcapture %} -{% include example.html code=code %} - - -## Input color picker - -Add an color picker to your form to let users customise it according to their preferences. - -{% capture code %} -{% include parts/form/input-colorpicker.html %} -{% endcapture %} -{% include example.html code=code %} - ## Datalists @@ -149,27 +100,6 @@ Use the ``datalist`` element to add an autocomplete feature to your input contro {% include example.html code=code %} -## Custom selectboxes - -Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design. - -{% capture code %} -{% include parts/form/input-selectgroups.html %} -{% endcapture %} -{% include example.html code=code %} - - -## Advanced selectboxes - -Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options. - -{% capture code %} -{% include parts/form/selectgroup-payments.html %} -{% include parts/form/selectgroup-project-manager.html %} -{% endcapture %} -{% include example.html code=code %} - - ## Toggle switches Use toggle switches for the elements of your form which require choosing between two opposing states. @@ -213,16 +143,6 @@ Add a range slider to make it possible for users to set a value or range, such a {% include example.html code=code %} -## Fieldset - -Group parts of your form to make it well-structured and clearer for users, using the ``fieldset`` element. - -{% capture code %} -{% include parts/form/fieldset.html %} -{% endcapture %} -{% include example.html code=code %} - - ## Input group Create a group of input controls and place add-ons on either side of an input. diff --git a/src/pages/_docs/form-fieldset.md b/src/pages/_docs/form-fieldset.md new file mode 100644 index 000000000..8777ca9c6 --- /dev/null +++ b/src/pages/_docs/form-fieldset.md @@ -0,0 +1,11 @@ +--- +title: Form fieldset +menu: docs.forms.fieldset +--- + +Group parts of your form to make it well-structured and clearer for users, using the ``fieldset`` element. + +{% capture code %} +{% include parts/form/fieldset.html %} +{% endcapture %} +{% include example.html code=code %} \ No newline at end of file diff --git a/src/pages/_docs/form-image-check.md b/src/pages/_docs/form-image-check.md new file mode 100644 index 000000000..21090d97b --- /dev/null +++ b/src/pages/_docs/form-image-check.md @@ -0,0 +1,17 @@ +--- +title: Image check +menu: docs.forms.image-check +--- + +Add an image check to your form and give users visually attractive options to choose from. + +{% capture code %} +{% include parts/form/input-image.html %} +{% endcapture %} +{% include example.html code=code max-width="25rem" %} + + +{% capture code %} +{% include parts/form/input-image-people.html %} +{% endcapture %} +{% include example.html code=code %} diff --git a/src/pages/_docs/form-selectboxes.md b/src/pages/_docs/form-selectboxes.md new file mode 100644 index 000000000..552c346a4 --- /dev/null +++ b/src/pages/_docs/form-selectboxes.md @@ -0,0 +1,23 @@ +--- +title: Form selectboxes +menu: docs.forms.selectboxes +--- + +Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design. + +{% capture code %} +{% include parts/form/input-selectgroups.html %} +{% endcapture %} +{% include example.html code=code %} + + +## Advanced selectboxes + +Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options. + +{% capture code %} +{% include parts/form/selectgroup-payments.html %} +{% include parts/form/selectgroup-project-manager.html %} +{% endcapture %} +{% include example.html code=code %} + diff --git a/src/pages/_docs/form-validation.md b/src/pages/_docs/form-validation.md new file mode 100644 index 000000000..3c2248544 --- /dev/null +++ b/src/pages/_docs/form-validation.md @@ -0,0 +1,20 @@ +--- +title: Validation states +menu: docs.forms.validation-states +description: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect. +--- + +{% capture code %} +{% include parts/form/validation-states.html %} +{% endcapture %} +{% include example.html code=code %} + + +## Subtle validation states + +If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback. + +{% capture code %} +{% include parts/form/validation-states.html lite=true %} +{% endcapture %} +{% include example.html code=code %} \ No newline at end of file diff --git a/src/pages/_includes/parts/form/fieldset.html b/src/pages/_includes/parts/form/fieldset.html index 14d084212..efc6bb318 100644 --- a/src/pages/_includes/parts/form/fieldset.html +++ b/src/pages/_includes/parts/form/fieldset.html @@ -15,8 +15,8 @@ -
+
+ I agree to the Terms & Conditions + diff --git a/src/pages/_includes/parts/form/input-image-people.html b/src/pages/_includes/parts/form/input-image-people.html new file mode 100644 index 000000000..8497ef50c --- /dev/null +++ b/src/pages/_includes/parts/form/input-image-people.html @@ -0,0 +1,18 @@ +{% assign limit = include.limit | default: 9 %} +
+ +
+ {% for person in site.data.people limit: limit offset: 8 %} +
+ +
+ {% endfor %} +
+