In search of the perfect css-framework. Maxmertkit widget manager

The previous post describing the maxmertkit framework has received a great response. I especially liked the framework, for some reason, the Japanese, but I received the best constructive criticism and help from the community. Now to the point.

Current frameworks, including mine, have a modular structure. But all of these modules are somewhat dependent on each other. This is bad. This is the problem I want to solve.



I will give an example.

Suppose I have a widget button . It is part of the widget group . I can use the button both separately and as part of a group. But what if I change the button at my discretion? Then, as a part of the group, it will also change, but I want it to look like in the group as before.

Unfortunately, there is no good solution to this problem. Therefore, I started my second project that solves this problem: mwm (maxmertkit widget manager).



Inspired by the idea of ​​npm, I have already done the manager himself (I will post it later with an article-explanation), and now I am developing a portal with widgets and themes.

What technologies are used?

• The nodejs is used by the manager to manipulate files, query the server, and compile sass.
• npm for the manager.
• sass to compile css.
• Mwm itself is written using coffeescript.

')

How will this work?

For example, to install the widget button (in the html-code you will need to use .-btn )

 mwm install btn 

After that, the manager will download this widget, compile your framework and write the result in a css-file. All you have to do is use it!

If you need a widget with specific themes (which you found on the portal), then

 mwm install group -t error warning 

Now you can use themes for this widget:

 <div class="-group -error-"> <a href="#" class="-btn">button 1</a> <a href="#" class="-btn">button 2</a> </div> 

What about the dependence of the group widget on the btn widget? Like nodejs, they are independent of each other. This is made possible by the SASS code that is generated using nodejs and placed in the dependency folder of a specific widget. You can change the btn widget, it will not be modified inside the group .



As before, in maxmertkit, any theme will be applicable to any widget, but you can specifically specify which theme you want to use with which widget. This reduces the amount of css-code.

Publication

You can publish widgets in the same way as in npm.

A little more automation

As in npm, the maxmertkit widget manager has a file maxmertkit.json, which describes your css framework and its dependencies. That is, finding a new version of the css widget on the portal, you change its version in maxmertkit.json and execute

 mwm update 

Similarly, you can change the themes that your widget uses.



I wanted to lay out the manager himself now, but he is useless without a portal, so I will publish everything at once. Timing? I plan in two months. While I organized a fundraiser, the money from which will go to pay for the server, where maxmertkit-portal with widgets, themes and modifiers will be deployed - https://www.bountysource.com/#fundraisers/85 .

Thanks for the feedback about maxmertkit, I am very grateful to you!



Site - http://maxmert.com/

Github - https://github.com/maxmert/maxmertkit