Frontend Responsive Framework Research: Bootstrap - tawana0518/mywebclass-simulation GitHub Wiki

Bootstrap is a popular open-source CSS framework that makes it easy to build responsive, mobile-first websites. This wiki page will provide an overview of how Bootstrap is implemented in our project, along with links to relevant resources for a deeper understanding.

The current implementation of Bootstrap in MyWebClass is based on the index.html, main.js, and styles.scss files provided. Here's an overview of the Bootstrap usage within these files:

1. index.html:

• The Bootstrap CSS is imported via the styles.scss file and not directly linked in the index.html file.
• The Bootstrap JavaScript components are imported in the main.js file.
• The website's structure utilizes the Bootstrap grid system with containers, rows, and columns.
• A responsive navigation bar with Bootstrap classes is implemented, including the navbar, navbar-brand, navbar-toggler, and other relevant classes.
• The main content area and footer also leverage Bootstrap classes, such as container, row, col, and py-5.

2. main.js:

• The Bootstrap components are imported at the beginning of the file with the following lines: import { Modal } from 'bootstrap' import * as bootstrap from 'bootstrap'
• A Bootstrap Modal is utilized for the Privacy Policy pop-up, with the Modal class being used to create and manage the modal instance.

3. styles.scss:

• The Bootstrap SCSS is imported at the beginning of the file with the following line:

@import '~bootstrap/scss/bootstrap';

• This import allows the use of Bootstrap classes and components throughout the project's styles.

In summary, the current implementation of Bootstrap in MyWebClass involves importing the necessary Bootstrap assets and using the framework's predefined classes to structure and style the website. The grid system, navigation bar, and modal components are employed to create a responsive design that adapts to different screen sizes and devices.

To learn more about Bootstrap and its features, consult the official Bootstrap documentation. This resource provides in-depth explanations and examples of how to use the grid system, components, and utility classes.

The following recommendations aim to improve the current implementation and overall responsiveness of the MyWebClass website. By customizing Bootstrap, using responsive utility classes, leveraging more Bootstrap components, and optimizing images and media, we can enhance the user experience and ensure that the MyWebClass website adapts well to different screen sizes and devices.

• Customize Bootstrap: Create a custom SCSS file to override Bootstrap's default variables and styles. This will help you tailor the design to your project's needs while maintaining the benefits of the Bootstrap framework.
• Use responsive utility classes: Utilize responsive utility classes to show, hide, or adjust the styling of elements based on screen size.
• Leverage more Bootstrap components: Explore and integrate additional Bootstrap components like cards, accordions, and carousels to improve the user interface and interactivity of your website.
• Optimize images and media: To ensure optimal performance on various devices, use responsive images and media elements with the img-fluid, embed-responsive, and other related classes provided by Bootstrap.

Positive Test Cases:

• Test whether the website has proper aria-* attributes for relevant elements.
• Test whether the website uses semantic HTML tags (e.g., , , , ).
• Test whether keyboard navigation works correctly on the website, including focus states and tab order.

Negative Test Cases:

• Test whether the website lacks aria-* attributes for relevant elements.
• Test whether the website uses non-semantic HTML tags (e.g., multiple
  elements instead of semantic tags).
• Test whether keyboard navigation is broken or improperly implemented, resulting in an inaccessible user experience.

2. Optimize Images

Positive Test Cases:

• Test whether images are compressed and have reduced file sizes without significant loss of quality.
• Test whether the website's loading time is improved after compressing images.

Negative Test Cases:

• Test whether images are not compressed and have large file sizes, resulting in slower loading times.
• Test whether the website's loading time remains slow even after compressing images.

3. Customize Bootstrap

Positive Test Cases:

• Test whether the scss/styles.scss file has been updated to override Bootstrap's default styles.
• Test whether the website reflects the customized styles, including colors, fonts, and other visual elements.

Negative Test Cases:

• Test whether the scss/styles.scss file has not been updated or fails to override Bootstrap's default styles.
• Test whether the website still uses Bootstrap's default styles without any customization.

4. Update Bootstrap Components

Positive Test Cases:

• Test whether the website uses the latest version of Bootstrap components.
• Test whether the updated Bootstrap components function correctly on the website.

Negative Test Cases:

• Test whether the website uses deprecated or older versions of Bootstrap components.
• Test whether the updated Bootstrap components cause issues or do not function correctly on the website.

5. Mobile-First Approach

Positive Test Cases:

• Test whether the website layout and user experience are optimized for smaller screens (mobile devices).
• Test whether necessary adjustments have been made to improve the mobile experience, such as responsive typography and navigation.

Negative Test Cases:

• Test whether the website layout and user experience are not optimized for smaller screens (mobile devices).
• Test whether the mobile experience remains subpar even after attempting to make adjustments.

Remember to always test your changes on different screen sizes and devices to ensure a consistent and responsive user experience.