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

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?

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.

Do you write your own CSS file for mobile-friendly layout?

I love Bootstrap which is a wonderful framework to create a modern and mobile friendly website. But it is a little too large and excessive to me. Currently I am trying to create some small websites. Would I get better off by writing my own CSS codes for the mobile friendly purpose?
It's convenience for the visitor vs the developer.
Using the Bootstrap framework will cause the web developer to save time at the inconvenience of a slower site.
Remember, no matter how big the site, you're probably not even going to be using all of the functions.

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.

Advice on CSS only pinterest type layout?

So I have found a solution for CSS-only Pinterest style layout. I want to use CSS only because jQuery Masonry or whatever just seems less respectable.
I am a complete beginner who has bever coded anything, and I think it'll be easier to just stick to CSS for now and get good in it.
So I want to create a personal website, and I don't mind using JS elsewhere but for the layout I think I want to do it 'from scratch' without cheating with Masonry, and there is a tutorial for this with only a couple problems [cross browser issues and can't order the grids]. http://cssdeck.com/labs/css-only-pinterest-style-columns-layout
This is my question- how do I implement this into a full website?
I know the basic process of writing a website, but I really don't know where to start with making a website using this code. Can someone please give me a step-by-step on how to make a homepage that links to other pages in the website with this?
And how to customise the boxes so that they act as links to other sections of the website?
I want to do it like windows 8 style, where the homepage is made of tiles, you click on a square and it takes you to another section of the website.
HERE is an example of what I am trying to make- http://builtbybuffalo.com/
So in a sense I am asking for a step by step for beginners on how to code the website I just linked to.
Or where to find that info.
Cheers!

Assistance required Designing website using CSS

I have a question about how to layout the webpages and relate each image together so it can flow together.I have multiple many image that some will be layered partially over each other and some are just side-by-side with some space in between them. as well some pictures will be hyperlinks and some will be hyperlinks wih image changes on hover. as well some will be backgrounds to a links of links. I haven't build a real website before. i Just create applications and I am trying to help my friend with this project
They designed it in PhotoShop, as well they have given me each piece as separate images:
(source: missadventures.ca)
This is a bigger question that can be answered here, and you're going to need some more general knowledge on building sites.
First, decide whether you want to hand-code the site or use a WYSIWYG editor. If you want to use a WYSIWYG, Adobe Dreamweaver is easy to use and very good.
Now onto the code part. Regardless of your previous choice, you should have a basic understanding of HTML and CSS just for debugging. These two books helped me immensely when I was starting out:
Designing with Web Standards
Eric Meyer on CSS
Along with StackOverflow, you can also use the following sites as learning tools and a reference:
http://www.alistapart.com
http://www.thinkvitamin.com
http://www.devguru.com
Finally, make sure to install the Firebug debugging tool for Firefox
Good luck!

Resources