I'm little confused with the motive and need for frameworks. At what stage should I use frameworks? For example, if I want to use some CSS framework, should I learn CSS at pro or advanced level to use it?
You should start using frameworks when it becomes impractical not to for either reasons of complexity, time, or correctness. I will address each case separately:
Complexity: Let's say you've built some website and handcrafted all the CSS for it. It's a very complicated design and keeping track of it is a pain. That's okay for this website but what about the next one? If you had a framework, you could easily manage the bits you want to transfer over as they would be part of the framework and simplify the management of those components by setting them up for you.
Time: You have a client. They have a dog. They love their dog. They want a website about their dog last week because all their friends have dog websites and are vain and loud about it. Do you code all that CSS for their website from scratch? No, you use a framework to set it up, fill in the bits that need to be filled in, get your pay check for a job well done and move on.
Correctness: You have massive codebase that you built all by your lonesome. What if it has a bug in it? It probably has a good many in it. While frameworks are not bug-free, they are less likely to have bugs since they are either open-source and thus have many pairs of eyes looking for bugs or they are built by a company with (ideally) an interest in using the money it makes from selling the framework to fix those bugs that do occur.
All that being said, if you want to really learn something that isn't a framework unto itself, use it without the framework. As far as needing to know something to use a framework, generally there's a simple test. When attempting to learn the framework, do you understand what's going on? If not, go back and learn the relevant bits of the base product and then come back and continue. Repeat until you've mastered the framework.
Let's consider the purpose of a framework:
- Reusing code which others have built and tested.
- Assisting with organizing code for modularity and teamwork.
- Helping enforce platform-specific best practices and rules (e.g. cross-browser support).
- Future enhancements "for free" from the framework maintainers.
For any project of medium to high complexity you will usually want those things. Before using a framework you should have a solid understanding of the underlying technology. Let's take your example of CSS. Get to know it well, then see how a framework such as Bootstrap or a utility such as SASS might save you time and effort.