Disclaimer regarding JavaScript

While Petal tries to implement many of the UI elements purely in CSS without need of JavaScript to function (checkboxes, switches, etc), some more sophisticated functions require help of JavaScript. Features demonstrated in this documentation that require JavaScript for full functionality have the Requires JavaScript label attached on section headers (example: Toggle Buttons, Buttons with Spinners, Form Validations etc.).

There are two .js files that are included in Petal repository's /js directory: jquery.fs.selecter.js and petal-functions.js.

  1. jquery.fs.selecter.js is the file forked from Selecter jQuery Plugin (by Ben Plum, MIT License). If you want to use the selectbox replacement styles provided in Petal, you will need to include the JavaScript file in your HTML as well as jQuery that the plugin is based on.

  2. petal-functions.js includes functions that make toggle buttons and dropdown menus work. This is also based on jQuery (very crudely coded—vanilla JS replacement contributions are welcome!) . If you are proficient with plain JavaScript or if you're planning to use other JavaScript frameworks, you can exclude the file altogether and write your own code to make it work with Petal-provided styles.

The Petal.js file that is shipped with Petal is a simply a concatenated file of the two files mentioned above. So in clarification, Petal is jQuery-dependent only if you are planning to use the stock provided JS files. If you are concerned about optimizing dependencies or just don't need jQuery in your project, you are free to exclude the JS files while still using Petal CSS.