nprati01 / P3_Festival_Ace

1 stars 0 forks source link

Grow Code Snippet #3

Open nprati01 opened 1 year ago

nprati01 commented 1 year ago

This Grow snippet is more so related to the UI of my app. While working with bootstrap I found myself giving every element a card class which may have been unecessary I also did a lot of styling within the html document instead of the style sheet which im not sure is best practice. Working so heavily on the front end for this project has shown me that I need to revisit some basic HTML CSS and styling properties. I realized after presenting that html elements can actually have ID properties with Classes which I should have included but somewhere in the process I forgot that IDs were a thing. Included this code snippet because there is a lot of styling happening within the html and I see instances of this through out every html page. I know this is not correct. Screenshot 2023-04-24 at 2 12 49 PM

maker-jws commented 1 year ago

I think the challenge you have here is that .card is a reserved bootstrap class and provides a fair amount of 'out of the box' styling. Trying to override that will result in you polluting your CSS with unnecessary effects.

A possible approach would be to have a festival-card subclass to add to your bootstrap card class:

then you could put your transition effects on a .festival-card:hover rather than on the base card styling.

image