diff --git a/.prettierignore b/.prettierignore index 584c5a9337..05160a2229 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,2 @@ # ignore html files in docs not to mess up with template formatting -docs/**/*.html +site/**/*.html diff --git a/Dockerfile b/Dockerfile index 0b46cb2709..aa39fcbac8 100644 --- a/Dockerfile +++ b/Dockerfile @@ -43,7 +43,7 @@ ENV PATH="/root/.local/bin:${PATH}" ADD . . RUN rm -rf package.json yarn.lock .babelrc webpack.config.js COPY --from=build-vanilla /srv/package.json package.json -COPY --from=build-vanilla /srv/build docs/static/build +COPY --from=build-vanilla /srv/build build # Set revision ID ARG BUILD_ID diff --git a/README.md b/README.md index cbc7ecf557..40d73966d7 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Vanilla Framework is a simple extensible CSS framework, built using [Sass](http://sass-lang.com/) and is designed to be used either directly or by using themes to extend or supplement its patterns. -[Documentation](https://docs.vanillaframework.io) | +[Documentation](https://vanillaframework.io/docs) | [Join the mailing list](http://canonical.us3.list-manage2.com/subscribe?u=56dac47c206ba0f58ec25f314&id=36f7d8394e) ## Hotlinking @@ -69,7 +69,7 @@ The simplest way to run Vanilla framework is to first [install Docker](https://d ### Viewing documentation -The documentation for the latest version of Vanilla framework is hosted at . +The documentation for the latest version of Vanilla framework is hosted at . The documentation markdown files live in the [`docs` folder](/docs), and you can view this documentation in the browser by running: diff --git a/docs/404.html b/docs/404.html deleted file mode 100644 index 53cbfa4ec7..0000000000 --- a/docs/404.html +++ /dev/null @@ -1,12 +0,0 @@ -{% extends "_layouts/default.html" %} - -{% block content %} -
-
-
-

404: Page not found

-

Sorry, we can't find the page you're looking for.
If you think this is an error on our site, please file a bug.

-
-
-
-{% endblock %} diff --git a/docs/500.html b/docs/500.html deleted file mode 100644 index b1716095cc..0000000000 --- a/docs/500.html +++ /dev/null @@ -1,12 +0,0 @@ -{% extends "_layouts/default.html" %} - -{% block content %} -
-
-
-

500: Server error

-

Something went wrong.
Please file a bug.

-
-
-
-{% endblock %} diff --git a/scss/site/_patterns_grid.scss b/scss/site/_patterns_grid.scss new file mode 100644 index 0000000000..bba5a6398e --- /dev/null +++ b/scss/site/_patterns_grid.scss @@ -0,0 +1,13 @@ +@mixin vfio-p-grid { + .mobile-col-2:nth-of-type(2n + 1) { + @media (max-width: $breakpoint-small - 1px) { + margin-left: 0; + } + } + + .tablet-col-2:nth-of-type(3n + 1) { + @media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium - 1px) { + margin-left: 0; + } + } +} diff --git a/scss/site/_patterns_icons.scss b/scss/site/_patterns_icons.scss new file mode 100644 index 0000000000..59328a927f --- /dev/null +++ b/scss/site/_patterns_icons.scss @@ -0,0 +1,37 @@ +@mixin vfio-p-icons { + .p-icon--chrome { + @extend %icon; + background-image: url('#{$assets-path}09a6a50e-vf.io-chrome.png'); + margin-right: $sph-inner; + } + + .p-icon--firefox { + @extend %icon; + background-image: url('#{$assets-path}a45d30aa-vf.io-firefox.svg'); + margin-right: $sph-inner; + } + + .p-icon--safari { + @extend %icon; + background-image: url('#{$assets-path}a030d872-vf.io-safari.svg'); + margin-right: $sph-inner; + } + + .p-icon--ie { + @extend %icon; + background-image: url('#{$assets-path}165a2220-vf.io-ie.svg'); + margin-right: $sph-inner; + } + + .p-icon--edge { + @extend %icon; + background-image: url('#{$assets-path}de0673bb-vf.io-edge.svg'); + margin-right: $sph-inner; + } + + .p-icon--opera { + @extend %icon; + background-image: url('#{$assets-path}74738acc-vf.io-opera.svg'); + margin-right: $sph-inner; + } +} diff --git a/scss/site/_patterns_syntax-highlight.scss b/scss/site/_patterns_syntax-highlight.scss new file mode 100644 index 0000000000..a58c2bf2ef --- /dev/null +++ b/scss/site/_patterns_syntax-highlight.scss @@ -0,0 +1,65 @@ +// sass-lint:disable no-color-literals class-name-format +@mixin vfio-p-syntax-highlight { + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: bold; + } + + .hljs-comment { + color: #595e62; + } + + .hljs-string { + color: #183691; + } + + .hljs-number { + color: #e95420; + } + + .hljs-name { + color: #63a35c; + } + + .hljs-selector-tag { + color: #63a35c; + } + + .hljs-link { + color: #183691; + } + + .hljs-keyword { + color: #a71d5d; + } + + .hljs-attribute { + color: #a71d5d; + } + + .hljs-attr { + color: #795da3; + } + + .hljs-built_in { + color: #77216f; + } + + .hljs-title { + color: #795da3; + } + + .hljs-section { + color: #183691; + font-weight: bold; + } + + .hljs-meta { + color: #183691; + font-weight: bold; + } +} +// sass-lint:enable no-color-literals class-name-format diff --git a/scss/site/_settings_breakpoints.scss b/scss/site/_settings_breakpoints.scss new file mode 100644 index 0000000000..fa40c8f7d8 --- /dev/null +++ b/scss/site/_settings_breakpoints.scss @@ -0,0 +1 @@ +$breakpoint-medium: 820px; diff --git a/scss/site/_settings_colors.scss b/scss/site/_settings_colors.scss new file mode 100644 index 0000000000..141a9285af --- /dev/null +++ b/scss/site/_settings_colors.scss @@ -0,0 +1 @@ +$color-brand: #111; diff --git a/scss/site/main.scss b/scss/site/main.scss new file mode 100644 index 0000000000..b297497f9c --- /dev/null +++ b/scss/site/main.scss @@ -0,0 +1,39 @@ +@charset 'utf-8'; + +// import settings +@import 'settings_breakpoints'; +@import 'settings_colors'; +$sticky-footer: true; + +// import vanilla +@import '../build'; + +@import 'patterns_syntax-highlight'; +@include vfio-p-syntax-highlight; + +@import 'patterns_icons'; +@include vfio-p-icons; + +@import 'patterns_grid'; +@include vfio-p-grid; + +$color-hero: #e95420; + +// Local website styles +.vfio-hero { + background-color: $color-hero; + background-image: url('#{$assets-path}775cc62b-vanilla-grad-background.png'); + background-position: 75% 50%; +} + +.p-list__icon--github { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='24' width='24'%3E%3Cdefs%3E%3Cpath id='a' d='M0 23.831h23.695V0H0z'/%3E%3C/defs%3E%3Cg fill-rule='evenodd' fill='none'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%23181616' mask='url%28%23b%29' d='M11.847 0C5.304 0 0 5.47 0 12.218c0 5.397 3.394 9.976 8.102 11.592.593.112.81-.265.81-.589 0-.29-.011-1.059-.017-2.078-3.295.738-3.99-1.638-3.99-1.638-.54-1.411-1.316-1.787-1.316-1.787-1.076-.758.081-.742.081-.742 1.19.086 1.815 1.259 1.815 1.259 1.057 1.867 2.773 1.327 3.448 1.015.108-.79.413-1.328.752-1.633-2.63-.309-5.397-1.357-5.397-6.039 0-1.333.462-2.423 1.22-3.278-.122-.309-.529-1.55.116-3.233 0 0 .995-.328 3.258 1.253a10.997 10.997 0 0 1 2.966-.411c1.006.004 2.02.139 2.966.41 2.262-1.58 3.255-1.252 3.255-1.252.647 1.682.24 2.924.118 3.233.759.855 1.218 1.945 1.218 3.278 0 4.694-2.77 5.727-5.41 6.029.426.377.805 1.123.805 2.263 0 1.632-.015 2.95-.015 3.351 0 .327.213.707.815.588 4.704-1.619 8.096-6.195 8.096-11.591C23.696 5.47 18.39 0 11.847 0'/%3E%3C/g%3E%3C/svg%3E"); +} + +.p-list__icon--twitter { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-9.813-5.596c-1.062.322-2.084 1.754-1.764 3.376-3.524-.213-5.08-2.1-6.017-3.003-.954 1.683.025 3.318.88 3.847-.452.025-.997-.17-1.268-.339-.103 1.552 1.163 2.628 2.24 2.907-.344.102-.668.117-1.223.034.472 1.561 1.74 1.979 2.686 2.047-1.217 1.055-2.678 1.285-4.267 1.208 4.12 2.518 8.28.969 10.305-1.008 1.7-1.659 2.461-4.144 2.487-6.368.389-.315 1.176-.985 1.39-1.51-.311.12-.925.404-1.565.43.528-.346 1.132-1.038 1.196-1.58-.585.318-1.261.594-1.84.681-1.091-1.052-2.154-1.052-3.24-.722z' fill='%231DA1F2' fill-rule='evenodd'/%3E%3C/svg%3E"); +} + +.p-list__icon--slack { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='124' viewBox='0 0 124 124'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E01E5A' d='M26.4 13.2C26.4 20.3 20.6 26.1 13.5 26.1 6.4 26.1.6 20.3.6 13.2.6 6.1 6.4.3 13.5.3L26.4.3 26.4 13.2zM32.9 13.2C32.9 6.1 38.7.3 45.8.3 52.9.3 58.7 6.1 58.7 13.2L58.7 45.5C58.7 52.6 52.9 58.4 45.8 58.4 38.7 58.4 32.9 52.6 32.9 45.5L32.9 13.2z' transform='translate(0 65)'/%3E%3Cpath fill='%2336C5F0' d='M45.8 26.4C38.7 26.4 32.9 20.6 32.9 13.5 32.9 6.4 38.7.6 45.8.6 52.9.6 58.7 6.4 58.7 13.5L58.7 26.4 45.8 26.4zM45.8 32.9C52.9 32.9 58.7 38.7 58.7 45.8 58.7 52.9 52.9 58.7 45.8 58.7L13.5 58.7C6.4 58.7.6 52.9.6 45.8.6 38.7 6.4 32.9 13.5 32.9L45.8 32.9z'/%3E%3Cpath fill='%232EB67D' d='M32.6 45.8C32.6 38.7 38.4 32.9 45.5 32.9 52.6 32.9 58.4 38.7 58.4 45.8 58.4 52.9 52.6 58.7 45.5 58.7L32.6 58.7 32.6 45.8zM26.1 45.8C26.1 52.9 20.3 58.7 13.2 58.7 6.1 58.7.3 52.9.3 45.8L.3 13.5C.3 6.4 6.1.6 13.2.6 20.3.6 26.1 6.4 26.1 13.5L26.1 45.8z' transform='translate(65)'/%3E%3Cpath fill='%23ECB22E' d='M13.2 32.6C20.3 32.6 26.1 38.4 26.1 45.5 26.1 52.6 20.3 58.4 13.2 58.4 6.1 58.4.3 52.6.3 45.5L.3 32.6 13.2 32.6zM13.2 26.1C6.1 26.1.3 20.3.3 13.2.3 6.1 6.1.3 13.2.3L45.5.3C52.6.3 58.4 6.1 58.4 13.2 58.4 20.3 52.6 26.1 45.5 26.1L13.2 26.1z' transform='translate(65 65)'/%3E%3C/g%3E%3C/svg%3E"); +} diff --git a/site/404.html b/site/404.html new file mode 100644 index 0000000000..6f142f4a18 --- /dev/null +++ b/site/404.html @@ -0,0 +1,19 @@ +{% extends "_layouts/site.html" %} + +{% block content %} +
+
+
+

404 - Page not found

+
+
+
+ +
+
+
+

Sorry, we can't find the page you're looking for. If you think this is an error on our site, please file a bug on GitHub.

+
+
+
+{% endblock %} diff --git a/site/500.html b/site/500.html new file mode 100644 index 0000000000..6fd5bf1bcb --- /dev/null +++ b/site/500.html @@ -0,0 +1,19 @@ +{% extends "_layouts/site.html" %} + +{% block content %} +
+
+
+

500 - Internal server error

+
+
+
+ +
+
+
+

Something went wrong on our end. If you have the time, please help us out by filing a bug.

+
+
+
+{% endblock %} diff --git a/docs/_layouts/default.html b/site/_layouts/default.html similarity index 60% rename from docs/_layouts/default.html rename to site/_layouts/default.html index 451944bf4e..87ae890952 100644 --- a/docs/_layouts/default.html +++ b/site/_layouts/default.html @@ -27,7 +27,7 @@
@@ -42,13 +42,13 @@ Jump to main content -
+ @@ -66,9 +66,9 @@
  • Welcome
    • @@ -76,94 +76,94 @@
  • Base elements
  • Components
  • Utilities
  • Settings
  • Resources
    • diff --git a/docs/_layouts/examples.html b/site/_layouts/examples.html similarity index 100% rename from docs/_layouts/examples.html rename to site/_layouts/examples.html diff --git a/site/_layouts/site.html b/site/_layouts/site.html new file mode 100644 index 0000000000..003df0956b --- /dev/null +++ b/site/_layouts/site.html @@ -0,0 +1,116 @@ + + + + + + {% block title %}{{ title }}{% endblock %}{% if self.title() %} | {% endif %}Vanilla framework + + + + + + + + + + + {% if self.description() %} + + {% endif %} + + + + + + + + + + + + + + + + + + {% if self.copydoc() %} + + {% endif %} + + + + + + + + {% block content %}{{ content | safe }}{% endblock content %} + +
    + + + + + + + diff --git a/site/accessibility.html b/site/accessibility.html new file mode 100644 index 0000000000..11d60d67f0 --- /dev/null +++ b/site/accessibility.html @@ -0,0 +1,100 @@ +{% extends "_layouts/site.html" %} + +{% block title %}Accessibility guidelines{% endblock %} +{% block description %}Vanilla Framework accessibility guidelines{% endblock %} +{% block copydoc %}https://docs.google.com/document/d/1_cCvuHSwS9i0pzD_4WHDFoTenVAfZVr9qGxG-rSHHGY/edit{% endblock %} + +{% block content %} +
    +
    +

    Accessibility guidelines

    +
    +
    +
    +
    +
    +

    Vanilla aims to be as inclusive as possible.

    +

    While traditionally accessibility focuses on making the web more accessible for users with permanent disabilities, a focus on accessibility can deliver an improved user experience for everyone, including those with a temporary or circumstantial disability.

    +

    Accessibility should permeate the entire design and development process, rather than being something that you only think about after everything else has been defined and implemented. You should focus on accessibility when you are:

    +
      +
    • Writing your content (whether that’s words, images, videos or any other media format)
      • +
    • Designing and building your components
      • +
    +

    While the accessibility of some of the existing Vanilla design patterns is still being improved, all new and updated patterns should meet WCAG 2.0level AA.

    +
    +
    +
    +
    +
    +
    +

    Accessibility testing

    +

    Ideally, prototypes should be tested with real users with real accessibility issues, but that is not always possible.

    +

    If you are not able to test design patterns with real users, have a look at Anne Gibson’s "Accessibility Alphabet" to consider a few real-world scenarios that might hamper a user’s accessibility. Can you improve these users’ access to content and features?

    +

    Use the following checklist to make sure your design patterns are designed and built to be accessible*:

    +
    +
    +
    +
    +
      +
    • Make sure there is enough contrast between text and its background color
      • +
    • Don't indicate important information using colour alone
      • +
    • Design focus states to help users navigate and understand where they are
      • +
    • Help users understand inputs, and help them avoid and correct mistakes
      • +
    • Write good alt text for your images
      • +
    • If an experience cannot be made accessible, create another route for users to get that information
      • +
    • Be as consistent and clear as possible in layout and copy
      • +
    • Use the correct HTML element for your content
      • +
    • Use the correct lang attribute on the html element
      • +
    • Support keyboard navigation
      • +
    • Understand and use HTML landmarks
      • +
    • Use ARIA attributes when applicable
      • +
    • Give users a way to skip top level navigation to access main content
      • +
    • Make links descriptive
      • +
    • Avoid images and iconography in pseudo-elements
      • +
    • Make SVGs accessible to assistive technology
      • +
    • Hide decorative elements from screen readers
      • +
    • Links should be visually identifiable and have clear :focus and :active states
      • +
    • HTML document should have a language attribute
      • +
    • Users should be able to navigate content using a screen reader
      • +
    • The general architecture and hierarchy of the content should make sense
      • +
    • Charts and images should all have alt-text so that users with screen readers or users on a slow connection will still be able to understand the images
      • +
    + *Adapted from Accessibility Guidelines checklist and Web Accessibility Checklist +
    +
    +
    +
    +
    +
    +

    Key WCAG documents

    +

    The amount of different documents that revolve around the WCAG 2.0 guidelines can be disorienting. These are the official W3C documents, in order of relevance, that we think you should refer to when learning about and implementing accessibility:

    +
    +
    +
    +
      +
    • WCAG 2.0: the W3C standard, includes principles, guidelines and success criteria
      • +
    • Understanding WCAG 2.0: detailed reference, includes intent, benefits to people with disabilities, examples, resources and techniques
      • +
    • How to Meet WCAG 2.0: a customisable quick reference, includes guidelines, success criteria and techniques
      • +
    • Techniques for WCAG 2.0: instructions for developers, includes browser and assistive technology support notes, examples, code, resources and test procedures
      • +
    +
    +
    +
    +
    +
    +

    Useful tools

    +

    The web is abundant in tools that help to create and test for accessible sites. These are a few of the ones we consider the best and most useful ones:

    +
    +
    +
    + +

    If you think we could improve Vanilla’s accessibility in any way, let us know by filing an issue on GitHub.

    +
    +
    +{% endblock %} diff --git a/site/browser-support.html b/site/browser-support.html new file mode 100644 index 0000000000..091b2139ab --- /dev/null +++ b/site/browser-support.html @@ -0,0 +1,48 @@ +{% extends "_layouts/site.html" %} + +{% block title %}Browser support{% endblock %} +{% block description %}Vanilla Framework browser support{% endblock %} +{% block copydoc %}https://docs.google.com/document/d/1flcSinNnjOJw88ooVQfUjQW8ZDHSXOe2cTHmgwIEx6I/edit{% endblock %} + + +{% block content %} +
    +
    +

    Browser support

    +
    +
    +
    +
    +
    +

    Vanilla framework follows the principles of progressive enhancement and web standards. Users should be able to access core content and functionality from any browser or operating system, with varying degrees of access to visual and other enhancements — design components do not have to look exactly the same on every browser.

    +
    +
    +
    +
    +
    +
    +

    Bugs and prioritisation

    +
      +
    • If the bug prevents access to core content (for example, by hiding it or covering it), it should be prioritised
      • +
    • If the bug relates to visual differences that do not affect access to content on modern browsers, it should be queued up
      • +
    • Priority level should be determined case by case
      • +
    • If the bug relates to visual differences that do not affect access to content on old browsers, it should be deprioritised
      • +
    +
    +
    +
    +
    +

    Supported browsers

    +

    The following are the browsers that we actively test all components on. That does not mean other browsers are not supported or that bugs reported are not acted on.

    +
      +
    • Chrome 62 or greater
      • +
    • Firefox 56 or greater
      • +
    • Safari 11 or greater
      • +
    • IE 11 or greater
      • +
    • Edge 16 or greater
      • +
    • Opera 48 or greater
      • +
    +
    +
    +
    +{% endblock %} diff --git a/site/contribute.html b/site/contribute.html new file mode 100644 index 0000000000..44d3e1b236 --- /dev/null +++ b/site/contribute.html @@ -0,0 +1,119 @@ +{% extends "_layouts/site.html" %} + +{% block title %}Contribute{% endblock %} +{% block description %}Vanilla Framework contribution guidelines{% endblock %} +{% block copydoc %}https://docs.google.com/document/d/1FIYkjR9Xu6Or0WUCi6EQGaZsiTq8ESk8Kv39CW4kkwo/edit{% endblock %} + +{% block content %} +
    +
    +

    Contribute

    +
    +
    +
    +
    +

    Meet the team

    +
    +
    +
    +
    +
    + +

    anthonydillon

    +
    +

    Lead Web Developer

    +
    +
    +
    +
    +
    + +

    kwm14

    +
    +

    Lead Visual Designer

    +
    +
    +
    +
    +
    + +

    deadlight

    +
    +

    Web Developer

    +
    +
    +
    +
    +
    + +

    lyubomir-popov

    +
    +

    Senior Visual Designer

    +
    +
    +
    +
    +
    +
    +

    Contribute

    +
    +
    +
    +

    When submitting a new issue, please check that it hasn't already been raised by someone else. We've provided a template for new issues which will help you structure your issue to ensure it can be picked up and actioned easily.

    +

    Please provide as much information possible detailing what you're currently experiencing and what you'd expect to experience.

    +

    To work on an issue, please fork this repo and create a new branch on your local fork. When you're happy and would like to propose that changeset to be merged back upstream, open a pull request to merge from your local origin/master to upstream/master.

    +

    When committing changes, make sure to group related changes so that the project is always in a working state. Use succinct yet descriptive commit messages to allow for easy reading of the commit log.

    +
    +
    +
    +
    +

    Guidelines

    +

    We follow two guideline documents that align with the practices that the Canonical Web Team follows across all projects. +

    +
    +
    +
    +
    +

    File a bug

    +

    We use GitHub issues to track all our bugs and feature requests.

    +
    +
    +

    Chat with us

    +

    Find out about new releases, latest features and get help on Twitter.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +

    Running tests locally

    +
    +
    +

    The simplest way to run Vanilla framework is to first install Docker, and then use the ./run script to build the site. Before proposing a pull request, ensure that the tests pass on your local fork. To kick off the tests for your project, in the terminal ./run test.

    +
    +
    +
    +
    + +

    Licences

    +
    +
    +

    The content of this project is licensed under the Creative Commons Attribution-ShareAlike 4.0 International license, and the underlying code used to format and display that content is licensed under the LGPLv3 by Canonical Ltd.

    +
    +
    +
    +{% endblock %} diff --git a/docs/base/code.md b/site/docs/base/code.md similarity index 85% rename from docs/base/code.md rename to site/docs/base/code.md index 774a5c5638..c39b23f59a 100644 --- a/docs/base/code.md +++ b/site/docs/base/code.md @@ -18,7 +18,7 @@ When you refer to code inline with other text, use the <code> ta If you want to refer to a larger piece of code, use <pre> together with the <code> tag. - + View example of the base code block @@ -41,7 +41,7 @@ This component should be used when displaying a single line of code, accompanied
    - + View example of the code copyable pattern @@ -53,7 +53,7 @@ Please copy the entire JS in the example, for copy to clipboard functionality. The code numbered pattern can be used when displaying large blocks of code to enable users to quickly reference a specific line. - + View example of the code numbered pattern @@ -69,7 +69,7 @@ To import just code copyable or numbered component into your project, copy eithe @import 'patterns_code-numbered'; ``` -For more information see [Customising Vanilla](/customising-vanilla/) in your projects, which includes overrides and importing instructions. +For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions. ### Design diff --git a/docs/base/forms.md b/site/docs/base/forms.md similarity index 80% rename from docs/base/forms.md rename to site/docs/base/forms.md index 094960f72d..e3a9955866 100644 --- a/docs/base/forms.md +++ b/site/docs/base/forms.md @@ -10,7 +10,7 @@ context: Form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the `` parent element. - + View example of a base form @@ -18,7 +18,7 @@ View example of a base form An input field where the user can enter data, which can vary in many ways, depending on the type attribute. - + View example of an input element @@ -30,7 +30,7 @@ We support all HTML5 input types: `text`, `password`, `datetime`, `datetime-loca The `