Responsive wordpress site using Twitter Bootstrap - wordpress

I am working on a blog redesign and I am well acquainted with responsive design. I am not so familiar with wordpress though, so I am thinking of using twitter bootstrap. My question is, if I customize my stylesheets and other files(like header.php etc) can a bootstrap update erase all my changes? What would be the bets way to keep bootstrap as a base and building from there? I have my design specs from a designer, so I have to customize or build from scratch.

Related

Create own css template or buy ready made css template in bootstrap

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.

Is it bad to use bootstrap in a Wordpress theme?

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.

Switching from Twitter Bootstrap to TODC Bootstrap: What's involved?

Currently on our website, we are using Twitter Bootstrap just the way it came. It's a nice theme and allowed us to make a site that looked decently professional very quickly, but the three of us working on the website agree that we'd prefer a Google-styled theme, like the kind used in Google Inbox or their new tool Google Classroom.
Initially, I didn't want to switch because of the amount of work that would be involved in going from Bootstrap to Google's Material Design. After a little searching I found a website called TODC Bootstrap which looks promising - it's Bootstrap, but with a Google theme.
I was wondering if anyone knew how I would go about switching from one to the other and what's involved. Is it as easy as swapping some CSS stylesheets, or are some of the classnames and such different so I have to modify my HTML a bit?

How to turn a Wordpress site to be responsive

By Simple curiosity purpose: Suppose we have a WordPress theme that is not responsive and we want to apply changes for it to become responsive.
How do I get started?
Do I Install bootstrap? Or without bootstrap and try each element to make it responsive?
I want to know how it is easier, faster and more professional.
Also I want to know and what tools you use (free) when you change WordPress themes.
From past experience,
client want to retain existing theme(non-responsive theme),
the solution was used https://wordpress.org/plugins/any-mobile-theme-switcher/
then install additional responsive theme(may it own dev or purchase) with the plugin to cater the client's need.
If no need to retain existing theme,
you may start with bootstrap or other responsive theme.

Page Builder by SiteOrigin and CSS Framework

If I was creating a custom WP theme using ZURB Foundation, but my client needed a page builder to help build pages and/or posts in the future (say it's for a photographer who constantly posts photos in a structured grid), would it be poor practice to combine using a CSS framework and Page Builder? Is there any forks of Page Builder that have implemented a popular CSS framework (Bootstrap, ZURB Foundation)?
I am using Pagebuilder with a Foundation6 Framework. Works like a charm, as PB overrides styles and is responsive out of the box. But you can easily add new widgets. I combined the custom widgets (with F6 styles) and the original PB Widgets. So i got a perfect install.
you can get started here: https://siteorigin.com/docs/widgets-bundle/getting-started/creating-a-widget/ I really recommend to download the example files from github which are found here: https://github.com/siteorigin/so-dev-examples
good luck ;) If you need support for custom F6 Widgets tell me :)
All the best

Resources