Midmoka.UI is a Blazor class library that wraps Bulma π¨, a modern CSS framework, into reusable Blazor components. With Midmoka.UI, you can build responsive π± web applications with beautiful components, leveraging both Blazor's powerful C# capabilities π₯ and Bulma's sleek styling β¨.
- π¨ Theming: Customize components with Bulma variables and your own themes.
- 𧱠Reusable Components: Use out-of-the-box components for faster development.
- π± Responsive: Build websites that look great on all devices.
- π§ Customizable: Adjust components with a wide range of parameters and options.
- π Interactive Demos: See components in action with live examples.
Ensure you have the following installed:
- .NET 7.0+
- Node.js
- Yarn/Node package manager
- Install the necessary Node.js packages:
yarn
- Run the Gulp tasks to bundle and prepare your assets:
yarn build
- Build the library:
dotnet build
After installing the package and running Gulp tasks, simply reference the bundled files in your header tag in index HTML file. For CSS:
<link href="_content/Moka.UI/css/midmoka.css" rel="stylesheet" />
I use Gulp to automate the bundling and optimization of assets. Here's what each task does:
- styles: Concatenates and minifies CSS files and includes Font Awesome styles.
- default: Runs all the above tasks in sequence. You can run a specific task with the following command:
yarn gulp <task-name>
For example, to only run the styles task:
yarn gulp styles
Contributions are welcome as this is an open-source project in such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (git checkout -b feature/AmazingFeature)
- Commit your Changes (git commit -m 'Add some AmazingFeature')
- Push to the Branch (git push origin feature/AmazingFeature)
- Open a Pull Request
Distributed under the MIT License. See LICENSE for more information. π«‘ Jacob William - [email protected]
- Add Bulma
- Upload to NuGet
- Add more tests
- Add more documentation
- Add more examples
- Add more features