https://github.com/netzstrategen/bacon-gravityforms

netzstrategen 'reset' library for Gravity Forms styling. To be used in conjunction with Bacon.
https://github.com/netzstrategen/bacon-gravityforms

Last synced: 3 months ago
JSON representation

netzstrategen 'reset' library for Gravity Forms styling. To be used in conjunction with Bacon.

• Host: GitHub
• URL: https://github.com/netzstrategen/bacon-gravityforms
• Owner: netzstrategen
• Created: 2020-09-02T14:58:25.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-04T16:17:33.000Z (over 4 years ago)
• Last Synced: 2024-04-29T15:05:21.750Z (about 1 year ago)
• Language: SCSS
• Size: 13.7 KB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Bacon + Gravity Forms library

'Reset' CSS library for use with [Bacon](https://github.com/netzstrategen/bacon) and WordPress Gravity Forms plugin.

## Why?

Gravity Forms includes opinionated styling by default which must nearly always be overridden to match the project form styling. In addition, this Gravity Forms CSS is of poor quality and requires highly specific selectors to override.

The goal of this library is to 'reset' Gravity Forms so that only the required layout styling from Gravity Forms is applied. Form element styling will then be applied automatically by Bacon (which is a hard dependency of this library).

## Installation and usage

- Ensure your project is using [Bacon](https://github.com/netzstrategen/bacon)

- `npm i @netzstrategen/bacon-gravityforms`

- Include via `@import '~@netzstrategen/bacon-gravityforms'` directly after Bacon (note that this syntax is from [`sass-module-importer`](https://github.com/lucasmotta/sass-module-importer) which is included in most netzstrategen projects via [`gulp-task-collection`](https://github.com/netzstrategen/gulp-task-collection))

### Required changes in PHP

This library requires some minor markup changes which can be done via Gravity Forms filters. Include the following class in the WordPress install (preferably in somewhere like `theme/src/GravityForms.php`). This code will:

- Dequeue Gravity Forms default stylesheets

- Add a hookable class to the wrapping `` tag

- Change checkbox and radio button markup to match that required by Bacon

```

get_input_type() == 'radio' || $field->get_input_type() == 'checkbox') {

      // Get wrapping 
, input element and label text.

      preg_match('@
]*>@', $choice_markup, $wrapper_matches);

      preg_match('@]*>@', $choice_markup, $input_matches);

      preg_match('@(.*)<\/label>@', $choice_markup, $label_matches);


      if (!empty($wrapper_matches) && !empty($input_matches) && !empty($label_matches)) {

        // Get wrapping 
 element.

        $opening_wrapper = $wrapper_matches[0];


        // Get label text.

        $label = $label_matches[1];

        // Get entire  element.

        $input = $input_matches[0];

        // Build new Bacon markup.

        $new_markup = $opening_wrapper;

        $new_markup .= '';

        $new_markup .= $input;

        $new_markup .= '';

        $new_markup .= '' . $label . '';

        $new_markup .= '';

        $new_markup .= '
';


        return $new_markup;

      }

    }

    return $choice_markup;

  }

}

```

## Troubleshooting

It is known that not all layout CSS has been moved into this library from the Gravity Forms stylesheet.

It is also known that this library may require updating from time-to-time dependent on changes made to the Gravity Forms plugin.

If you encounter missing or incomplete layout CSS then first check the primary Gravity Forms stylesheet (located at `plugins/gravityforms/css/formsmain.css`) and secondary stylesheets and copy any relevant CSS into the `Base Gravity Forms fields layout` section of [_bacon-gravityforms.scss_](https://github.com/netzstrategen/bacon-gravityforms/blob/master/_bacon-gravityforms.scss).