Adopt a unique CSS Styling for this project

[gbengaoluwadahunsi]

Summary: Provide a concise summary of the feature or improvement you want to propose.

I propose adopting a unique CSS styling approach for the caMicroscope project by replacing the current combination of Bootstrap CDN, SCSS, and CSS with either pure CSS or CSS combined with Tailwind CSS.

Background: Include background information explaining why this feature is valuable or necessary.

The current styling setup in caMicroscope relies on Bootstrap CDN, SCSS, and CSS. While this setup provides a foundation for styling, it may lead to heavier page loads due to external dependencies and increased complexity in managing stylesheets. By transitioning to a simpler and more lightweight styling approach, such as pure CSS or CSS with Tailwind CSS, we can streamline the styling process and improve performance. Again, contributors will also spend less time understanding our codebase and that will lead to faster development time.

Use Cases: Describe the use cases for this feature, detailing how it benefits users. Improved Page Load Times: By reducing the number of external dependencies and simplifying the styling process, users will experience faster page load times. Easier Maintenance: With a simpler styling setup, developers can more easily maintain and update the styling of the caMicroscope project. Consistency and Customization: Adopting a unique CSS styling approach allows for greater customization and consistency across different components and pages of the platform.

Implementation: If you have ideas on how to implement the feature, share them here. This could include code snippets, architecture diagrams, or any technical details.

To implement this proposal, we would first need to evaluate the current styling setup and identify all dependencies on Bootstrap CDN, SCSS, and CSS. Once identified, we can gradually refactor the styling to either pure CSS or CSS with Tailwind CSS. This may involve:

• Removing references to Bootstrap CDN and replacing Bootstrap-specific classes with custom or Tailwind CSS equivalents.

• Migrating SCSS stylesheets to pure CSS or integrating Tailwind CSS stylesheets.

• Updating existing HTML templates to utilize the new styling approach.

Expected Impact: Explain the expected impact of this feature on the caMicroscope platform and its users.

• Performance Improvement: Transitioning to a lighter styling approach is expected to improve page load times and overall performance for users accessing caMicroscope.

• Simplified Styling Process: By reducing dependencies and complexity in the styling setup, developers will find it easier to maintain and customize the styling of the platform.

• Enhanced Flexibility: Adopting a unique CSS styling approach allows for greater flexibility and customization, enabling the caMicroscope platform to better meet the needs of its users.

Additional Notes: Any additional context, information, or references that can support your proposal. Additional Notes:

It's essential to carefully plan and execute the transition to ensure minimal disruption to existing functionality and styling.

• Consider gathering feedback from users and stakeholders throughout the transition process to ensure that the new styling approach meets their needs and expectations.

• Document the new styling approach and provide guidelines for developers to follow when adding or modifying styles in the caMicroscope project.

[MunishMummadi]

Hey I want to work on this. Do you have any suggestions. Firstly I just want to optimize every .css file and I will make a PR . If you like the work. We can work on the details further. By the way I am an Outreachy aspirant.

[gbengaoluwadahunsi]

Hello @MunishMummadi , yeah it's fine, I think we ought to carry @birm along on features or adjustments that are not on the original contribution document she gave to us.

so if this issue is approved, anyone can proceed to work on it.