Skip to content

Refactor-draft-to-remove-bootstrap #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Refactor-draft-to-remove-bootstrap #42

wants to merge 1 commit into from

Conversation

DinneK
Copy link
Contributor

@DinneK DinneK commented Mar 26, 2025

Initial Problem:

  • form.html contains the form. USWDS does not work at the moment (see: Problems running HTML code locally formio/uswds#260) so we are temporarily using bootstrap.
  • When not using bootstrap the Formio is not defined error shows and the form in its entirety is not rendered.
  • USWDS object is undefined.

Initial Fix:

  • Bootstrap removed / commented out
  • Stylesheets and Scripts LNs: 5-15 deleted/commented out. These were causing overrides and did not allow the form to load properly.
  • Changed stylesheet and script both to formiojs@4.21.6 so both would match
  • Defer was added to script LN: 21, this prevents the script from loading until the page is parsed and allows the form to load properly

New Problem

  • Bootstrap and USWDS have different design philosophies.
  • Bootstrap: Uses a generic design framework for broad compatibility
  • USWDS: Is a specific design frame work
  • Deleting Bootstrap allows USWDS to override the initial CSS of the project.

Question:

  • How do we proceed?
    • A. We can stick with USWDS and add classes where needed
    • B. Continue to use Bootstrap

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
@DinneK DinneK added bug Something isn't working enhancement New feature or request labels Mar 26, 2025
@DinneK DinneK self-assigned this Mar 26, 2025
<link rel="stylesheet" href="css/styles.css">

<!-- Working Form.io CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.0/js/uswds.min.js" defer></script>

Check warning

Code scanning / CodeQL

Inclusion of functionality from an untrusted source Medium

Script loaded from content delivery network with no integrity check.
@natalialuzuriaga
Copy link
Contributor

Initial thoughts:

  • Did not know about defer! that is super neat
  • Ran this locally and the USWDS styles are still not being applied to the form on my end, maybe we can look into this when we meet
  • Since we'd like to reuse codejson-generator to create other forms that intake json, it might be best to stick with Bootstrap for broad compatibility. At the same time, being able to have USWDS styling for all federal forms is also ideal. Kind of torn, we can discuss more when we meet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants