Packages

phx_new

1.8.9
1.8.9 1.8.8 1.8.7 1.8.6 1.8.5 1.8.4 1.8.3 1.8.2 1.8.1 1.8.0 1.8.0-rc.4 1.8.0-rc.3 1.8.0-rc.2 1.8.0-rc.1 1.8.0-rc.0 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.7.0-rc.3 1.7.0-rc.2 1.7.0-rc.1 1.7.0-rc.0 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.6.2 1.6.1 1.6.0 1.6.0-rc.1 1.6.0-rc.0 1.5.15 1.5.14 1.5.13 1.5.12 1.5.11 1.5.10 1.5.9 1.5.8 1.5.7 1.5.6 1.5.5 1.5.4 1.5.3 1.5.2 1.5.1 1.5.0 1.5.0-rc.0 1.4.18 1.4.17 1.4.16 1.4.15 1.4.14 1.4.13 1.4.12 1.4.11 1.4.10 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.4.0-rc.3 1.4.0-rc.2 1.4.0-rc.1 1.4.0-rc.0 1.4.0-dev.0 1.3.5

Phoenix framework project generator. Provides a `mix phx.new` task to bootstrap a new Elixir application with Phoenix dependencies.

HexDocs

Current section

Files

Jump to
Readme
106 Versions
0 Dependencies
5 Dependants
Files
Activity
phx_new templates phoenix-usage-rules html.md
Raw

templates/phoenix-usage-rules/html.md 

## Phoenix HTML guidelines



- Phoenix templates **always** use `~H` or .html.heex files (known as HEEx), **never** use `~E`

- **Always** use the imported `Phoenix.Component.form/1` and `Phoenix.Component.inputs_for/1` function to build forms. **Never** use `Phoenix.HTML.form_for` or `Phoenix.HTML.inputs_for` as they are outdated

- When building forms **always** use the already imported `Phoenix.Component.to_form/2` (`assign(socket, form: to_form(...))` and `<.form for={@form} id="msg-form">`), then access those forms in the template via `@form[:field]`

- **Always** add unique DOM IDs to key elements (like forms, buttons, etc) when writing templates, these IDs can later be used in tests (`<.form for={@form} id="product-form">`)

- For "app wide" template imports, you can import/alias into the `my_app_web.ex`'s `html_helpers` block, so they will be available to all LiveViews, LiveComponent's, and all modules that do `use MyAppWeb, :html` (replace "my_app" by the actual app name)



- Elixir supports `if/else` but **does NOT support `if/else if` or `if/elsif`**. **Never use `else if` or `elseif` in Elixir**, **always** use `cond` or `case` for multiple conditionals.



  **Never do this (invalid)**:



      <%= if condition do %>

        ...

      <% else if other_condition %>

        ...

      <% end %>



  Instead **always** do this:



      <%= cond do %>

        <% condition -> %>

          ...

        <% condition2 -> %>

          ...

        <% true -> %>

          ...

      <% end %>



- HEEx require special tag annotation if you want to insert literal curly's like `{` or `}`. If you want to show a textual code snippet on the page in a `<pre>` or `<code>` block you *must* annotate the parent tag with `phx-no-curly-interpolation`:



      <code phx-no-curly-interpolation>

        let obj = {key: "val"}

      </code>



  Within `phx-no-curly-interpolation` annotated tags, you can use `{` and `}` without escaping them, and dynamic Elixir expressions can still be used with `<%= ... %>` syntax



- HEEx class attrs support lists, but you must **always** use list `[...]` syntax. You can use the class list syntax to conditionally add classes, **always do this for multiple class values**:



      <a class={[

        "px-2 text-white",

        @some_flag && "py-5",

        if(@other_condition, do: "border-red-500", else: "border-blue-100"),

        ...

      ]}>Text</a>



  and **always** wrap `if`'s inside `{...}` expressions with parens, like done above (`if(@other_condition, do: "...", else: "...")`)



  and **never** do this, since it's invalid (note the missing `[` and `]`):



      <a class={

        "px-2 text-white",

        @some_flag && "py-5"

      }> ...

      => Raises compile syntax error on invalid HEEx attr syntax



- **Never** use `<% Enum.each %>` or non-for comprehensions for generating template content, instead **always** use `<%= for item <- @collection do %>`

- HEEx HTML comments use `<%!-- comment --%>`. **Always** use the HEEx HTML comment syntax for template comments (`<%!-- comment --%>`)

- HEEx allows interpolation via `{...}` and `<%= ... %>`, but the `<%= %>` **only** works within tag bodies. **Always** use the `{...}` syntax for interpolation within tag attributes, and for interpolation of values within tag bodies. **Always** interpolate block constructs (if, cond, case, for) within tag bodies using `<%= ... %>`.



  **Always** do this:



      <div id={@id}>

        {@my_assign}

        <%= if @some_block_condition do %>

          {@another_assign}

        <% end %>

      </div>



  and **Never** do this – the program will terminate with a syntax error:



      <%!-- THIS IS INVALID NEVER EVER DO THIS --%>

      <div id="<%= @invalid_interpolation %>">

        {if @invalid_block_construct do}

        {end}

      </div>