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

This is a package candidate release! Here you can preview how this package release will appear once published to the main package index (which can be accomplished via the 'maintain' link below). Please note that once a package has been published to the main package index it cannot be undone! Please consult the package uploading documentation for more information.

[maintain] [Publish]

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]

Properties

Versions	0.2.0, 0.2.2, 0.2.3, 0.3.1, 0.3.2, 0.4.0, 0.5.0, 0.6.0, 0.6.1, 0.6.2
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), 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-02-07T17:30:42Z

Modules

Web
- Web.View
  - Web.View.Element
  - Web.View.Layout
  - Web.View.Render
  - Web.View.Reset
  - Web.View.Style
  - Web.View.Types
  - Web.View.View

Downloads

web-view-0.3.2.tar.gz [browse] (Cabal source package)
Package description (as included in the package)

Maintainer's Corner

Package maintainers

seanhess

For package maintainers and hackage trustees

edit package information

Readme for web-view-0.3.2

[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

https://hackage.haskell.org/package/web-view

View on Github

https://github.com/seanhess/web-view

View Examples