# Bulma CSS framework?

**URL:** https://forum.pinegrow.com/t/bulma-css-framework/3364
**Category:** Beginners
**Created:** [September 21, 2019, 7:00pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364 "2019-09-21T19:00:50Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [September 21, 2019, 7:00pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/1 "2019-09-21T19:00:50Z")

</div>

Anyone tried this out yet?

I’ve only glanced at it, but it claims to do everything via CSS and SASS rather than js.

Navbars, hamburgers, forms, the usual suspects.

thoughts?

> **[Bulma: Free, open source, & modern CSS framework based on Flexbox](https://bulma.io/)**
>
> Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

UPDATE: my first (uninformed) impressions

just spent an hour watching a guy build 3 different webpages, 2 using CSS grid… and i may be missing the point somehow, but it’s basically just cutting and pasting pre-classified snippets of code (mostly divs) to build up your webpage framework.

it’s like styling using classes, but in reverse… meaning, the classes are already build for you, and you just write your code using the cut and paste of all these pre-defined classes with semantic sounding class names with modifiers like “is-black” to change the color to something to black.

I’m sure a ton of thought was put into it to make it all hold together and avoid conflicts, but it really seems more like somebody’s baby they built for themselves, than a framework.

but what do i know… would probably end up with the same cheat sheet in 10yrs time and wonder why i didn’t just copy this guys notes.

(P.S. hey, and i just noticed there is a cursor now in the edit window – thank you PG forum gods!)

---

<div class="post-metadata">

### Author: ![Pervasive](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pervasive/32/2251_2.png) [@Pervasive](https://forum.pinegrow.com/u/Pervasive)
#### Post date: [September 21, 2019, 7:33pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/2 "2019-09-21T19:33:02Z")

</div>

Sounds like upcoming excerpts from Bootstrap 5.0 from your description.

I’ve been wanting to do some sites with just CSS Grid and Flex… looks like I will be doing them this weekend.

---

<div class="post-metadata">

### Author: ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [September 21, 2019, 9:55pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/3 "2019-09-21T21:55:17Z")

</div>

it’s not clear to me yet how this incorproates with CSS grid, but that was my main reasoning for bringing it up… that and avoiding JS at all cost.

i don’t want to be tied to a framework’s proprietary grid system when CSS grid is out there doing all the heavy lifting for you.

starting from where i am (built zero webites from code up), i want to invest my time and energy into something that has a minium of overhead and still gets the job done.

let us know what you find out, it seems pretty easy to get started and according to the reviews i 've read has as smoother learning curve than bootstrap or foundation.

---

<div class="post-metadata">

### Author: ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)
#### Post date: [September 22, 2019, 4:29am UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/4 "2019-09-22T04:29:25Z")

</div>

Why the strong aversion to JS?

I haven’t played with Foundation, but Bootstrap’s grid system is very straightforward and easy to learn. I’ve built about 20 sites with Bootstrap so far, and it’s been a home run. And the truth is, I really didn’t need to touch JS to build them. Just remember to start with mobile first when you design.

Bootstrap isn’t going anywhere, either, so you don’t have to worry about investing time into learning it and then finding your investment was wasted. Among Frameworks, it’s the most popular by a huge margin, and on the larger web, it’s powering about 20% of all websites.

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [September 22, 2019, 9:58pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/5 "2019-09-22T21:58:55Z")

</div>

I really like Bulma. I’ve put together a number of sites using it. I find it intuitive and quick to pick up. If you don’t need most of the Bootstrap elements, why not?

---

<div class="post-metadata">

### Author: ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)
#### Post date: [September 23, 2019, 2:42am UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/6 "2019-09-23T02:42:08Z")

</div>

Because you lose the benefit of Pinegrow’s Bootstrap visual tools. But if that’s not a concern, then sure, go for Bulma.

---

<div class="post-metadata">

### Author: ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [September 24, 2019, 6:54pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/7 "2019-09-24T18:54:35Z")

</div>

> [@Printninja](#):
>
> Why the strong aversion to JS?

i would just rather not. so far it seems there really isn’t much i need to do that can’t be done using html5 and css3 with grid.

so if i’m bitting off that considerable chunk at this stage in my life, i’m not keen on adding js into the mix if i don’t need to.

---

<div class="post-metadata">

### Author: ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [September 24, 2019, 6:56pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/8 "2019-09-24T18:56:57Z")

</div>

> [@Printninja](#):
>
> Because you lose the benefit of Pinegrow’s Bootstrap visual tools.

can you elaborate?

are you talking about the drag and drop from the library tab, or something else?

---

<div class="post-metadata">

### Author: ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)
#### Post date: [September 25, 2019, 2:46am UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/9 "2019-09-25T02:46:38Z")

</div>

Pinegrow has dynamic visual panels based on the framework being used, the contents of which change depending on the element selected. In the case of Bootstrap, the panels allow you adjust all the Bootstrap specific class characteristics such as column size, visibility, offset, etc, as well as giving you flexbox controls, tooltip and popover controls, and other things.

This is one of the major benefits in using a framework like Bootstrap with Pinegrow. If you opt for a different Framework, like Bulma, you lose the program benefits of working with one of Pinegrow’s supported frameworks.

---

<div class="post-metadata">

### Author: ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)
#### Post date: [September 25, 2019, 2:52am UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/10 "2019-09-25T02:52:37Z")

</div>

HTML5 and CSS are only 2/3 of the website “trifecta.” JS is the final third. You can do a lot with CSS alone, and I’ve seen some pretty clever hacks/techniques to achieve many javascript-like effects, but for some kinds of interactivity, javascript is the only solution.

I’ve managed to mostly avoid learning to write javascript, but I still use scripts routinely to achieve certain things on my websites. There’s really no way to avoid it if you want to have complex interactivity.

---

<div class="post-metadata">

### Author: ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [September 25, 2019, 1:47pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/11 "2019-09-25T13:47:28Z")

</div>

you are talking about the bootstrap specific things under the Element Property tab, like break point behavior and such… i have noticed that, and played with it a little bit.

But media queries are not that difficult to learn, esp if you build mobile first as is recommended by pretty much everyone.

the visual CSS part is still there for everyone to use in plain HTML.

i may end up using bootstrap, but so far i’ve not found anyting i need that can’t be done outside the framework, esp when it comes to CSS grid – which i really want to use-- and BS does not exploit.

---

<div class="post-metadata">

### Author: ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)
#### Post date: [September 25, 2019, 8:58pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/12 "2019-09-25T20:58:57Z")

</div>

I’m talking about all these panels that are specific to the Bootstrap framework, and appear in addition to the standard HTML visual controls.

 ![example](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/7f3f327cc0de8005cffed6f3435c97e89395bcbe.jpeg)

If you use a framework unsupported by Pinegrow, you lose this convenience. Of course, it might not be a “make or break” sort of thing for you, especially if you’re not an aficionado of Bootstrap as I am. Bootstrap has hundreds of utility classes and I have memorized dozens of them that make it very easy for me to quickly lay out a site without my having to resort to writing custom CSS for everything.

I realize CSS grid is a very good and powerful method for creating responsive pages. But until I find Bootstrap is unable to do something in terms of responsive layout that can only be accomplished with CSS grid, I’m holding off on learning it. My brain is already filled to maximum capacity.

---

<div class="post-metadata">

### Author: ![Pervasive](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pervasive/32/2251_2.png) [@Pervasive](https://forum.pinegrow.com/u/Pervasive)
#### Post date: [September 26, 2019, 5:24am UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/13 "2019-09-26T05:24:18Z")

</div>

> [@Printninja](#):
>
> But until I find Bootstrap is unable to do something in terms of responsive layout that can only be accomplished with CSS grid, I’m holding off on learning it.

There are just maybe two things that I can think of… Dense packing, and using grid-template-areas you can rearrange the display of named grid areas no matter what order they appear with the HTML.

Other than that, there are a few simple things that may or may not be more intuitive.

---

<div class="post-metadata">

### Author: ![m-artin](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/m-artin/32/1447_2.png) [@m-artin](https://forum.pinegrow.com/u/m-artin)
#### Post date: [September 26, 2019, 8:36am UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/14 "2019-09-26T08:36:59Z")

</div>

> [@Printninja](#):
>
> My brain is already filled to maximum capacity.

Well said, this seems kind of familiar. 😉

CSS grid is awesome, but it takes time to learn to play this new instrument. And in my experience it can lead to some new headaches, when dealing with customized responsive layouts.  
For tiny and simple pages I currently have an eye on [http://getskeleton.com](http://getskeleton.com). And for everything else I am quite happy with [UIKit](https://getuikit.com).

---

<div class="post-metadata">

### Author: ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [September 26, 2019, 5:19pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/15 "2019-09-26T17:19:03Z")

</div>

![backtoya](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/005ef86c196067888b20d5a6f99a76dbd5fdccf7.jpeg)

but i still have access to all of those visual CSS controls in a plain HTML file, it’s just that instead of the breakpoints looking like those bootstrap one’s i’ve underlined, they look like this…

![Capture](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/af0cd2c8336e15a1db8556c2a5d90294e120e001.jpeg)

the power of bootstrap seems to be in the pre-built components powered by js.

---

<div class="post-metadata">

### Author: ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)
#### Post date: [September 26, 2019, 10:54pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/16 "2019-09-26T22:54:23Z")

</div>

> the power of bootstrap seems to be in the pre-built components powered by js.

That’s a reasonable assessment. However, one of the things I like (and use) a lot are Bootstrap’s spacing classes (responsive margins and paddings), which Bulma seems to lack.

---

<div class="post-metadata">

### Author: ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [September 26, 2019, 11:53pm UTC](https://forum.pinegrow.com/t/bulma-css-framework/3364/17 "2019-09-26T23:53:42Z")

</div>

One thing missing from the PG visual CSS editor (for both plain and BS projects) is a button for

justify-content: space-evenly

they have one for space-around, but not for -evenly… which is arguably the more useful one.

how do i tag “Feature Request” inside of a post?
