#Create my own css framework

18 messages · Page 1 of 1 (latest)

umbral isle
#

Hi everyone,

I'm thinking about creating a CSS framework like tailwind from scratch, and I want to use Bun along with either unplugin, Vite, or Rollup. The problem is, I don't even know where to start. I know how to use TypeScript and I understand the logic, but I'm lost when it comes to figuring out where to begin.

Any advice or pointers would be greatly appreciated. Thanks in advance!

formal geyser
#

not sure if this is the kind of help you want, but the first thing before you even start coding is to get a solid idea of your goals and the general feature set/user experience. you don't have to plan out every detail, but at least the broad strokes

for example when i hear "CSS framework" i don't even necessarily think of a program you have to run. it could just be a collection of CSS files, which i think is one of the ways tailwind is distributed (and if not certainly other CSS frameworks are)

umbral isle
# formal geyser not sure if this is the kind of help you want, but the first thing before you ev...

Thanks for the input, I really appreciate it!

To add a bit more detail: I'm aiming to implement a Just-In-Time (JIT) compilation for the CSS framework. One of my goals is to simplify Tailwind classes even further, making them more intuitive and streamlined. I also want to include a few additional features that I feel would make the development process smoother for specific use cases.

The idea is to provide an experience similar to Tailwind, but with less complexity in the class naming, and maybe some added utilities that would make common tasks even easier.

Any advice on where I could start with this, considering I want to use Bun and integrate tools like unplugin, Vite, or Rollup? Thanks again for taking the time to help!

#

Additionally, I'd love to have autocompletion support for these classes, just like Tailwind. However, I honestly have no idea how to go about implementing that.

formal geyser
#

i'm getting tripped by your "where to start" question. it sounds like you have a good idea of what you want to build and know what tools you want to use to build it, so the next step is writing some code. is there a specific thing you're stuck on?

umbral isle
#

sorry for my english i'm a french speaker using a translator

formal geyser
#

if you know for sure that's the tech stack you want to use then i'd start with a tutorial or hello world program so you can get comfortable. reading docs is always good too. but also if you're unfamiliar with this stuff then don't lock yourself in before you know the lay of the land

formal geyser
red walrus
#

vite is in everything

#

besides nextjs

umbral isle
formal geyser
#

vite uses rollup

red walrus
#

under the hood

umbral isle
#

I've just seen my bad thks

#

thnks for helping

umbral isle