the-one-true-form

Link to external css:

Usage no npm install needed!

<script type="module">
  import theOneTrueForm from 'https://cdn.skypack.dev/the-one-true-form';
</script>

README

OneTrueForm

Basic Usage

CSS

Link to external css:

<link rel="stylesheet" href="css/onetrueform.css">

Optional: Project specific css can be added to a provide file to keep the main CSS form clean:

<link rel="stylesheet" href="css/onetrueform-custom.css">

Markup

<div id="oneTrueForm" class="[vertical/horizontal] [no-content]">
    <div class="content">
        <div class="section">
            Content Area
        </div>
    </div>
    <div class="form">
        <div class="section-container">
            <div class="section">
                <h3>Section 1</h3>
            </div>
        </div>
        <div class="section-container">
            <div class="section">
                <h3>Section 2</h3>
            </div>
        </div>
        <div class="section-container">
            <div class="section">
                <h3>Section 3</h3>
            </div>
        </div>
    </div>
</div>
Customization with Classes
<div id="oneTrueForm" class="[vertical/horizontal] [no-content]">
Required Vertical or Horizontal Class

Either .vertical or .horizontal is required and specifies if a vertical or horiztonal layout will be used.

Optional No Content Class

Optionally a .no-content class may be added. This adjusts the layout to account for an implementation without a content area. If this flag is used it is reccomended you do not include the .content div, however, if a .content div is present this class will force it to be hidden

General Layout

Vertical Layout

Window Width Greater than 768px

  • OneTrueForm Container: 100% of parent
    • Left (form) column: 33% of parent
    • Right (content) column: 66% of parent

Window Width Less than 768px (tablet to mobile)

  • OneTrueForm Container: 100% of parent
    • Top (content) column: 100% of parent
    • Bottom (form) column: 100% of parent
Vertical Layout without Content

Window Width Greater than 768px

  • OneTrueForm Container: 33% of parent
    • Left (form) column: 100% of parent

Window Width Less than 768px (tablet to mobile)

  • OneTrueForm Container: 100% of parent
    • Left (form) column: 100% of parent
Horiztonal Layout

Window Width Greater than 768px

  • OneTrueForm Container: 100% of parent
    • Top (content) column: 100% of parent
    • Bottom (form) column: 100% of parent

Window Width Less than 768px (tablet to mobile)

  • OneTrueForm Container: 100% of parent
    • Top (content) column: 100% of parent
    • Bottom (form) column: 100% of parent

Advanced Usage

SASS Variables

$breakpoint-tablet: 768px;

Breakpoint for tablet down to mobile views

$vertical-form-width: 33%;

Releavant to vertical forms only. This is the width of form section for vertical form. Content width is calculated from this. If .no-content class is used the entire oneTrueForm container will become with width.