In today’s world we are well familiar with all the CSS Frameworks. We all know how much easy and less laborious can adding styles be after using frameworks in our webpage, just add a cdn link and use pre-defined classes to style according to our needs. We don’t need to do everything from scratch We will be fully equipped to build clean and maintainable projects in a very short amount of time.
But, do you really need to use a CSS Framework in your next project?
According to me , the answer is – Not really.
When use Vanilla CSS
When you start your learning , you should always learn Vanilla CSS completely first. There is a saying that CSS is easy to start but tough to master . But I like styling the webpage in Vanilla CSS a lot. It gives me power to add my own custom styles and then I know all the ins and outs about it. Moreover, the short and straight the code will be , the more fast the website will load, unlike the frameworks that contain lots of unnecessary data which may affect the speed of the website.
But then the question arrives, The Framework include features which make the website without media queries. Can Vanilla CSS do that ? Can Vanilla CSS help the user to make those amazing cool responsive galleries, navbars, sliders, animations and many other cool stuffs.
The answer is Yes !! you can. As we all know those frameworks are nothing but already written CSS code, so what those frameworks can do, Vanilla CSS can do better. Let’s talk about those CSS properties which may help us do that.
- Flex
The flex property in CSS is used to set the length of flexible items. The flex property is the combination of flex grow, flex shrink and flex basis property. The flex property is much responsive and mobile friendly.
Check out this pen .Just few lines of code and you too can make responsive and awesome webpage.
Here I have included some of the best resource to learn flexbox. So if you don’t know about Flexbox ,take out some time today to learn it.
- A Complete Guide to Flexbox - CSS Tricks
- Flexbox CSS - Traversy Media
- Flexbox Playground - A codepen for flexbox
2. Grid The one I use while making webpages is CSS Grid. Like Tables, grid layout enables the developer to align items in rows and columns. It allows you to create a flexible and two dimensional layouts. It consists of a parent element with one more child elements.
Check out this pen for grid layout implementation.
Here are some resources where you can learn Grid layout.
A Complete Guide to Grid - CSS Tricks
CSS Grid Layout Crash Course - Traversy Media
CSS Grid Layout - MDN Docs
Other than these you can also use inspirational UI Snippets from the web. Here are some resources where you can find these.
When use Frameworks
Before talking about their application ,first lets look at the some of the best CSS Frameworks available.
Bootstrap is the world’s best CSS framework with large community support. This framework is built in HTML, SASS, and javascript. Currently, Bootstrap 4.5.0 is the latest version with more responsiveness with utility classes and new components. It is directed at the responsive, mobile-first front end development which makes it usable for any device and developer-friendly. Bootstrap supports all modern browsers. The best advantage of bootstrap is, this framework has great javascript components with custom files or CDN.
Materialize-CSS Materialize CSS is a responsive front-end framework based on the material design with collections of UI-components with minimal effects on which users can easily attract. Materialize is fully responsive in Tablets and mobile. It is easy to learn as well as excellent documentation is provided. This framework has large community support and great positive feedback. Materialize CSS allows you to customize options with an impressive set of color collections.
Tailwind CSS is a highly customizable, low-level utility first CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. Unlike other CSS frameworks (Bootstrap or Materialize CSS) it doesn’t come with predefined components. Instead, it operates on a lower level and offers you a set of CSS helper classes. By using these classes you can rapidly create custom design easily. Tailwind CSS lets you create your own unique design.
Material Design Lite is a UI component library created with CSS, HTML, and JavaScript. It lets you add a Material Design look and feel to your websites. Besides, It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. You can use the components to construct attractive, consistent, and functional web pages and web apps. Pages developed with MDL will be able to support all the modern web design principles like browser portability, graceful degradation, and device independence.
Bulma is a responsive modern CSS framework. This framework is built-in HTML, SASS CSS prospector, and CSS flexbox. Bulma gives lots of options to customize with your requirements using sass files, web packs, and variables. Bulma is created in pure CSS., which means while using the framework all you need is one .css file and no .js.
Semantic UI is built around the unique goal of creating a shared vocabulary around UI. Based on natural language principles, Semantic empowers designers and developers by making the code more readable and easier to understand. Users say Semantic UI is easy to work with and just makes sense.
Semantic UI stands out with functionality that goes beyond a CSS framework and includes simplified debugging, and the ability to define elements, collections, views, modules, and behaviors of UI elements.
Now, as discussed above we just need to copy and paste a CDN link in our HTML file and use those classes according to our webpage template.
Enough of the introduction, now let’s come to the point that when can you use these framework. These frameworks makes you code faster and resulting in the speedy development of your app .Moreover it can provide you clean and symmetrical layouts. But as I have told above CSS Frameworks are good fit only when you have the complete knowledge of Vanilla CSS. They are also cross browser compatible. All we have to do is just focus on designing and creating parts of the website. These frameworks already contain a well instructed documentation that is helpful in learning how to use the framework effectively. More the projects on frameworks, more people work on it, vaster the community the more popular the framework is.
Conclusion
Using frameworks or not in your next project, its upto you. The key is you should know what’s best for you and practice them well.
With this I would like to conclude, that’s all from my side. Share your tips and tricks along with more suggestions in the comments.