Everytime I look at the code for some Bulma stuff, I come away with raised eyebrows. While working on a Help Screen panel (similar to Bulma's Quickview), I decided to have a look at the Bulma Quickview Javascript that I downloaded some time back. The file is nicely named as "bulma-quickview.css" and "bulma-quickview.min.css". I looked at the raw version so I could read as coded.
There are references to Bootstrap in there. I think it's a hack from Bootstrap. So I passed and developed my own. Like everything else in Bulma, the Quickview code is bloated. 413 lines and 15Kb Raw (6Kb minified). My javascript code is 20 lines of code and less than 1Kb raw. And, my 20 lines of code also include a "tabs" interface.
I call this component "Quickpanel" ... essentially it is similar in concept to the Bulma/Bootstrap version. It has a header, body, and footer. The body has optional tabs if needed ... my intent was to use the Quickpanel as additional information for the application ... including purpose of the page, and a how-to section (tutorial, if you will). Trigger button from the main page, close buttons in the header and footer of the Quickpanel pane.
It's finished now, along with other components:
- Card ... I actually have three different card systems. All have a header, image and media area, contents, and footer section. The first is similar in concept to other frameworks, the second is spefically for blogs (or news/articles), and the third is a feature set that can be used for almost any purpose including a pricing panel. The third features a multi-content area (sort of like tabs, but with arrow navigation).
- Footers ... two different styles. The first is a simple footer, the second builds on that with a Contact Us section and map.
- Headers ... several headers. The main one I have previously described, it is very flexible and features multi-level submenus as well as mega-menu capabilities. Three sections: brand (logo), menu, and right section for search and social icons (as well as login, exit buttons). I also have an infobar that is "sticky". The sticky bar is designed for information and utility ... it has the Dark/Light mode button (the Dark/Light mode can be controlled by any button).
- Veritcal Navigation. There are at least three different navigation menus. One is a narrow bar with icons that expand on hover and supports unlimited submenus. Submenus collapse on opening another and collapse when the mouse moves away from the navigation panel (and reduces back to icon view only). This first one requires javascript to function. I have a similar menu that is CSS only, but requires clicking to view submenus (and close them). Both of these sidebar menus are full height. A third sidebar menu is more traditional.
- An javascript accordion mainly designed for FAQ applications
- A jumbotron panel that can be the feature point of a website with very flexible "marquee" style messaging. Position can be at the top, middle, or bottom on the y axis; and, can be positioned left, center or right on the x axis. The marquee supports a title, subtitle, content text, and buttons (actually any HTML).
- A really nice carousel that is auto scrolling, pauses on hover, can be controlled by navigation arrows and can accommodate captions. Can be used at any size, but will support being contained in the Jumbotron and fill the screen. Images fill the contents area proportionally and are clipped if too wide or too high.
There are also a number of "utilities" that I am working on, including a "read more" feature where the read more button shows an arrow on hover; a search bar that partially covers text so it looks like changing opacity gradient ... and exposes the entire text when clicked. And a read more feature in a card like setting so that cards can be equal height regardless of content with a read more option that can expand the card over text below. Also working on a star rating system, built into an input with the total "score" displayed in a span. And, finally, a "slogan" or "quotation" type of card/box that supports question, statement, photo, signature, and descriptive text area.
I've acquired a domain to split off CSS issues into its own blog. More on that in a later article.