https://github.com/ericgj/elm-bem
Elm utilities for following Block-Element-Modifier conventions in CSS classes
https://github.com/ericgj/elm-bem
Last synced: 12 months ago
JSON representation
Elm utilities for following Block-Element-Modifier conventions in CSS classes
- Host: GitHub
- URL: https://github.com/ericgj/elm-bem
- Owner: ericgj
- License: mit
- Created: 2023-04-30T18:10:17.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-05-01T00:37:45.000Z (about 3 years ago)
- Last Synced: 2025-01-16T00:35:26.877Z (over 1 year ago)
- Language: Elm
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# elm-bem
Utilities for following BEM ([Block-Element-Modifier](https://getbem.com/naming))
conventions in CSS classes.
This library builds on work done in
[renanpvaz/elm-bem](https://package.elm-lang.org/packages/renanpvaz/elm-bem/latest)
with a different API.
It supports both "flag" style and "key-value" style modifiers on blocks and
elements.
## Example
```elm
import Html.Bem as Bem
view : String -> { sticky : Bool, title : String, bodyData : BodyData } -> Html msg
view blockName model =
let
block =
Bem.init blockName
headerEl =
block.element "header"
bodyEl =
block.element "body"
in
div
[ block |> Bem.block ]
[ header
[ headerEl |> Bem.elementIf "sticky" model.sticky ]
[ h1 [] [ text model.title ] ]
, div
[ bodyEl |> Bem.elementOf "type" model.bodyData.bodyType ]
[ viewBody block model.bodyData ]
]
viewBody : Bem.Block -> BodyData -> Html msg
viewBody block bodyData =
-- render sub-elements tied to the top-level Bem.Block
```
Then calling
```elm
view
"thing"
{ sticky: True, title: "Thing", bodyData = { bodyType = "article", ... } }
```
results in
```html
Thing
...
```
## Installing
Install in the root of your project
```shell
$ elm install ericgj/elm-bem
```
and import in your modules like
```elm
import Html.Bem
```