I have to develop a plugin for Wordpress. Most of the styles are based on the Bootstrap CSS library. However, for some design decisions I have to redefine the default behaviour of bootstrap. What is the recommended way how Bootstrap features are to be redefined?
One example: I need a zebra striped table. The bootstrap class table-striped has already much of the features I need. However the stripes should be green not gray and the contrast should be a bit stronger. In addition some of the features of the Bootstrap class table must e changed – for example padding and font-size.
The clients who are installing my plugin may or may not update to new versions of Wordpress and Bootstrap. Some of the might be unable to change the Wordpress or Bootstrap installation which exists already on their web host. For this reason it is probably not a solution to modify Wordpress files or the Bootstrap original CSS. In addition: The solution must work with various browsers – not just browsers of the last generation.
I have looked in various forums and found a number of suggestions – including .less and recompiling a modified version of Bootstrap. However, many of these solutions look more like hacks or “work-arounds” rather than a “recommended software architecture” - a kind industrial standard. Other solutions work only with very new browsers.
To summarize my question: How should we integrate modifications like these outlined above into a Wordpress / Bootstrap environment?
If you're worried about Bootstrap updates you could always do some kind of "child theme" type of treatment: You can be using your main style.css to overwrite the bootstrap styles. Then your WordPress theme and Bootstrap styles can be independent.
Related
I'm confused with some css templates in bootstrap.
I've been a developer for years already but I never worked in a company that let me create an entire website as front-end developer say for example an e-commerce site.
So if someone would say "do an e-commerce site", do I have to ask them for a ready made css template? If so, then is it possible there are already other sites that bought it, other than me, e.g. we may have the same web face?
I am not really an expert in css nor an artist. I have created a website for personal use but it was pure bootstrap. I can see other templates in bootstrap; they have other components manipulated, like a different menu which is not present in their list of components.
How did they do that? Is it another individual css, js, html component? Do I have to create my own component sometimes?
For you to understand me, I can create relatively easily any site written in either React or Angular but I cannot create my own css design.
The examples and templates that you see in Bootstrap uses the Bootstrap framework, but the CSS and JS design components are changed to better define what the user wants it to be like.
For example
form-group-lg select.form-control{height:46px;line-height:46px}
This is the pre-defined CSS value from Bootstrap CDN, changing this CSS value to something else, changes your design, but you still are based on Boostrap. Basically, Bootstrap is not only about design, it's following a library, a framework, a skeleton to make your web development (specially frontend) easier.
Most "regular" websites I've seen generally use Twitter Bootstrap, at least for the grid layout.
Most themes I've seen to WordPress does not use Bootstrap, they are often built with a custom grid layout.
Is Wordpress + bootstrap a bad solution? Or why do so few Wordpress themes use bootstrap?
I'd agree with most of the comments, but I'd argue that this is NOT an opinion based question. There's nothing empirically WRONG or BAD about using Bootstrap in WordPress themes. In fact, I do it every single work day. Sage theme is a popular starter theme that uses Bootstrap, and there's plenty others that do as well.
The technologies are perfectly compatible, it's ultimately just up to your design / development goals for the theme. If you desire finer control and don't want to do a bunch of style overrides for a very specific look-and-feel, then maybe Bootstrap isn't right for that particular project. However, there's nothing from the WordPress side of things that would make this a bad solution.
I have already built a site using CSS. Now looking back I regret not taking the chance of using Bootstrap. My website is already built and styled. My questions is, is it possible to use bootstrap even though you already have styled you website without having to remove all the CSS?
Bootstrap uses a set of pre-configured classes to implement it's styling rules..
So unless you somehow incorporated the same class names in your site and intended the same styling as was intended by the Bootstrap developers, you are going to have to make the necessary changes on your own.
That said, if your project is intended to be extended in the future, it may still be a good idea do re-work what you did up until now with Bootstrap, in order to save time in the future (I am assuming that the project is not very large in scope).
There are few things you need to know:
Bootstrap uses box-sizing: content-box so if you are not, it will probably impact all your padding/border stuff.
Bootstrap comes with a reset and few helpers with generic names that can interfere with your own style.
That said it's totally ok to add bootstrap to your project and it should be smooth.
I started to look into DotNetNuke recently as a client asked me to do so.
I noticed straight away that DNN is different from other CMS I'm familiar with in a way that it mixes its own controls with site's presentation. (Other cms like Umbraco, Wordpress, Orchard have separate interfaces for content management).
I'm building a responsive website and using Zurb foundation for it. The problem I have is that DNN's css start to mess Zurb's css. I don't want to edit neither css and the problem seems very serious. Is it addressed somehow in DNN?
Bearing in mind how popular mobile browsing has become responsive desings and hence frameworks like Zurb or Twitter bootstrap will gain more and more popularity. And it looks like DNN doesn't play nicely with them, it may become a huge no no for DNN.
The whole idea of mixing site's presentation with cms controls looks wrong to me. Is it possible to prevent them from mixing and messing with each other?
Cheers.
There is a Portal.css file that always gets loaded no matter what DNN skin you use. Then each DNN skin loads a skin.css file associated with the skin/theme and any other specific CSS files it needs to reference.
The issue you are probably having is that the default styles set in Portal.css are conflicting with your theme. What you may need to do is override the CSS that is causing trouble at the top of your skin file.
But yes, this does happen since DNN declares styles for modal popups, dropdowns, links etc that are used in the admin functionality and since that is inline with the actual site design they can conflict if you are using a framework like bootstrap, etc.
We created a Foundation DNN Skin specifically to solve what you're looking for - https://github.com/Ethanhackett/foundation-5-dnn-skin
It avoids the CSS conflicts and has some jQuery no conflict resolutions which need to be addressed since DNN is on jQuery v1... and Foundation is using jQuery 2...
I hope that helps.
What kind attempts there exist to make Plone 4 themes based on Twitter Bootstrap, preferably 2.0?
I have seen some discussion on mailing list and I'd hope to know what add-ons there already exists before inventing a new one.
http://pypi.python.org/pypi/plonetheme.bootstrap/1.0a1
and
https://github.com/kagesenshi/diazotheme.bootstrap
You don't need to use an add-on per se (though you can). Instead, consider downloading an example template from:
http://twitter.github.com/bootstrap/getting-started.html#examples
Then apply rules to it, as explained here:
http://docs.pythonpackages.com/en/latest/hosted-configs/plone-diazo.html
This approach places a heavier emphasis on HTML/CSS/JavaScript knowledge in general, and less on Plone-specific techniques.
Note that the new (4.3-hopefully) plone.app.theming will contain an example/template theme based on Bootstrap.
It's not intended to be perfect (it also needs to be easy to understand and chop up and reuse), but it shows the basics. See https://github.com/plone/plone.app.theming/tree/optilude-ace/src/plone/app/theming/template for the work in process.
Bootstrap is a starting point to create a webapp. It provides a lot of CSS with associated widget. Mix with Plone will add conflict (forms.css, ...) and not optimised results (weight of page).
Once Plone will have splited CMS UI in overlays it will be easier to build the CMS UI itself on bootstrap or use bootstrap to create a theme (I like their responsive solution).
At the moment you will have many bugs by using existing addons. I have already tried plonetheme.bootstrap and diazotheme.bootstrap.
So if you really want it, get all Plone's CSS in a trash, get bootstrap and start to see what happens ;)