Rob1
How do you design the layout of your apps?
I am learning Phoenix now and see a lot of Heex, use of Tailwind, and other things that are not just pure html and css.
How do you all tend to design your layouts? Do you use any any third party tool (for example Figma)? I’m guessing nobody here uses something like dreamweaver to lay out any html file and then translate it to code yourself, so I am wondering how you go about it, what is your process.
Do you just lay it out semantically with containers, flex grids, etc? What do you do when you want to move something, do you just change it in the code or do you use any visual tool to visualize the changes as you’re making them? Please describe your overall approach.
Most Liked
cblavier
I’m not using Figma.
I’m sketching very low-fi mockups with excalidraw and then jumping straight into code: HTML + tailwind templates.
Rather than starting from nothing, I often use tailwindui.com templates to get me started on the layout.
RicoTrevisan
I love breadboarding.
Not what I used to think as a design tool — not really drawing or sketching — , but it’s now a go-to first step.
cblavier
Yes, I paid for the whole package, but it’s been a single shot payment 2y ago and proved to be incredible value for the money since then!
One of the site I built using those templates is the phoenix storybook, here is the demo app:
Popular in Discussions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









