I would like to start the discussion about introducing Bootstrap, or parts of Bootstrap, in Piwik.
The idea is that standard CSS classes and HTML structures like container, columns, buttons, forms, etc. make it much easier for core and plugin developers: no need to always code custom CSS or explore other plugins to find some reusable CSS.
It would also allow to get rid of some HTML/CSS/JS code for components like buttons, forms, alerts, and maybe tables, panels (for widgets), etc.
FYI Bootstrap is written in less and customizable with variables. It is also written as independent components, so to give it a try I have started integrating the base container classes and grid system. This was easier than I thought as I was able to rewrite the dashboard with it, so we could consider doing this for more parts of Bootstrap…
What do you think of this idea?
Well I agree using Bootstrap because It's a common front end framework more friendly to designers, at the same time I suggest keeping an eye on WAI-ARIA support because would be easier for the maintenance of accessibility issues.
If BSD license is GPL compatible, we could also rely on Paypal's Boodstrap Accessibility Plugin
Now that #7481 is done it's good to see that the main issue was the change from
box-sizing: content-box to
box-sizing: border-box. The rest was pretty easy to deal with.
I am now planning to introduce the entirety of Bootstrap in Piwik. The most compelling reason is because of the redesigns of the interface that are planned (e.g. #7450, #7492, etc.): I started on #7450 and having Bootstrap classes would make the whole thing easier.
I also want to refactor a bit the CSS of plugins. The current situation is plugins define CSS quite randomly and it gets applied in the plugin but also everywhere. For example CSS from the dashboard gets apply in the admin section and vice-versa.
My goal is:
p, rather if it's for the admin section do something like
With this it should be much easier to know what CSS classes are available, it should be easier to maintain them because plugins shouldn't mess up with the base stuff, hopefully that should reduce the amount of CSS in Piwik, themes should be more powerful (i.e. able to customize more stuff), etc.
The main drawback I can imagine is that some current plugin's CSS might have to be updated (else the plugin's look might have changed because of the changes in CSS classes). We should maybe discuss how much "BC" we want to preserve (keeping in mind that the more BC we need, the harder/longer it will be).
Hi @tzi not sure if you are available, but maybe we could work together on this project sometime?
I'm not sure we should include all of bootstrap for now
For example CSS from the dashboard gets apply in the admin section and vice-versa.
+1 to fix this but it can and should be fixed without need to involve bootstrap (by fixing this
Responsive was a nice feature for example, but this does not need the whole of bootstrap and I think was already done in another PR (although maybe not everywhere in all screens).
but also they can theme the base CSS classes (e.g. the notification boxes, etc. etc.)
Theme designers can already theme the boxes, it's just "not documented" although it works... Using bootstrap would be nice as it's kind of a standard but: it's not really a standard (a new standard could be born in next 1 or 2 years), and we don't really need to improve the Theming part of the platform (considering themes are good feature but not as important as platform, speed, plugins, security, usability, etc.).
So in theory it's good idea, but considering the work involved, we can't afford it yet. note that it would good to fix the separate issues that you may have listed above, if we need to have them fixed. Already fixing those as first steps, would help us the day we decide to use a CSS standard like boostrap. Considering there are a lot of important tasks to work on, eg. in 2.13.0 already and then in preparation to upcoming Piwik 3.0.0 I think this has to wait for 3.x sometime.
We should maybe discuss how much "BC" we want to preserve (keeping in mind that the more BC we need, the harder/longer it will be).
Haven't really looked at this in detail, but is it possible to maintain BC, by adding a layer of LESS that maps old CSS to new bootstrap CSS? Could keep this in for a while, and remove it later after plugins have been converted.
Hi Piwik team!
Bootstrap is a great toolkit. It's well known by the plugin developers & well documented!
It could be great to have it on Piwik, it could ease development & improve our CSS best practices.
For example, we really should use
But Bootstrap is not perfect and it could take a lot of migration work.
Perhaps we can create our own simple documentation and it could solve the problem!
The great part is, if we need custom component, specific to the Piwik need, it will be documented and usable. With Bootstrap, we are limited to the Bootstrap documentation.
Great idea @tzi
While it would be nice to have something like Bootstrap or Foundation in Piwik it is not really so important or urgent for me. More important is to have such a styleguide which we could start to create bit by bit when working on the new screens such as updates. Keeping BC etc. will be quite hard I reckon, hard to test and will lead in a mess.
Theme developers are supposed to only change colors and fonts. This is our current API for themes and I think it will be good to keep it like this. It is a good trade-off. Easy to maintain while giving the developers to change quite a lot. Often they just want to adjust the colors to their corporate identity which can be done by changing 2 or 4 less variables.
Plugin developers do ideally not have to do deal so much with CSS if at all. I'd rather provide "components" that do all the work for the devs to actually guarantee the look and behaviour will be consistent everywhere. Eg see #6951. Same for reports etc. where plugin developers don't have to deal with CSS. Only if they build custom pages they will actually need such CSS but don't think this will be often the case.
For us core developers it would be great but think a styleguide would do the job as well and we would benefit from that much more. Plugin developers if they need CSS as well.
@tzi Really like your idea!
Note that we started using bootstrap useful grid system as we had several grid issues before.
At this point we've decided not to introduce more of Bootstrap in Piwik - we will re-visit using a framework such as boostrap or another one in the future, in months or next year.
@tzi feel free to create an issue with your proposal of "style guide" - creators of plugins and themes would love such tool
I fully agree with you guys :+1:
Building the style guide could be also an useful workshop stage for students doing communication, design and information technology. Just in case.