css icon indicating copy to clipboard operation
css copied to clipboard

✨ Master CSS Design System

Open 1aron opened this issue 3 years ago • 8 comments

1aron avatar Jan 30 '23 01:01 1aron

Would it be possible to provide a design system name with the -ds parameter? If no design system name is specified then CLI should generate the default Master CSS design system.

npx mcss init -ds      // Default design system
npx mcss init -ds material  //Google Material design system

ansarizafar avatar Jan 30 '23 03:01 ansarizafar

Would it be possible to provide a design system name with the -ds parameter? If no design system name is specified then CLI should generate the default Master CSS design system.

npx mcss init -ds      // Default design system
npx mcss init -ds material  //Google Material design system

It's great.

1aron avatar Jan 30 '23 04:01 1aron

Even better If don't have to use -ds for default Master design system

npx mcss init     // Default design system
npx mcss init -ds material  //Google Material design system

ansarizafar avatar Jan 30 '23 07:01 ansarizafar

Even better If don't have to use -ds for default Master design system

npx mcss init     // Default design system
npx mcss init -ds material  //Google Material design system

You are very careful! I was thinking the same thing.

npx mcss init // with Master CSS Design System
npx mcss init --config material // with Material Design System
npx mcss init --config ant // with Ant Design System
...

1aron avatar Jan 30 '23 07:01 1aron

In my opinion design system name as a value is better than a flag for each design system. as there can be many different design system and we should also be able to use our own design system from git repo or local folder

npx mcss init -ds material  //Google Material design system
npx mcss init -ds ant 
npx mcss init -ds ../mydesignsystem

ansarizafar avatar Jan 30 '23 08:01 ansarizafar

I also agree that its a pretty good idea to opt-in to the design system by default. Its valuable for most people and if they don't get it right away they may not be aware they would have to use a flag and then they may not see the value. If they want to opt-out they can delete the master.css.js file that gets auto-generated when they install mastercss.

And I think its great to have other design systems able to opt-in via -ds material super useful if you have all the design system info

chukwumaokere avatar Jan 30 '23 23:01 chukwumaokere

Related to taking in configs for design systems:

I just saw adhamwathans tweet https://twitter.com/adamwathan/status/1620152751572533249?s=46&t=jRfBdbhrsfnIFm3bqal5Fw And hes getting some tailwind configs from people and that made me think hes probably thinking of doing something similar where you can initialize tailwind with custom community based configs.

Perhaps people will be able to publish their configs with screnshots to a repository and then users can install it by giving the name/link to the config like: npx tailwind init --config https://community.tailwind.com/configs/someOtherGuys.config.js

Or something related to this. If not, I think theres still some value there that masterCSS can explore, if you also see it worthwhile

Aside from this: I think that something we can consider is having MasterCSS able to read tailwind configs: tailwind.config.js and interpret them into mastercss so users can use their tailwind design system but MasterCSS syntax if they prefer MasterCSS's syntax but a tailwind design system. That gives people who like the tailwind design system able to leverage mastercss's syntax and other tooling. That way you dont create a divide but share the market a bit more.

Making transitioning from TailwindCSS to MasterCSS super easy is a great way to increase MasterCSS's presence. The ability to utilize Tailwind's config or convert from a tailwind config file to a master.css.js file would be super powerful for developer experience

chukwumaokere avatar Jan 31 '23 00:01 chukwumaokere

Related to taking in configs for design systems:

I just saw adhamwathans tweet https://twitter.com/adamwathan/status/1620152751572533249?s=46&t=jRfBdbhrsfnIFm3bqal5Fw And hes getting some tailwind configs from people and that made me think hes probably thinking of doing something similar where you can initialize tailwind with custom community based configs.

Perhaps people will be able to publish their configs with screnshots to a repository and then users can install it by giving the name/link to the config like: npx tailwind init --config https://community.tailwind.com/configs/someOtherGuys.config.js

Or something related to this. If not, I think theres still some value there that masterCSS can explore, if you also see it worthwhile

Aside from this: I think that something we can consider is having MasterCSS able to read tailwind configs: tailwind.config.js and interpret them into mastercss so users can use their tailwind design system but MasterCSS syntax if they prefer MasterCSS's syntax but a tailwind design system. That gives people who like the tailwind design system able to leverage mastercss's syntax and other tooling. That way you dont create a divide but share the market a bit more.

Making transitioning from TailwindCSS to MasterCSS super easy is a great way to increase MasterCSS's presence. The ability to utilize Tailwind's config or convert from a tailwind config file to a master.css.js file would be super powerful for developer experience

Getting configuration from remote is very useful, but Master CSS may provide a standard NPM package authoring guide in the future; asynchronous configuration cannot be achieved because Master CSS's JIT is executed synchronously.

1aron avatar Feb 03 '23 11:02 1aron