Plugins and themes for Mobi.css@2.0.0

[xcatliu]

I'm thinking about to add plugins and themes system for Mobi.css.

But the idea is not very mature, so Mobi.css@1.0.0 will only include the basic styles. For now I think it's better if we can think over how we can implement plugins and themes. Maybe it's helpful to Mobi.css@1.0.0

Here is something I've thought:

Why plugins

There are too many components a css framework could have. Mobi.css only focus on mobile, but it's still a lot of components we may need. It's redundant if every developers need to develop their own components. So maybe a plugins system is useful.

What should be includes in a plugin

• css files that people can directly use, like dist/mobi-plugin-toast.min.css
• scss files that people can import it to build their own css files. like src/mobi-plugin-toast.scss
• (optional) js files that people can directly use, like dist/mobi-plugin-toast.min.js
• (optional) js files that people can require it to build their own bundled js file. like src/mobi-plugin-toast.js

  Some points

• js is optional, components can only have css files.
• js should be separated from Mobi.css, it should work fine even if people don't use Mobi.css. It's a independent component.

  Why themes

Mobi.css is easily to customize, we can provide a standard way to help people create their own themes, and share it to the community.

A question, how theme works together with plugins?

[pixcai]

Good idea.

I have some suggestions for you: This repo mobi.css should focus on mobi.css itself, DONOT add plugins or themes in this repo. I think we can create an organization, maybe mobi-components? Components and themes should located there.

BTW, adding plugins and themes, are you planing to make Mobi.css grow to a giant like Bootstrap :sweat_smile: ?

---

这个想法不错。

我有一些建议： mobi.css这个仓库关注mobi.css本身就够了，尽可能不要在这个仓库添加插件和主题了。我的想法是可以新建一个组织，例如mobi-components什么的？专门编写mobi.css的插件和主题。

另外，引入插件和主题，这是要向Bootstrap看齐吗？

[xcatliu]

I would agree to you that Mobi.css will focus on itself. Themes and plugins will be third-party libraries.

But I don't agree to create a new organization to maintain them. Themes and plugins shouldn't have to be centralized, or it's to complex for people who want to create a theme or plugin - they need to apply to join the organization first.

My idea is to create a list to show themes and plugins on the official site, like what hexo did: https://hexo.io/plugins/

Plus, it's better to write English when we discuss new features. I want Mobi.css to be more globalized.

Thanks!

[xuxia2013]

Great idea !! will be better than Bootstrap ~ waiting for update .

[xcatliu]

Discuss here: https://github.com/xcatliu/mobi.css/issues/79

After some investigating, I think maybe it's time to use css variables in Mobi.css@2.0.0

First of all, css variables is the future of css. It's already drafted three years ago, and most of modern browsers supports it. There is a demo here.

Secondly, for me, the most useful feature of SASS is variables. Css variables not only extends the all function of SASS variables, but also has some exciting features. Such as scoping, calculating and re-rendering in time.

Last, using css variables can bring us a comfortable way to customizing themes, just need to override some variables. No more compiling!

[xcatliu]

The design for theme system is ready. However, I didn't came up with a good idea for plugin system.

Maybe we can add only theme system for 2.0.0 and leave plugin system for next major update?

[xcatliu]

Update to v3.0.0，plugins and themes are stable features now!