--- title: Global Dependencies slug: global-dependencies createdAt: 2025-01-06T22:37:53.035Z --- # CSS ## Master CSS This is the core CSS used by the framework/app. **Updated: Mar 4, 2025 @ 6:42pm PST** ::File{src="https://api.archbee.com/api/presign/ekdzobNU8PAqpbk3VU6LC-GCmjlCt6m5L5R--oMGkth-20250404-180154.css" label="master.css"} ## 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. | ::File{src="https://api.archbee.com/api/presign/ekdzobNU8PAqpbk3VU6LC-cUcVfDqGssTLmuK_eXAqA-20250109-012426.css" label="normalize.css"} ::File{src="https://api.archbee.com/api/presign/ekdzobNU8PAqpbk3VU6LC-IQit7ExqYZQ83A37rb3Pw-20250109-012455.css" label="webflow.css"} ::File{src="https://api.archbee.com/api/presign/ekdzobNU8PAqpbk3VU6LC-jC9DuISMSPq-fxhJlGOO2-20250115-233115.css" label="tippy-custom.css"} ::File{src="https://api.archbee.com/api/presign/ekdzobNU8PAqpbk3VU6LC-zXX8XbR5hX004KEdqhqgA-20250122-202836.css" label="tables.css"} ::File{src="https://api.archbee.com/api/presign/ekdzobNU8PAqpbk3VU6LC-u7PeVI8SALk78tNzmiO4A-20250124-063054.css" label="datarangepicker.css"} ::File{src="https://api.archbee.com/api/presign/ekdzobNU8PAqpbk3VU6LC-7HwG8qqMwm406fnTQkSa8-20250130-065415.css" label="tabs.css"} ::File{src="https://api.archbee.com/api/presign/ekdzobNU8PAqpbk3VU6LC-0_1vzj808pJUM4c0Yx9RS-20250206-005813.css" label="wizard.css"} *** # 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 jquery\@3.5.1 | MIT | [jQuery](https://jquery.com/) | Required for animations and other functions. Included on all pages. | | validator.js | npm install validator | MIT | [Validator.js](https://github.com/validatorjs/validator.js) | Used by Global Function `validateEmail` | | dayjs | npm install dayjs | MIT | [Day.js](https://github.com/iamkun/dayjs) | Used by Global Function `formatDate` | | dayjs/plugin/utc | npm install dayjs-plugin-utc | MIT | [Day.js Plugin - UTC](https://github.com/iamkun/dayjs) | Used by Global Function `formatDate` (for UTC handling) | | dayjs/plugin/timezone | npm install dayjs-plugin-timezone | MIT | [Day.js Plugin - Timezone](https://github.com/iamkun/dayjs) | Used by Global Function `formatDate` (for timezone support) | | intl-tel-input | npm install intl-tel-input | MIT | [https://github.com/jackocnr/intl-tel-input](https://github.com/jackocnr/intl-tel-input) | Phone Input fields | | Moment.js | npm install moment | MIT | [Moment.js](https://momentjs.com/) | Required by `Date Range Picker`. Provides date manipulation and formatting. | | Date Range Picker | npm install daterangepicker | MIT | [Date Range Picker](https://www.daterangepicker.com/) | Depends on jQuery and Moment.js. Provides date range selection UI. | | daterangepicker-mods.js | See file below | | [Date Range Picker](https://www.daterangepicker.com/) | 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 | [Tippy.js](https://atomiks.github.io/tippyjs/) | Around system for simple tooltips. | | Tippy-mods.js | See file below | | [Tippy.js](https://atomiks.github.io/tippyjs/) | 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** ::File{src="https://api.archbee.com/api/presign/ekdzobNU8PAqpbk3VU6LC-xHTHw3JvBo4ywKnqvd0Cr-20250318-185824.zip" label="js.zip"}