Tufts Design - Example of Using Header and Footer Components

This static site has been created as an exemplary demonstration of how to utilize the tufts-header and tufts-footer components in other websites.

Requirements

To ensure the proper functioning of the site, please ensure that you have the following files:

• index.html: The main file of the site.
• header-footer.js and header-footer.js.map: Essential files containing the logic and styles of the components.
• outline.theme.css: Style file for the overall theme of the site.
• Files inside the dist folder: Include all necessary files within this folder for the site to function correctly.
• outline.fonts.css: Style file that adds the specific fonts used in the project.

It is crucial that these files maintain the same structure and location as presented in this example, as any modifications may lead to errors due to the inability to locate the files in their expected locations.

Compilation and Updates

The most important files are header-footer.js and its corresponding .js.map version. To generate and stay updated with the latest versions of these files, follow these steps:

1. Clone the tufts-design project repository.
2. Execute the yarn build command within the tufts-design project. This will automatically compile all the involved files and components, generating the new versions of header-footer.js with the latest updates.
3. After updating the JavaScript files, ensure that the template of each component in the Storybook remains unchanged. If any changes are detected, update the corresponding components in your project accordingly.
4. Also, review the content of the example menu. Modify the JSON file to update the links and names as per your requirements.

Integration into Other Websites

Once you have the updated and compiled static files, you can incorporate the tufts-header and tufts-footer components into any desired website. Simply include the header-footer.js file on your pages and use the components as demonstrated in this example.

Contact

If you have any inquiries, issues, or wish to the project, please feel free to contact us:

• Email: [[email protected]]
• Website: [https://www.phase2technology.com/]

Thank you for choosing Phase2 and experiencing the simplicity of our components to enhance your websites!