Bulma: What sass file contain?

[laszukdawid]

This is about the Docs.

Overview of the problem

This is about the Bulma CSS framework
This is about the Bulma Docs

Description

Docs keep on saying "Import only what you need from Bulma" but I cannot find any explanation what files contain what. Not only I'm unable to find in the doc a list of files in the package but it also seems that some components consist of more than a single file, e.g. tile is not only in the bulma/sass/grid/tiles.sass (which also I'd expect from the doc to be rather in layout instead of grid.

Maybe that's obvious to people who are working with sass all the time but tbh as a new person, to me this is a major blocker. There are a plenty other css frameworks. I still don't know what to do in this case, so I'm going with the most popular answer on the internet which is to include @import 'bulma/bulma.sass'; in each sass file for each component.

Expected behavior

An explanation on which files to include when using certain components.

[farshad-sadri]

Based on my personal experience with Bulma, I recommend you add following as the foundation and other stuff as you need them.

@import "bulma/sass/utilities/_all";
@import "bulma/sass/base/_all";
@import "bulma/sass/grid/columns.sass";

// Individual Elements imports can go here .... (e.g. box, button, container, content, icon, etc.)
// Individual Form imports can go here ... (chekbox, file, etc.)
// Individual Components imports can go here ... (e.g. breadcrumb, card, level, media, etc.)
// import Tiles can go here
// Individual Components imports can go here ... (hero, footer, section)

I hope it helps.

[laszukdawid]

It doesn't help :(

I'd gladly do that but the problem is that I have no idea which sass files contain what. Per your comment, @farshad-sadri, how do you know which files to include for Tiles components? Is this knowledge inherit to handling sass? Is that supposed to be IDE-automagic?

[jgthms]

You're right here. The documentation could be improved where, for each element/component, the Sass file to be included should be specified.

I'll handle this.

[farshad-sadri]

I think the files have good organization which can be improved. I do agree with you on the documentation clarification problem though. @laszukdawid

Based on my experience I found out that Bulma documentation sections and pages are based on the folders and files structure respectively. As an example Tiles Section is under Layout section which you can find it in layout/tiles.sass.

I don't get what you mean by IDE-automatic, however IDEs usually have some snippets that can help you find the while importing CSS files.

[laszukdawid]

Let me start with well, actually and point out that Tiles sass is in grid/tiles.sass. Surprise, gotcha!

Otherwise, many components have the same structure as documentation which is nice. But, given few examples where it's not, I would rather someone who knows write out which files contain what, rather than me searching through these.

With the IDE-automagic I was only wondering whether everyone is using some common plugins for IDE that automatically import what you need when you type what you want. Many IDEs have this for classess/methods in the same project path.

[farshad-sadri]

@laszukdawid I have to state again your point is valid and seeing the owner just assigned this issue to himself seems to get somewhere! ;)

I think a good documentation can make a framework much more successful!

About IDEs I think we're on the same page, depending on your IDE it should have some CSS Snippets plugins that would do the trick.