Hackage :: [Package]

web-view: Type-safe HTML and CSS with intuitive layouts and composable styles.

[ bsd3, library, web ] [ Propose Tags ] [ Report a vulnerability ]

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]

Downloads

Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees

Candidates

Versions [RSS] 0.2.0, 0.2.2, 0.2.3, 0.3.1, 0.4.0, 0.5.0
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
Reverse Dependencies 1 direct, 0 indirect [details]
Downloads 251 total (26 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

Hackage

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

Contributors