Lists Kit

A plain HTML, CSS, Javascript boilerplate for info directories / listings

Added responsive navbar, added big font look, improved media queries

Added carousel slider, added animated gradient to hero CTA btn, lots of fixes to spacing, media queries

Added script to toggle background-color of filter btn, added float right to card btn (so it looks less like Bootstrap), added feature icons as img tags instead

Added hero section. Added load more. Tweaked load more to work with filters, search. Now it's starting to look like a proper website!

Decided to keep this version as an embeddable widget/plugin (for Carrd, or any other website)

Toyed with daisyUI, Tailwind, found a really awesome Nuxt 3 template (Nuxtwind Daisy) but still unsure. In the end, gravitated towards just plain CSS for now

Researching on HTML templates. Should I use HTML over Tailwind/Bulma? 🤔

Felt too flu-ed out today to get much done, but added some style tweaks at least! I think next step is to just fork it and build the site I need for ketolistsingapore, keyboardsg and add more features to the boilerplate based on real world execution rather than dreaming up feature I need in the boilerplate in abstract

Played around more with DALL-E 3 for app logo/icon until I ran out of credits

Private repo and deployed! - https://listskit.netlify.app/

Fajar Siddiq

I LOVE THIS DUDE!!!! i have design idea for thissssssssss

0 Likes
Jason Leow Author

Oooh what design idea?! Share share!

0 Likes

Quick work on og image

Fajar Siddiq

what you use to store the list for directory? API like excel sheet?

0 Likes
Jason Leow Author

So far just a Javascript JSON array. Direct editing on Github probably in near term? Considering some sort of rough CMS to edit the data, or csv upload in (far) future

0 Likes

New project! Lists Kit - a plain HTML, CSS, Javascript info directory/listing boilerplate

Jason Leow Author

And guess what 80% done by ChatGPT

0 Likes
Fajar Siddiq

FRESHHHHHHH

0 Likes