This library provides an easy to use, out of the box implementation of the Bulma CSS framework for use with Blazor. It uses the latest version of Bulma, so you do not need to worry about updating it yourself. There are also several extensions to Bulma that are included and integrated here. Additionally, the Google Material Symbols font is packaged here also. All of this is takes just a single line in your index.html or single using statement in your CS files to start using.
After install, you can use all of the Bulma styles, along with those of the extension packages on your own components. You may want to store a copy of the pre-compiled CSS files somewhere in your solution so that Visual Studio can use Intellisense to give you CSS class recommendations. You will also be able to use the .material-icons CSS class to use any of the Material Symbols. The icon font will also be updated regularly, just let me know if there are any missing and I can do an update.
Finally, you can use any of the pre-built components here to simplify use of the Bulma framework. Items such as <Tabs />, <Panel />, or <ProgressBar /> will all be available. There is a list below, eventually all items in the Bulma documentation will be added. If you need one of the missing ones either do a Pull Request or let me know and I may have time.
Try it on Android with the APK file (see releases)
Try it on Windows with the Microsoft Store App or MSIX package (see releases)
Features
Pre-compiled CSS bundle containing Bulma, several extensions, and a dark theme
Interactive Blazor components for Bulma framework elements
Additional components to help with common Blazor tasks
Bundled with Google Material Symbols icon font
No additional dependencies (Microsoft.AspNetCore.Components.Web is already required by Blazor)
No JavaScript required (except for <ThemeSelector />)
Component List
The following components are currently available for use. All of them are documented and you can hover over them in Visual Studio to get details for the components and their parameters.
Components
<BreadCrumb /> and <BreadCrumbItem />, creates a simple breadcrumb component to improve your navigation experience
<Card />, creates an all-around flexible and composable component
<Message />, creates a styled block containing a note to display
<Modal />, creates an overlay that can display additional content
<Navbar />, creates a navigation menu to use at the top of the screen
<NavbarDropdown />, creates a dropdown to use in a Navbar menu
<NavbarItem />, creates a link to use in a Navbar menu
<Panel />, creates a styled block containing content to display
<Steps /> and <Step />, creates a progress tracker with visual indicators
<Tabs /> and <Tab />, creates a tab bar and content panels
Elements
<BooleanIcon />, creates an icon with either a check or 'X'
<ButtonBase />, allows easily creating standard buttons
<DeleteButton />, creates a button to delete a record with a confirmation modal
<Notification />, creates a bold notification block, to alert your users of something
<ProgressBar />, creates a meter to display completion or loading status
<ResetButton />, creates a button to reset contents of a form
<SubmitButton />, creates a button to submit contents of a form
To use the dark theme, just add a secondary stylesheet reference in your index.html. The theme can automatically be selected based on the preference of the user. Changing between the styles can be done easily with an IJSRuntime.
<head>
<!-- Your head content -->
<link rel="stylesheet" href="_content/Easy.Blazor.Bulma/css/easy-blazor-bulma.min.css" id="easy-blazor-bulma" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" href="_content/Easy.Blazor.Bulma/css/easy-blazor-bulma-dark.min.css" id="easy-blazor-bulma-dark" media="(prefers-color-scheme: dark)" />
</head>
<body>
<!-- Your body content -->
<script src="_content/Easy.Blazor.Bulma/js/easy-blazor-bulma.js" type="text/javascript"></script>
</body>
There are 5 helper methods in the bundled JavaScript file.
easyBlazorBulma.IsOsDarkMode, checks to see if dark mode is currently enabled
easyBlazorBulma.ToggleStyleSheet, enables or disables the element with the matching id
easyBlazorBulma.HasStorage, tests to see if browser storage is available
easyBlazorBulma.WriteStorage, saves the provided value to browser storage
easyBlazorBulma.ReadStorage, retrieves the specified value from browser storage
Additionally, you can use the <ThemeSelector /> component to display a button that will toggle between themes. By default it applies the .navbar-item CSS class, if you provide another class this will override it. Simply including this component anywhere in your display will automatically load the correct theme when your app starts.
Icons
To use an icon just add a <span> with the desired icon text and the .material-icons CSS class. The sample below will produce the magnifier glass icon. An icon reference is available at Google Fonts.
