Global Dependencies
CSS
Master CSS
This is the core CSS used by the framework/app.
Updated: Mar 4, 2025 @ 6:42pm PST
Additional CSS
In addition to our projects CSS, we also need to include these other CSS files. None of these should be edited.
File | Install Command / Implementation | Description |
|---|---|---|
normalize.css | See File Below | Normalize.css is used to standardize browser styling and ensure consistent behavior across different web browsers. By providing a set of default styles, it removes discrepancies in how browsers render elements, such as margins, font sizes, and other basic properties. This stylesheet also addresses browser-specific quirks, particularly for older browsers like Internet Explorer, ensuring better compatibility and a solid foundation for custom styling. Its inclusion is essential for creating predictable and uniform design experiences across all platforms. |
webflow.css | See File Below | Webflow.css is a specialized stylesheet designed to support projects built with Webflow. It ensures that Webflow-generated components, elements, and animations render consistently across browsers. This file not only provides styling for Webflow-specific classes, icons, and widgets but also supports responsive layouts and breakpoints defined within the Webflow visual editor. Additionally, Webflow.css is critical for implementing smooth, cross-browser animations and interactions, leveraging Webflow’s built-in animation engine for reliable and visually appealing effects. Its integration streamlines the use of Webflow features like sliders, forms, and lightboxes while maintaining design integrity and cross-platform compatibility. |
tippy-custom.css | See File Below | Custom CSS for Tippy.js the tooltip we are using. |
tables.css | See File Below | Custom CSS for tables |
daterangepicker.css | See File Below | Custom CSS for Date Picker we are using. |
Scripts & Libraries
Module | Install Command / Implementation | License | Project URL | Used By |
|---|---|---|---|---|
webflow.js | See File Below | MIT | | Many elements and animations accross the app. This should not be edited. |
jQuery 3.5.1 | npm install [email protected] | MIT | Required for animations and other functions. Included on all pages. | |
validator.js | npm install validator | MIT | Used by Global Function validateEmail | |
dayjs | npm install dayjs | MIT | Used by Global Function formatDate | |
dayjs/plugin/utc | npm install dayjs-plugin-utc | MIT | Used by Global Function formatDate (for UTC handling) | |
dayjs/plugin/timezone | npm install dayjs-plugin-timezone | MIT | Used by Global Function formatDate (for timezone support) | |
intl-tel-input | npm install intl-tel-input | MIT | Phone Input fields | |
Moment.js | npm install moment | MIT | Required by Date Range Picker. Provides date manipulation and formatting. | |
Date Range Picker | npm install daterangepicker | MIT | Depends on jQuery and Moment.js. Provides date range selection UI. | |
daterangepicker-mods.js | See file below | | Customizes Date Range Picker to use our CSS and applies it automatically to fields with the right properties. | |
Tippy.js (Install) | npm install tippy.js | MIT | Around system for simple tooltips. | |
Tippy-mods.js | See file below | | Sets defaults and integrates our CSS with Tippy | |
dropdown-filter.js | See file below | | | Adds text filtering to dropdowns and workspace picker with the filter field. |
phone-input.js | See file below | | | Automatically handles phone input styling, formating and validation. Applies to inputs with type=tel |
star-rating.js | See file below | | | Generates star ratings (x out of 5) dynamically generating SVGs. uses our CSS. |
progressbar-variable-color.js | See file below | | | If a progress bar has the variable color modifier class, it gets colored variably based on its % of competion. Colorway pulled from CSS. Can also be reversed. (for situations where low is better such as resource usage like storage or memory) |
button-wait.js | See file below | | | Adds a loading spinner and disables further interactions when a button with the data-wait attribute is clicked, preventing multiple clicks and providing visual feedback. |
2fa-input | See file below | | | Adds a special input type for 2FA codes which includes special formating, input restrictions, supports keyboard input, allows paste from clipboard, and allows autfill from email/messages. |
Script Files
The following includes the latest build of the .js files needed for the framework.
Updated: March 18, 2025 @ 11:40am PST