README

Formalism is a set of form components that deliver an amazing user experience with styles that can be customised to make it your own.

This plugin provides a range of functions to help create the HTML markup required for Formalism.

Formalism Craft creates the HTML and the styles are added from our separate npm package.

Freeform integration

Formalism is form agnostic but if you'd like to integrate it with Freeform, please read the integration notes.

Usage

Once you've got Formalism setup, you can create a basic input component in Twig with the following function:

{{ craft.formalism.input({
    label: 'Full Name',
    name: 'fullName',
    isRequired: true,
}) }}

This markup will be generated:

<div class="f-input f-input--outlined" data-field-container>
    <label class="f-input__inner" for="input150">
      <input class="f-input__field" type="text" id="input150" name="fullName" value="" required="required" data-field>
      <span class="f-input__label">
          <span class="f-input__label-text">Full Name</span>
      </span>
      <span class="f-input__indicator f-input__indicator--required" aria-hidden="true">*</span>
    </label>
</div>

After importing the input base and theme file:

@import 'formalism/input/base';
@import 'formalism/input/outlined';

There's plenty more field components like button, checkbox, checkboxGroup, date, file, input, radio, radioGroup, search, submit, switcher and textarea.

Features

Less JavaScript, more CSS
Custom theme friendly
Zero dependencies
Small file size
Supports style scoping
Honors the reduced motion system feature
Removes off-brand <input> autofill colors
Removes mobile tap colors

Requirements

This plugin requires Craft CMS 3.0.0-beta.23 or later.

Installation

Plugin installation

Open your terminal and go to your Craft project:
```
 cd /path/to/project
```

Then tell Composer to load the plugin:

 composer require burgerbuds/formalism-craft

In the Control Panel, go to Settings → Plugins and click the “Install” button for Formalism.

Styles installation

To style the field components, install the npm package:

npm install formalism

Import the fields styles into your project. Here we're using the 'outlined' theme style for all of our fields.

Together these styles are only 5.66 kB (gzipped).

@import 'formalism/checkbox/base';
@import 'formalism/checkbox/outlined';

@import 'formalism/file/base';
@import 'formalism/file/outlined';

@import 'formalism/input/base';
@import 'formalism/input/outlined';

@import 'formalism/radio/base';
@import 'formalism/radio/outlined';

@import 'formalism/select/base';
@import 'formalism/select/outlined';

@import 'formalism/textarea/base';
@import 'formalism/textarea/outlined';

@import 'formalism/fieldset/base';
@import 'formalism/fieldset/outlined';

@import 'formalism/search/base';
@import 'formalism/search/outlined';

Links and plugs

Swiff - A CLI app that makes working with a staging server easy-as-pie
Simple - An Australian agency creating Craft websites

burgerbuds / formalism-craft

Maintainers

Details