- Your are going to modify Bootstrap 5.3.3 using NPM by customizing at least 10 variables each and working collaboratively and build a fully customized homepage.
- For the fully customized homepage, make sure you have a wireframe to present and apply 60-3-10 rule, principles of design, typography, and color theory.
assets/
├── imgs/ # Images for the homepage
├── css/
│ ├── main.scss # Bootstrap overrides
│ ├── style.scss # Custom CSS
├── js/ # Custom JavaScript files
├── index.html # Main homepage
| Date | Time |
|---|---|
| MARCH 5, 2025 | 7:30PM 🕢 |
| # | Student Name | Task | Variables to Customize | Expected Output |
|---|---|---|---|---|
| 1 | Roy Marjohn Araneta | Project Setup & Bootstrap Installation | Install Bootstrap, create project structure, import Bootstrap into main.scss |
Bootstrap compiles correctly, folder structure is set up |
| 2 | Keith Arcedes | Color Customization | $primary, $secondary, $success, $info, $warning, $danger, $light, $dark, $body-bg, $body-color |
New Bootstrap color scheme applied |
| 3 | Renato, Jr. Bingua | Typography Customization | $font-family-sans-serif, $font-family-monospace, $headings-font-weight, $font-size-root, $h1-font-size, $h2-font-size, $h3-font-size, $h4-font-size, $h5-font-size, $h6-font-size |
Font family changed to Poppins, new text sizes applied |
| 4 | Kian Borrero | Navbar Customization | $navbar-padding-y, $navbar-light-color, $navbar-light-hover-color, $navbar-dark-color, $navbar-dark-hover-color, $navbar-toggler-border-radius, $navbar-toggler-padding-y, $navbar-toggler-padding-x, $navbar-nav-link-padding-x |
Navbar will have custom colors, spacing, and styles |
| 5 | Noel Caceres | Button Customization | $btn-border-radius, $btn-border-radius-lg, $btn-border-radius-sm, $btn-font-weight, $btn-padding-y, $btn-padding-x, $btn-font-size, $btn-hover-bg-shade-amount, $btn-active-bg-shade-amount |
Buttons will have a rounded appearance and bold font |
| 6 | Ron Christopher Catapang | Card Customization | $card-border-radius, $card-bg, $card-border-width, $card-border-color, $card-spacer-y, $card-spacer-x, $card-title-font-size, $card-title-color, $card-subtitle-color |
Cards will have a soft rounded design |
| 7 | Vincent Desalisa | Form Customization | $input-bg, $input-color, $input-border-color, $input-border-radius, $input-focus-border-color, $input-placeholder-color, $input-padding-y, $input-padding-x |
Form inputs will have a rounded border and custom colors |
| 8 | Kei Nikole Filio | Footer Customization | Custom styles in style.scss |
Footer will have a dark theme with white text |
| 9 | John Rey Gasparillo | Grid Layout | Modify Bootstrap grid classes and breakpoints | Responsive grid system applied |
| 10 | Joshua Lacsi | Alerts Styling | Customize alert colors, padding, and border radius | Bootstrap alerts will have a unique design |
| 11 | Iven Loro | Modal Customization | $modal-content-bg, $modal-content-border-color, $modal-content-border-width, $modal-header-bg, $modal-header-border-color, $modal-footer-border-color, $modal-lg, $modal-md, $modal-sm, $modal-transition |
Modals will have custom background, border styles, and transition effects |
| 12 | Elea Jem Lobaton | Modals Design | Modify modal background, overlay, and buttons | Modals will have a custom design in the front end |
| 13 | Sherwin Pagalilawan | Carousel Effects | Modify Bootstrap carousel controls, indicators, and transition effects | Custom carousel animations applied |
| 14 | Reyna Jane Singua | Badge Styling | Modify badge colors, font size, and padding | Bootstrap badges will have a unique appearance |
| 15 | Cristine Joy Sorilla | Table Design | Modify Bootstrap table borders, background, and text color | Tables will have improved readability and styling |
| 16 | Amiel Jose Victorino | Hero Section Layout | Create a hero section using Bootstrap grid, typography, and buttons | Homepage will have a well-designed hero section |
- Commit changes with descriptive messages (e.g.,
Updated navbar styles). - Push code to a personal branch (e.g.,
feature/navbar-customization). - Create a pull request (PR) to merge changes into the main repository.
- A fully customized Bootstrap homepage with:
- Custom colors, fonts, buttons, and layout
- Responsive design with Bootstrap Grid
- Unique navbar, footer, and component styles
| Criteria | Very Good (10 pts) | Good (8 pts) | Fair (7 pts) | Poor (5 pts) |
|---|---|---|---|---|
| Customization of Bootstrap Variables | Successfully customized at least 10 Bootstrap variables with clear improvements. | Customized at least 8 Bootstrap variables with minor modifications. | Customized 5-7 variables with minimal changes. | Customized less than 5 variables or changes are not noticeable. |
| Code Organization & Comments | Well-structured, properly formatted, and fully commented code. | Organized code with some comments for clarification. | Code is somewhat disorganized with few comments. | Poorly structured code with little to no comments. |
| Folder Structure Implementation | Correctly follows the required folder structure (assets/css, assets/js, assets/imgs). |
Mostly follows the folder structure with minor errors. | Some errors in organizing files in the required structure. | Does not follow the required folder structure. |
| SCSS File Implementation | main.scss contains all Bootstrap overrides, and style.scss has custom styles, both properly structured. |
main.scss and style.scss are implemented with minor issues. |
SCSS files exist but are unorganized or missing some key elements. | SCSS files are incorrect, missing, or not properly linked. |
| Homepage Customization | Successfully applies customized Bootstrap styles to the homepage with unique design improvements. | Homepage is customized but lacks some design improvements. | Minimal changes applied to the homepage. | No noticeable changes to the default Bootstrap design. |
| GitHub Workflow & Pull Requests | Proper Git workflow followed with well-documented commits and successful pull requests. | Git workflow followed with minor issues in commits or pull requests. | Used GitHub but with improper commit messages or pull request issues. | Did not use GitHub properly or failed to submit a pull request. |
Total Score: /60