How to use CSS Grid in DaisyUI / Feliz / SafeStack project #493
-
|
What is the correct way to use CSS Grid in a SafeStack / Feliz.DaisyUI project? I have this basic layout (code below) in html / CSS and want to mirror the structure in index.fs Html.body [ ] with DaisyUI. Feliz.DaisyUI or Felix.Bulma components are working in my app but I am stuck on the correct way to use CSS grid for the layout. So far have not found any examples or figured out the code. The app was created with the Safestack template and updated to .net60. Many Thanks. index.html index.css |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
Hello @WarmWinters, I am not sure to understand what you are trying to do. It seems like your Then using CSS classes is the same as in any React application, you import your style file in your application (it depends on the bundler you are using). And then you can write things like: Html.div [
Html.header [
prop.text "Header"
]
Html.main [
prop.text "Content"
]
Html.nav [
prop.text "Navigation"
]
Html.footer [
prop.text "Footer"
]
]In general, it is recommended to use CSS classes instead of writing the rule to apply to all the element of a given type. Because, we what you wrote all the If you use CSS classes, you need to use Html.footer [
prop.className "my-footer-css-class"
prop.text "Footer"
] |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the detailed reply @MangelMaxime. I was not clear how to use CSS grid with Feliz but I figured it out eventually and like everything else its simple when you know how. The Feliz documentation and examples are excellent but it still takes a while to figure out how it all works. I am really enjoying learning and using Feliz. |
Beta Was this translation helpful? Give feedback.
Hello @WarmWinters,
I am not sure to understand what you are trying to do.
It seems like your
index.htmlis containing some static HTML in the body where in general you just have arootdiv in the body and then use React to build the application from that.Then using CSS classes is the same as in any React application, you import your style file in your application (it depends on the bundler you are using).
And then you can write things like:
In general, it is recommended to …