Skip to main content
HashnodeAnkit Sharma's Blog

Command Palette

Search for a command to run...

Top CSS Frameworks

Published
•6 min read•View as Markdown
Top CSS Frameworks
A
Ankit Kumar Sharma

CSS frameworks are an extremely popular front-end development tool. They can allow developers without vast CSS and JavaScript experience to create beautiful, interactive websites. However, when deciding to use a CSS framework for the first time, it is easy to become overwhelmed by the number of options out there. This article will provide an introduction to CSS frameworks in general, as well as a few of the most popular options available.

What is a CSS Framework?

A CSS framework is a combination of design best-practices and standardized class systems that provide a basic structure for styling a web page. Practically, they are usually an external stylesheet that you link to, giving you a grid system to layout content and a collection of CSS classes to style elements with. Often, frameworks will also provide whole components, which are chunks of HTML that come pre-styled with CSS. These can range from simple buttons to entire forms or navigation bars. Some frameworks also come with font and icon libraries, as well as JavaScript files for animations and interactivity.

Bootstrap

Originally developed at Twitter to create consistency among internal projects, Bootstrap has grown to become one of the most popular CSS frameworks, often being the default choice for many developers. It offers a wide variety of page templates and UI components (chunks of HTML you can add to your code) and tons of styling options for everything. Bootstrap also offers templates that include JavaScript for interactivity and animations. While it’s relatively simple to get started on, the massive amount of options can make it easy to get lost in as a beginner. Bootstrap has also become so ubiquitous that some developers worry websites styled with it won’t stand out.

Bulma

Bulma is an lightweight CSS-only framework. Bulma is extremely beginner-friendly, with intuitive class names and easy-to-follow startup tutorial. I also think Bulma is one of the most beautiful CSS frameworks straight out of the box, with a clean and colorful aesthetic. Additionally, the community is very passionate, so you can find a lot of helpful guides and code snippets to guide you along the way. Since Bulma is CSS only, you will need to provide your own JavaScript if needed.

Tailwind CSS

Tailwind CSS is a little bit different than other frameworks, because it doesn’t focus so much on delivering ready to use components, but it’s more about utility classes, which help developers to build what they need. It’s more like giving ready building blocks for components.

Sometimes it may look ugly while we add too many classes, but the goal is reached. Although it’s not a primary goal of the Tailwind CSS framework, the elements have a pretty beautiful design.

Foundation

Foundation is an industrial-grade CSS framework favored by large companies such as eBay, Disney, and Mozilla. While some think it isn’t as aesthetically pleasing as Bootstrap out of the box, it is one of the most powerful frameworks available. This is because it takes a minimalist approach to style pre-built components, allowing designers more room to customize the final product. Foundation is the most complex framework on this list, and I wouldn’t recommend it for beginners.

Semantic UI

Semantic UI is another competitor, among other CSS frameworks. It grew with the unique approach they have, focusing on human-friendly HTML, and exactly that’s the feeling I got using Semantic UI.

The human-friendly HTML approach made Semantic UI an easy to learn framework which is easily accessible even for beginners. While using Semantic UI, the image has simple the "ui image" class, and if you want to change the size, nothing complicated. It’s enough to add a "small" class.

Materialize

Materialize CSS is built on Google’s Material design principles. Material is one of the most popular design languages, with most of Google’s applications, including YouTube and Google Drive, being built on its principles. If you are going for the look and feel of google and android, this is likely the framework for you.

#coding#2articles1week#hashnode#programming-ciovqvfcb008mb253jrczo9ye#programming
476 views

Comments (4)

Join the discussion
C
Core Anderson4y ago

Great Article i like this post to share its good for every one to get big discount here. Missoma Discount Codes Shop online for more luxury jewelry for less when you use Missoma Discount Codes. For great gift ideas and inspiration, you can find it all, with the perfect accessories for less when you shop online. Choose from Rings, Necklaces, Bracelets, and much more for less when you use Missoma promo codes here at The Telegraph. Visit our voucher page with is updated daily with the latest offers.

A
Ana Vela5y ago

This is such a helpful post along with the comments! I've used Bootstrap and a little bit of Tailwind. Bulma sounds like an interesting one.

2
A
Ankit Kumar Sharma5y ago

Ana Vela Thanks for the compliment. Bulma is an interesting framework. And, it pretty easy to learn.

4
K
Kyle Roof5y ago

Hi Ankit,

Kudos for your easy-to-understand article. We as a team of 5 individuals came up with an idea to start a coupon site where other business owners & website webmasters can list their company profiles, share news & updates, list their ongoing sales & offers such as black Friday or any other event sales.

So for such a project, what would be the best Framework to be used? I know that we're not expert in custom-coding so we need a tool that can help us build a coupon aggregating & staking site such as these ones:

  1. https://www.groupon.com/
  2. https://grabhosts.net/

The look should not be necessarily the same as the above ones but the functionality should be the same.

What framework would you recommend for such a project?

Kyle

4
A
Ankit Kumar Sharma5y ago

Hi Kyle Roof. I am glad you liked the article.

According to me, You can use any one out of Bootstrap, Bulma or Tailwind CSS.

You can make any layout using bootstrap and it provides you a lot of options for doing the job. Just add the correct classes and you are good to go. If you want rapid development, you can use Bootstrap.

Bulma is a good option. Though, In my opinion, it does not gives you as much customizable options.

I have heard quite a lot of positive things about Tailwind. That you could customize your site better with Tailwind. It is is not opinionated and let’s you create you own unique design. But, I have not use Tailwind CSS much, so I would suggest you should consult someone regarding if Tailwind would be a suitable option.

I hope that solves your query. I you have any more doubts. Feel free to connect on Discord or Twitter.

20
E
Edidiong Asikpo (Didi)5y ago

Here I was thinking the only existing CSS frameworks are Tailwind CSS and Bootstrap.

Have you tried using the 5 different frameworks you talked about in this article? If yes, what's your experience with them?

9
C
Caleb5y ago

I'm not the author ofc, but I've tried Bootstrap, Bulma, and Tailwind, so I decided to share my thoughts...

Bootstrap: Great for personal projects when you just need something quick, but 1) It will often give you big build sizes and 2) IMO, the design of Bootstrap websites just doesn't look very professional.

Bulma: Great for personal projects and the build size is not so bad. Also, the design isn't too bad either. However, the downside is that it's not as easy to customize and give it your own style. (Same with Bootstrap). In some cases if you use it properly it's awesome, but sometimes not.

TailwindCSS: This is my favorite! You can have absolutely any design/style you want and the CSS classes don't take very long to learn. After just a little bit of writing TailwindCSS, you'll dread writing raw CSS. Using it with a CDN will give you horrible build sizes, but if you use it with a build tool (very simple), build sizes are very small. Only downside is that sometimes when you need something really quick it takes just a bit longer to style everything...

8
E
Edidiong Asikpo (Didi)5y ago

Caleb ah, this makes a lot of sense. Thanks for breaking it down. I've tried using Bootstrap before and it was pretty cool but I've just been a sucker for raw CSS. I will try out TailwindCSS and Bulma before the year runs out and hopefully stick to one of them.

1
A
Ankit Kumar Sharma5y ago

Edidiong Asikpo Thanks for the comment. I completely agree with Caleb view about these frameworks..

Here are my views on some of the frameworks I have used :-

1) Bootstrap :- One of the most popular frameworks out there. I personally like using it and most projects I have encountered are primarily based on Bootstrap. There have been many dislikes in the community about Bootstrap which have been eliminated by the team in newer versions. To name a few :-

  • Due to large bundle size, they provide different file for inclusion in your project like alerts, breadcrumbs, cards, etc. to use as per your preference.
  • Removal of jQuery in Bootstpra 5 as it creates an external dependency and due to its huge file size, which increases load time.
  • Introduction of new icons which could be used regardless of Bootstrap used in project or not.

But, one thing I found pretty common is that Bootstrap leads to creation of websites that look very similar. But, due to new design trends, this issue is slowly diminishing.

2) Bulma :- I was introduced to it 8 months back. I found it quite interesting to play around with it. I am also fascinated by how a single person, Jeremy Thomas has created an entire framework giving competition to Bootstrap and getting its recognition in the industry. I had got to work on Bulma as the current project I am working on is on bulma(in production) and we are converting some specific modules to Bootstrap. So, I got to work on Bulma and Bootstrap on daily basis. Also, My portfolio is also build on Bulma. No self promotion intended :)

I have heard about materialize and Tailwind CSS a lot. I have made one fun project to work with Materialize. I haven't worked on Tailwind CSS but i quite recently come across people, tweets and articles giving positive talk about Tailwind. It's gaining lot of attention. I am also planning to work on it in future. That sums up mt experience with these framworks.

Lastly, Edidiong Asikpo. I wanna thank you for commenting. I used to wonder why I don't get comments from you on my articles.(My notifications tabs are full of your comments on other people's articles). Finally, I have your comment on the article. Happy

6
E
Edidiong Asikpo (Didi)5y ago

Thanks for sharing your thoughts on the different CSS frameworks you've worked with. You mentioned that you used Bulma on your portfolio, can you share the link with me? I'd love to see what it looks like.

Lastly, Edidiong Asikpo. I wanna thank you for commenting. I used to wonder why I don't get comments from you on my articles.(My notifications tabs are full of your comments on other people's articles). Finally, I have your comment on the article. Happy

Hahahaha, I will definitely be commenting on your article more often Ankit Kumar Sharma. Thank you for writing this article. I love it.

6
A
Ankit Kumar Sharma5y ago

Edidiong Asikpo

Here's the link to my simple portfolio :- [Link] (https://ankits.me/).

I would be gladly waiting for your comments on my future articles. Thanks a lot.

2

More from this blog

Ankit Sharma's Blog

14 posts

Hey there 👋

I am Ankit Kumar Sharma. A Full Stack Developer from India. I am passionate about design and UX. An avid JavaScript fan.

I am here to share everything I’ve learned about coding and web development with you while learning from the experience and knowledge of other developers like you.

Want to know more or get in touch : Website