Ooooooh
How To Build A 💅 Responsive Blog Design With Bulma CSS
💁 Thanks, Bulma!
Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out — thanks! And now, back to our regular scheduled programming.
I also taught a free, full-length Bulma CSS course on Scrimba.com, where we build these ️👆 designs. Click here to enroll for free! 👀
Scrimba.com is a next-generation platform for front-end developers to record and share their websites as interactive screencasts! 🔮
Bulma? ¯\_(ツ)_/¯
Bulma solves a lot of problems—a lot. Whether you need a visual component, or you want to understand how a component might be codified, with best practices and best-in-class documentation, Bulma’s here to help! 👩🎨
Bulma’s not even version 1.0, and has major adoption with 150K+ downloads a month and 26K+ stars on GitHub. Think of Bulma as a competitor to Bootstrap, despite the fact that it’s *just* CSS. 🤘 Look ma, no YavaScript!
How does Bulma work?
Bulma uses several techniques to create a cohesive interface for developers. We need just be concerned with describing our website’s design using semantic classes — not elements — or in other words, idiomatic templates.
These semantic templates can be thought of as interconnecting building-blocks we use to build websites fast! ⚡️ These components are also responsive out-of-the-box, meaning we can focus more on our content than the code.
Confused? Start 👉 here to first learn the fundamentals of Bulma.
What about that 💅 design?
This design can be better understood as three parts:
☝️CSS Grid
✌️ Bulma components
👌 Content
The CSS Grid spec is how we’re going to create a custom responsive design, where Bulma components give us useful templates and sections to compartmentalize our content, and content is…our content, of course! 😅
☝️ CSS Grid
Despite that Bulma is responsive out-of-the-box, we’re going to instead opt for CSS Grid so that we maintain complete control of the responsive design. Afraid? Don’t be! Here’s a secret; it’s just 8 lines of human-readable code! 🤖
It goes like this: we create an opt-in .grid class for general-use, wherefore specific circumstances, where we want our content to stand out and be wider, we create a special .grid-xl class we can use on a per-element basis:
First, we template a responsive 5-column grid with identifiers xl and md. Then we tell .grid * to span the md column, e.g. the content column, and .grid-xl to span columns xl, e.g. all columns. 🧠️
Now, imagine creating various .grid-sm, .grid-lg, and etc. classes to extend different caveat widths. Think about it…this isn’t just concise or cool, it’s 100% modern responsive design. Look ma, no media queries!
Confused? You can learn more about CSS Grid 👉 here with Per!
✌️ Bulma components
Bulma components are at the core of our design. Despite that it can be fun, we don’t have to write CSS from *scratch* to create a beautiful design. Instead, we can lean into successful frameworks to arbitrate components.
Now, because Bulma can be terse or difficult to understand at first blush, 😚 I’ve recreated the design using ASCII art to demonstrate how we might model the design using different Bulma components:
The truth is, Bulma is more terse, but that’s understandable given it’s HTML. Note I’m also obfuscating a few details to better emphasize how Bulma works. You can, however, view this interactive screencast to see the full code. 👀
Take a second look; notice .container (.grid) and .columns (.grid-xl)? The first one, for example, would translate to <div class="container grid">. This is *how* we can interpolate our grid with Bulma’s components!
You can learn more about Bulma’s components 👉 here. In this blog design, we used section, container, breadcrumb, media, image, columns, and content. And, despite that I’ve obfuscated it, we used modifiers, too! 🎉
Think of HTML as plastic, CSS as paint, and Bulma as LEGO. 🏗
👌 Content
As promised, last is the content of our website. Of which belongs inside our .content component. Remember I said Bulma relies on opt-in classes? Well––that’s 99% of the time; inside .content, Bulma applies CSS to:
• p paragraphs
• ul, ol, dl lists
• h1 to h6 headings
• blockquote quotes
• em and strong
• table, tr, th, td tables
• etc.
And where Bulma shine️s ✨ is that .content can be paired with modifiers. These include .is-small, .is-medium, and .is-large to change .content’s children’s font-size! You can learn more about .content here.
Congratz! Thanks for reading! 6(^ω^)9
Now is a phenomenal time like no other to get into front-end development. With the introduction of CSS specs like Flexbox and CSS Grid, and frameworks like Bulma, building for the web has never been more accessible!
Like this article?! There’s one more article just like it! Click 👉 here!
