Intro

After the tweet of @adamwathan, design a mailbox in 2 hours i motivated myself to try doing the same without any experience in tailwindcss. (i already configure it with phoenix one time ...)

I lost 4 pomodoro before going back with bulma

the finish looks like a wireframe not a finish frontend

GOAL

• design a mailbox in 2 hours with tailwindcss.
• Start from scratch in a svelte project with webpack template

1 hours = 4 pomodoro of 25 minutes

• 1st pomodoro = install and configure tailwindcss with svelte and rollup (postcss ?)
• 2nd pomodoro = read docs and design markups - read grid docs or doing with css grid quickly
• 3rd pomodoro = design utilities for container
• 4th pomodoro = design details for box / icons etc

Let's go!

resource

• https://developer.mozilla.org/fr/docs/Web/HTML
• https://developer.mozilla.org/fr/docs/Web/css
• https://svelte.dev/docs
• https://github.com/sveltejs/template
• https://tailwindcss.com/docs/installation/
• https://dev.to/muhajirdev/using-tailwindcss-with-sveltejs-2098
• awesome svelte resource on github have already premade template

POMODORO 1 & 2

• read & test install options (some failed, i may have used a ready template)
• install with method this link

POMODORO 2 & 3

• define html & grid & class in figma (see images in drafts/)
• define base html markups

PAUSE

POMODORO 3 & 4

• lessons learned ! need to tweak svelte bundler to use style tag but after tailwind not working
• tailwind use normalize
• too much classes !

lessons learned

• retry tailwind last shot only with pure html & no css grid ...
• resisting to the call of bulma
• css utilities or not, that's the question
• tailwind customization was all about tailwind.config.js
• maybe i dont know enough tailbox

remove tailwindcss & config && restart from scratch ->

Pomodoro 1

Install & configure bulma with svelte:

• install bulma & postcss for svelte -> svelma -> test OK Doing base html & layout
• add css grid with html markups = OK

Pomodoro 2

Separate each grid area in svelte blocks and import it in main App

Pomodoro 3

• made navuser and navmenu (css grid or flex nav..)

Pomodoro 4

• made search (without fontawesome)
• made navfilters (without icons & hover)

PAUSE Pomodoro 1 & 2 & 3 & 4 = 1h30 :-(

Pomodoro 5

• made Listmail (maybe a media object will be better or message with media because of close button)

Pomodoro 6

• made ContentMail base
• remove svelma and keep bulma only css

LUNCH PAUSE =

6 pomodoro from scratch with bulma = 3h it's not like tailwind style but basic is here

TO SEE if nav headers need wil be better with flex to center & align or levels.. add capture figma mailbox-proto-1 in drafts/

Pomodoro 7

quick fix: -add sticky tabs to ListMail -add minimal size for responsive css grid navuser

• make navmenu and nav search in only one component navmenu and use level class of bulma (left right)
• change buttons send mail in dark for wireframe theming..

PAUSE

Pomodoro 8 & 9

• search contacts with randomuser api BAD: position fixed css to do: img in select it's not a search it"s a random call

BACK to svelte learning