Choosing a CSS framework can be a hassle. Some people choose to stick to Bootstrap, but sometimes changing is good. One of the alternatives that I love is Bulma.

Bulma is 100% CSS only, no Javascript, light-weight and beautiful. The lack of Javascript is frustrating in some cases, like the tabs. To overcome this problem, you can check BulmaJS. It is an unofficial extension, but it's great.

But one of its weakness is its simplicity. Some fabulous Bootstrap components like the Carousel are missing. To add such features, you can use one or more extension for Bulma.

• bulma-accordion: a simple accordion extension for Bulma.
• bulma-block-list: block style list elements.
• bulma-calendar: display a calendar with different colors and sizes. Contains Date, Time and DateTime inputs.
• bulma-carousel: carousel component, card-style.
• bulma-dashboard: enables you to easily write dashboard-style interfaces with fixed horizontal panels.
• bulma-megamenu: megamenu for navbar.
• bulma-pricingtable: display a pricing table easily.
• bulma-quickview: display a quick view of data without leaving the current page.
• bulma-ribbon: show a ribbon on boxes.
• bulma-steps: display steps for a process (like sign-up or an order form) with different colors, sizes, and states.
• bulma-timeline: display a vertical timeline, in different colors, sizes, and states.
• bulma-toast: pure JavaScript extension to display toasts.
• @creativebulma/bulma-collapsible: easily Collapse/Exand any kind of element/component.

• bulma-pageloader: display a page-loader to inform users that content is loading, in different colors.
• @creativebulma/bulma-badge: display a badge element in front of Bulma's element in different colors.
• @creativebulma/bulma-tooltip: display a tooltip attached to any kind of element with different positioning.

• bulma-checkradio: make classic checkbox and radio sexier with different colors, sizes, and states.
• bulma-iconpicker: display an input as an Icon Picker to ease the user icon selection.
• bulma-slider: display a classic slider with different colors, sizes, and states.
• bulma-switch: display the classic checkbox as a switch button with different colors, sizes, and states.
• @creativebulma/bulma-tagsinput: modernize an add interaction on input of tags type .

• @creativebulma/bulma-divider: display a vertical or horizontal divider to segment your design.

All of these extensions can be add to Bulma. That means you'll need to install Bulma first, or using an extension would be pointless.

npm install bulma
# OR
yarn add bulma

I've listed the extensions by their package name, so you can use the name given with npm install or yarn add.

Example:

npm install bulma-calendar
# OR
yarn add bulma-calendar

Well, that's it. I hope this small gist could help.

Note: Don't forget to hit the link on the extension name to check the docs and learn how to use the extension!