diff --git a/pages/_docs/form-helpers.md b/pages/_docs/form-helpers.md index d31f6d9da..2ab38a048 100644 --- a/pages/_docs/form-helpers.md +++ b/pages/_docs/form-helpers.md @@ -1,10 +1,13 @@ --- title: Form helpers +description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear. --- ## Input help +Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. + {% capture code %} ? {% endcapture %} diff --git a/pages/_docs/input-mask.md b/pages/_docs/input-mask.md index 18b373503..511107c86 100644 --- a/pages/_docs/input-mask.md +++ b/pages/_docs/input-mask.md @@ -1,10 +1,13 @@ --- title: Input mask +description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors. --- ## Default markup +Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion. + {% capture code %} {% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %} diff --git a/pages/_docs/tables.md b/pages/_docs/tables.md index 5623c0e01..14a2d7c02 100644 --- a/pages/_docs/tables.md +++ b/pages/_docs/tables.md @@ -1,13 +1,14 @@ --- title: Tables menu: docs.tables +description: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity. bootstrap-link: content/tables/ --- ## Basic Table -A basic Bootstrap table has a light padding and only horizontal dividers. +The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwheling them with visuals. The `.table` class adds basic styling to a table: @@ -17,10 +18,9 @@ The `.table` class adds basic styling to a table: {% include example.html code=code %} - ## Responsive tables -Across each breakpoint, use `.table-responsive` class for horizontal scrolling tables. Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a specific breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. +Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally. {% capture code %} @@ -48,7 +48,7 @@ Across each breakpoint, use `.table-responsive` class for horizontal scrolling t ## No wrap -Prevents table cell content from wrapping to another line. +If you don't want the table cell content to wrap to another line, use the `table-nowrap` class. {% capture code %} {% include ui/table.html nowrap=true responsive=true %} diff --git a/pages/_docs/typography.md b/pages/_docs/typography.md index 207b748d7..c2f258ab5 100644 --- a/pages/_docs/typography.md +++ b/pages/_docs/typography.md @@ -1,13 +1,15 @@ --- title: Typography menu: docs.typography -description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. +description: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website. bootstrap-link: content/typography/ --- ## Headings +Use HTML headings to organize content on your website and make the structure clear and user-friendly. + {% capture code %} {% for i in (1..6) %}H{{ i }} Heading {% endfor %} @@ -17,6 +19,8 @@ bootstrap-link: content/typography/ ## Paragraphs +Organize longer pieces of text into paragraphs using the `p` tag. + {% capture code %}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum.

@@ -26,6 +30,8 @@ bootstrap-link: content/typography/ ## Semantic text elements +Use a variety of semantic text elements, depending of how you want to display particular fragments of content. + {% capture code %} I18N{% hide %} abbr
{% endhide %} Bold{% hide %} strongb
{% endhide %} @@ -50,6 +56,8 @@ Text Superscripted{% hide %} sup
{% end ## Horizontal rules +Use the `hr` tag to represent a thematic break between paragraphs within one section. + {% capture code %}
{% endcapture %} @@ -58,6 +66,8 @@ Text Superscripted{% hide %} sup
{% end ## Horizontal rules with label +You can also add a label to a horizontal rule and align it as you see fit. + {% capture code %}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @@ -86,7 +96,7 @@ Text Superscripted{% hide %} sup
{% end ## Optimized for different alphabets -Tabler has been optimized to correctly display content in any language. The Tabler supports most Asian, African and Middle Eastern languages. +Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages. {% capture code %}

Chinese
@@ -124,7 +134,7 @@ Tabler has been optimized to correctly display content in any language. The Tabl ## Text transform -Transform text in components with text capitalization classes. +Transform the content of components with text capitalization classes. {% capture code %}

Lowercased text.

@@ -136,7 +146,7 @@ Transform text in components with text capitalization classes. ## Letter spacing -Utilities for controlling the tracking (letter spacing) of an element. +Control the tracking (letter spacing) of an element and make it tight, wide or normal. {% capture code %}

Lorem ipsum dolor sit amet. Tight letter spacing.

@@ -146,9 +156,9 @@ Utilities for controlling the tracking (letter spacing) of an element. {% include example.html code=code %} -## Line Height +## Line height -Utilities for controlling the leading (line height) of an element. +Control the leading (line height) of an element. {% capture code %}

Lorem ipsum dolor sit amet.
Dolor sit amet.

@@ -161,9 +171,9 @@ Utilities for controlling the leading (line height) of an element. ## Antialiasing -Utilities for controlling the font smoothing of an element. +Control the font smoothing of an element. -Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` render without antialiasing. +Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing. {% capture code %}
Text with antialiasing
@@ -174,7 +184,7 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use ## Markdown elements -When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag. +If you can't use the CSS classes you want or if you just want to use HTML tags, use the `.markdown` class in a container. It can handle almost any HTML tag. {% capture code %}