CSS Frameworks and javascript

by Andy Prevost

Saturday April 13 2024

Bulma CSS Framework has several elements, components, or utilities that require javascript to implement the functionality expected.

I always use the example of the burger menu. On most of the Bulma example templates, if you shrink the view of the website, the standard "three-line" burger menu will appear. Most of the navbar will disappear and will re-appear as a vertical menu when the burger trigger is clicked.

Try it. In the demos, it may work ... but implement it yourself on your own web design and it won't work. That's because you are expected to provide your own javascript implementation to trigger the burger. Oh, there are quite a few implementations for the burger available. It's the other implementations that are rarer to find. Some implementations require you to add even more css code or expect you to modify the html code by adding data- or other attributes unique to their javascript code.

The list of Bulma items that need additional javascript code:

  • Burger menu
  • Tabs ... this is the most difficult to implement since you have to show/hide the correct tab, plus show/hide the contents associated with the correct tab.
  • Tag (delete button)
  • Notification (delete button)
  • Message (delete button)
  • Navbar (dropdown selection & trigger, search bar)
  • Card header icon
  • Modal (background, button, close & delete)
  • Panel (block, search)

Above applies to version 0.9.4. There are more requirements for v1.0.0 - for example, triggering the Dark/Light mode.

Unless you are versed and comfortable with javascript (plain vanilla, JQuery or other JS implementation), stay away. Use well rounded CSS Frameworks that include everything you need to work properly. Check out Bootstrap or Foundation. Both also implement Flexbox as the basis for their grids.

 

◀ Previous Next ▶

Post a Comment