Merge pull request #344 from Larocceau/add-bulma

mattgallagher92 · web-flow · commit 6bbdfa5e53cd · 2024-01-02T16:48:13.000Z
Add "add bulma" recipe
diff --git a/docs/recipes/ui/add-bulma.md b/docs/recipes/ui/add-bulma.md
@@ -0,0 +1,32 @@
+# How do I add Bulma to a SAFE project?
+
+[Bulma](https://bulma.io/documentation/) is a free open-source UI framework based on flexbox that helps you create modern and responsive layouts.
+
+When using Feliz (the standard for a SAFE app), follow the instructions below. When using Fable.React, use the [Fulma](https://fulma.github.io/Fulma/) wrapper for Bulma.
+
+## 1. Add the Feliz.Bulma NuGet package to the client project
+
+```
+dotnet paket add Feliz.Bulma -p Client
+```
+
+## 2. Add the Bulma stylesheet to `index.html`
+
+```.diff
+ ...
+ <head>
+     ...
++    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+ </head>
+ ...
+```
+
+## 3. Start using Feliz.Bulma components in your F# files.
+
+```fsharp
+open Feliz.Bulma
+
+Bulma.button.button [
+   str "Click me!"
+]
+```
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -90,6 +90,7 @@ nav:
           - Add Feliz support: "recipes/ui/add-feliz.md"
           - Add FontAwesome support: "recipes/ui/add-fontawesome.md"
           - Migrate from a CDN stylesheet to an NPM package: "recipes/ui/cdn-to-npm.md"
+          - Add Bulma Support: "recipes/ui/add-bulma.md"
           - Add routing with state shared between pages: "recipes/ui/add-routing.md"
           - Add routing with separate models per page: "recipes/ui/add-routing-with-separate-models.md"
           - Add Routing with UseElmish: "recipes/ui/routing-with-elmish.md"
