My CSS Framework is pretty much done. All that remains is testing.
For the testing, I decided to build some components. As I build these components, I am mindful that components should be made with multi-use in mind.
For example, my first component is a horizontal mega-menu. That means that a drop down should be able to handle almost any type of HTML. I build one to handle HTML or a simple drop down. I built it with three sections, branding on the left (logo area), a horizontal menu, and a right end section for search bar, logout button, e-commerce cart button, etc. Any part of the menu can be repurposed, including not used. If the entire menu portion should be at the right, it can be. If there is no right section, no problem. If there is no HTML, drop downs or regular links is it.
I did the same with the jumbotron. By the way, I prefer the term jumbotron instead of hero. My jumbotron is designed both as a large display area ... and it has a portion that can be used as a CTA (Call-To-Action) that I call a "marquee". Background of the marquee can be dark or light with a 40% opacity. It can contain a button - really anything else you can think of. And, I've worked out the positioning so that the marquee can be left, centered, or right on the x axis, and top, middle, bottom on the y axis.
The jumbotron is multi-use. It can also be the container for other objects.
One of those objects is an image slider/carousel. The first time I used an image carousel on a website, I recall choosing a Jquery project called OWL Carousel. OWL Carousel is extremely flexible, but it is large. After a few years, the website I used OWL Carousel on needed a facelift. Gone was OWL Carousel ... but the client wanted the same effect in another page. I ended up using a different Jquery project called "lightslider". "lightslider" had all the features the client needed and came in at less than half the size of OWL. It did have limitations in a few ways, but acceptable for the lower-focused task.
When I used Bulma, I looked at the carousel in their bag of components. The original Bulma version was CSS only ... it now is a Javascript object – and like all the other Bulma "stuff", it's bloated. It is actually larger in size that the outstanding OWL Carousel.
lightslider.js is what I am going with. Strangely enough, the lightslider.css has an MIT license, the lightslider.js has no preamble (no license mentioned). There is an MIT "license" file included with the download. The problem with this glaring omission is that a license file cannot be transmitted with the display of an HTML file. And, it's easy to view source, click on the javascript file ... on doing that, anyone would assume it is not licensed (no preamble or header, suggesting it is public domain).
I digress ... the license isn't the issue. Of course, I will respect the license. On the CSS file, I have made some modifications ... but they are all located at the bottom of the file, with an appropriate preamble to indicate that the following section is a modification. The lighthouse.js I have left intact, as supplied in the download. I have minified it, reducing it by about one third.
The modifications I made remove the restrictions I originally found. I can now easily size the lightslider container and have the images autofit to that size and maintain proportions.
I must say, I did try several other image sliders/carousel packages to see if I could avoid any modifications. Nothing available. All the packages available have some limitations, some severe. The most common limitation is that the images have to be all the same size. Same width, same height. Some control the container: you can specify any width or height you want ... but on loading the package resizes the container to fit the image. Changing those packages would mean modifying the javascript code. I wanted to be able to control the container and have the images autofit. And by autofit, I mean fill the entire container in both axis and do it proportionately. Even lightslider.js won't do that. But with lightslider, I was able to modify the CSS to handle that. All I had to do is add five lines of code, four would have done it, but I wanted to look at the code and have it self-explanatory. So, I repeated the width. Then I changed the height from auto to 100%. Then the two magic lines: object-fit: cover; and object-fit: center center; ... the other modifications were also to CSS so that I could add an optional caption.
All works great and I can continue to use a fairly lightweight component within my jumbotron container.