web-view: Type-safe HTML and CSS with intuitive layouts and composable styles.
Type-safe HTML and CSS with intuitive layouts and composable styles. Inspired by Tailwindcss and Elm-UI . See documentation for the Web.View module below
[Skip to Readme]
Modules
[Index] [Quick Jump]
Downloads
- web-view-0.5.0.tar.gz [browse] (Cabal source package)
- Package description (as included in the package)
| Versions [RSS] | 0.2.0, 0.2.2, 0.2.3, 0.3.1, 0.4.0, 0.5.0, 0.6.0, 0.6.1, 0.6.2, 0.7.0, 0.7.1 |
|---|---|
| Change log | CHANGELOG.md |
| Dependencies | base (>=4.16 && <5), bytestring (>=0.11 && <0.13), casing (>0.1.3.0 && <0.2), containers (>=0.6 && <1), effectful-core (>=2.3 && <3), file-embed (>=0.0.10 && <0.1), html-entities (>=1.1.4.7 && <1.2), http-types (>=0.12 && <0.13), string-interpolate (>=0.3.2 && <0.4), text (>=1.2 && <3) [details] |
| License | BSD-3-Clause |
| Author | Sean Hess |
| Maintainer | seanhess@gmail.com |
| Category | Web |
| Home page | https://github.com/seanhess/web-view |
| Bug tracker | https://github.com/seanhess/web-view/issues |
| Source repo | head: git clone https://github.com/seanhess/web-view |
| Uploaded | by seanhess at 2024-10-30T16:55:17Z |
| Distributions | LTSHaskell:0.7.0, Stackage:0.7.0 |
| Reverse Dependencies | 2 direct, 0 indirect [details] |
| Downloads | 590 total (16 in the last 30 days) |
| Rating | (no votes yet) [estimated by Bayesian average] |
| Your Rating | |
| Status | Docs uploaded by user Build status unknown [no reports yet] |
Readme for web-view-0.5.0
[back to package description]Web View
Type-safe HTML and CSS with intuitive layout and composable styles. Inspired by Tailwindcss and Elm-UI
Write Haskell instead of CSS
Type-safe utility functions to generate styled HTML.
myPage = col (gap 10) $ do
el (bold . fontSize 32) "My page"
button (border 1) "Click Me"
Leverage the full power of Haskell functions for reuse, instead of relying on CSS.
header = bold
h1 = header . fontSize 32
h2 = header . fontSize 24
page = gap 10
myPage = col page $ do
el h1 "My Page"
...
This approach is inspired by Tailwindcss' Utility Classes
Intuitive Layouts
Easily create layouts with row, col, grow, and space
holygrail :: View c ()
holygrail = layout id $ do
row section "Top Bar"
row grow $ do
col section "Left Sidebar"
col (section . grow) "Main Content"
col section "Right Sidebar"
row section "Bottom Bar"
where section = 'border' 1
Embedded CSS
Views track which styles are used in any child node, and automatically embed all CSS when rendered.
>>> renderText $ el bold "Hello"
<style type='text/css'>.bold { font-weight:bold }</style>
<div class='bold'>Hello</div>
Stateful Styles
We can apply styles when certain states apply. For example, to change the background on hover:
button (bg Primary . hover (bg PrimaryLight)) "Hover Me"
Media states allow us to create responsive designs
el (width 100 . media (MinWidth 800) (width 400))
"Big if window > 800"
Learn More
View Documentation on Hackage
View on Github
View Examples