{"componentChunkName":"component---src-templates-blog-post-js","path":"/bulma-io/","result":{"data":{"markdownRemark":{"html":"

I've been using Bootstrap for a long time for personal projects or just to mock something up. Bootstrap is great. It has great library of most of everything you would need along with great documentation. Because it is so popular, it's also got a lot of support. We are currently on Bootstrap v4.4.1. Version 3 came out in 2013. Seven years ago as of this writing!

\n

There are plenty of other front-end frameworks out there. However late to the game I am, Bulma hooked me.

\n

\"Bulma is free, open source CSS framework based on Flexbox.\"

\n

You read that correctly, it is only CSS; no javascript. No javascript means it integrates much easier to any JS environment! So matter if you're into Angular, ReactJS, VueJS, or something else, getting going with Bulma is super easy!

\n

Here are some of the highlights:

\n

Modularity

\n

You have the option to import a single minified CSS file or just the ones you need by importing any of the 39 .sass files

\n

Super simple grid system

\n
<div class=\"columns\">\n  <div class=\"column\">1</div>\n  <div class=\"column\">2</div>\n  <div class=\"column\">3</div>\n  <div class=\"column\">4</div>\n  <div class=\"column\">5</div>\n</div>\n
\n

\n is- keyword for modifiers for the base classes. For example, for the button base class, color can be modified by adding is-primary or is-info. It can also modify the size by adding is-small or is-large.

\n

Here's a comparison between Bootstrap and Bulma

\n
<!-- bootstrap button -->\n<a class=\"btn btn-primary btn-large\">My Button</a>\n\n<!-- bulma button -->\n<a class=\"button is-primary is-large\">My Button</a>\n
\n

This syntax allows you to easily remember how to modify elements and understand what the classes are actually doing.

\n

Great documentation

\n

Solid information with solid examples makes learning Bulma a breeze

\n

\n \n \n

\n

Conclusion

\n

There are so many great things to talk about, that it doesn't make sense for me to list them all out here. At the time of this writing, Bulma is only on v0.8.0. It's already got so much support from the community.

\n

If you're looking for a simple and clean CSS framework without a lot of bloat, give Bulma a try.

","fields":{"slug":"/bulma-io/"},"frontmatter":{"title":"Bulma.io","description":"Bulma is a free, open source CSS framework based on Flexbox and used by more than 200,000 developers.","date":"2020-02-11T05:08:11.077Z","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABtElEQVQoz41TPUsDQRCdTSJRVEgkKRRFvDN3wUZtLFQQ20DyJ8TGThAREfwCsfBHWASEBOW8iwlG7CSCIPHOT1T8A4KFjZWsbze3ngSLDDxmdmfn7ezMLBEk5NpCUZvnEN1YTKDNdUj5Jl8uqGUJ+2RRr0R0uBw4rg4aF0AiPnnLIgOvi9Jmrr0FrCtfz+4yMwYGmWEYBChNqVSKCQhbCGwKbr85DvlkS/R2zun5lMPebDWhTCYTLJj/5A6vFCHXfqSHMqf7E45LLonzSLor1jmcNsdM00wim37oGHQSGQn0Yt2luGzbloTML34ChO90V+LQX9HLonyDNj46gUALJIvQG8As7FXofWAPmBPncrlcRHWRNZrjmH5m3+Q5nOoiw4/ESCwxlDLNNZDMI3hBEMDOATOwV4BMrVbry+fz7X6XUcO6pZ6/Ta9nXMK1P3HZlHQ8VULqWSAKN9cwm82yptFx/tZ0B2RHmMO43PAceVjXdNI0TW4JLboquqzr+i8Z5zwY6v9mDeQys8HZaTJMQ5EQGiGhRqhQKFC1Wm0Exe8qwU9x/Z9St5iqLWoq/d235ZZG6Ac4+KvmpGZ3gQAAAABJRU5ErkJggg==","aspectRatio":1.9047619047619047,"src":"/static/215117512cba1f14c924b470a92b30c4/ee604/bulma.png","srcSet":"/static/215117512cba1f14c924b470a92b30c4/69585/bulma.png 200w,\n/static/215117512cba1f14c924b470a92b30c4/497c6/bulma.png 400w,\n/static/215117512cba1f14c924b470a92b30c4/ee604/bulma.png 800w,\n/static/215117512cba1f14c924b470a92b30c4/f3583/bulma.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},"pageContext":{"slug":"/bulma-io/"}}}