Tweet
🔋Lithium update:

Just finished the borders panel. I can finally add borders to elements!

The initial design was clunky so I did a bunch of rework.

What you see now is the 3rd iteration.

Here's how I derive at this final design: 👇🧵

#buildinpublic
#buildinpublic update:

Finally done with the Flexbox panel.

I've decided to keep the UI simple by supporting only the essentials: flex direction, alignment, wrap and gap.

I'll be hiding the rest of the advanced flexbox options using a popup.

Next: the Borders panel!
#buildinpublic update:

Finished the number + unit combo field.

It may not look like much but it's important that it works well:
✨Sanitizes input
✨Autocompletes CSS units (just like VScode)
✨Nudge values up/down (shift key for big increment)
Fellow devs: do you use flex `align-content` at all?

I find that I can do everything with `justify-content` + `align-items`.

I'm trying to decide if @lithiumbuilder should support `align-contents`. Appreciate your feedback!

#buildinpublic, #webdev
#buildinpublic update:

The Flexbox widget is integrated into the editor and it's working great.

Centering a <div> has never been this fast. 😂
#buildinpublic update:

2nd iteration of the Flexbox alignment widget:

Advanced alignment options can now be quickly set by clicking on the x and y axis labels of the widget.

Also added some tooltips.
Almost done the Flex Layout component.

Quite happy with the result.

#buildinpublic
#buildinpublic update:

Here's mockup of what I'll be working on next: the Flex layout panel.

It's kind of similar to Figma's, but with an improvement:

You can Alt-click to quickly switch between 'packed' alignments and 'space-between'.
Spent 2 hours designing my twitter banner and profile pic. That's considered marketing right? 😅

#buildinpublic
Progress update on @lithiumbuilder:

✅ Create new project flow
✅ Recently opened documents (+ search and filtering)
✅ Form validations

Alright, the 'boring' but necessary stuff are done. Next up: are editor functions.

#buildinpublic
#buildinpublic update:

Finally got saving/opening files done!

First time doing it in Electron. I've always saved files to a server, so this is kind of new to me.

Learnt a lot about Electron's inter-process communication. It's more or less like communicating with a REST API.
Opening and saving files done.
#buildinpublic update:

Added a couple of new components to lithium-ui:
✅ Card component
✅ Search input component
Happy Saturday everyone! Good day to be working on your side hustles.
What are you working on today? #buildinpublic
#buildinpublic update:

✅ designed the home screen for @lithiumbuilder

...and that's it.

Lower back is killing me, going to sleep early today.
#buildinpublic update:

✅ Added routing
✅ Added OS file associations

Next up:
- Saving the project file
- Creating new projects
Tuesday update

The @lithiumbuilder font picker is done! And with that, the basic Text panel is complete! Fun fact: it supports fuzzy search so typing 'tnr' allows you to quickly find 'Times New Roman'

#buildinpublic

Here's a quick demo:👇
Found an obscure way to reduce the payload when using the Google Fonts API while building the font picker for @lithiumbuilder:

Add a `text` query param to get a subset of the fonts with only the letters you need!

Probably only useful in niche cases though! 😆

#buildinpublic
This electric green + black combo is too good not to go dark mode. #buildinpublic
So this is what I'm working on. About 3 months of work on weekends + weeknights. Still quite far from MVP but good enough to show, I guess. #buildinpublic
Preview of the Lithium web builder. This is far from a complete product. A long way to go before MVP.