GithubHelp home page GithubHelp logo

pros-pano / uswds Goto Github PK

View Code? Open in Web Editor NEW

This project forked from formio/uswds

0.0 0.0 0.0 81.69 MB

JavaScript Powered Forms for the United States Web Design System

Home Page: https://formio.github.io/uswds

License: Open Software License 3.0

Shell 0.21% JavaScript 51.54% TypeScript 5.48% CSS 4.49% HTML 7.25% Dockerfile 0.49% EJS 21.66% SCSS 8.88%

uswds's Introduction

Form.io United States Web Design System Templates

This repository will change the rendering of forms in formio.js so that it uses html and classes compatible with the United States Web Design System framework.

Usage

import uswds from '@formio/uswds';
import { Formio } from 'formiojs';
Formio.use(uswds);

Or if you would like to embed directly within your website, you can use the following.

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/css/uswds.min.css">
        <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.form.min.css">
        <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/js/uswds.min.js"></script>
        <script src="https://cdn.form.io/formiojs/formio.form.min.js"></script>
        <script src="https://cdn.form.io/uswds/uswds.min.js"></script>
    </head>
    <body>
        <div id="formio"></div>
        <script type="text/javascript">
            Formio.use(uswds);
            Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
        </script>
    </body>
</html>

You can try out this by going to the following JSFiddle - https://jsfiddle.net/travistidwell/yrwp9m24/1/

Form Builder

In addition to being a Form Renderer, you can also use this library to embed the Form.io Form Builder within your own application using the following.

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/css/uswds.min.css">
        <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
        <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/js/uswds.min.js"></script>
        <script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
        <script src="https://cdn.form.io/uswds/uswds.min.js"></script>
    </head>
    <body>
        <div id="builder"></div>
        <script type="text/javascript">
            Formio.use(uswds);
            Formio.builder(document.getElementById('builder'));
        </script>
    </body>
</html>

Example Application

For an example of how this platform works, please see the following application.

https://formio.github.io/uswds

uswds's People

Contributors

travist avatar antonsoftensity avatar alina-softensity avatar dianatsevan avatar randallknutson avatar maksimfalei avatar dependabot[bot] avatar alexeydavyd avatar olegkatuba avatar heather-formio avatar alexandraramanenka avatar mikekotikov avatar vishugowd avatar wag110894 avatar yuryrybak avatar saz33m avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.