Bulma CSS framework?

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.


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!)

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.

1 Like

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.

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.

1 Like

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?

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

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.

can you elaborate?

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

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.

1 Like

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.

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.

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

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.

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.

Well said, this seems kind of familiar. :wink:

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. And for everything else I am quite happy with UIKit.

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…


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

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.

1 Like

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?