https://github.com/nicklayb/duplo
Duplo is a HTML buiilder based on function calls. Instead of writing whole HTML you can simple call functions.
https://github.com/nicklayb/duplo
elixir functions html templating
Last synced: about 1 year ago
JSON representation
Duplo is a HTML buiilder based on function calls. Instead of writing whole HTML you can simple call functions.
- Host: GitHub
- URL: https://github.com/nicklayb/duplo
- Owner: nicklayb
- Created: 2019-05-11T02:17:04.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-13T15:15:04.000Z (about 7 years ago)
- Last Synced: 2024-04-24T02:39:48.913Z (about 2 years ago)
- Topics: elixir, functions, html, templating
- Language: Elixir
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Duplo
Duplo is a HTML buiilder based on function calls. Instead of writing whole HTML you can simple call functions.
## Example usage
Instead of
```elixir
defmodule MyModule do
def render_html(title) do
"
#{title}
"
end
end
```
It lets you do
```elixir
defmodule MyModule do
import Duplo
def render_html(title) do
h1([
class: "a class I need",
some_other_attribute: "Gets easier to read and to maintain"
], title)
end
end
```
## Advanced usage
In fact, the main purpose of this is composing tags. If you want "components" or higher level building blocks, it gets really easy to do.
```elixir
defmodule Bootstrap do
use Duplo.Tag, [:button, :ul, :li]
def btn(text, color \\ "primary") do
button([class: "btn btn-xs btn-#{color}"], text)
end
@ul_class "list-group"
@li_class "list-group-item"
def list(items) do
ul(
[class: @ul_class],
Enum.map(items, fn (item) ->
li([class: @li_class], item)
end)
)
end
end
```
This would help ensure consistency between element usage over your website
```elixir
defmodule Page do
import Bootstrap
use Duplo.Tag, [:div]
def render() do
div([], [
list(["First item", "Second item"])
btn("Submit form")
])
end
end
```
Page.render/0 would then output
```html
- First item
- Second item
Submit form
```