0

Webdev beginner here. I have been working on a website for a couple of weeks, and I want to start using the Bulma CSS framework and sass now.

I cloned Bulma https://github.com/jgthms/bulma into my project folder, and I see that Bulma has it's own css and sass folders.

Am I supposed to:

-put all my css, php, html, js into the Bulma folder and have it essentially become my new project folder?

-or should I just access Bulma's files through the Bulma folder, in my project folder.

I could not find any straight forward information online about how Bulma files/folders integrate into existing projects.

Here is my project folder currently:

This is my project folder currently

I don't really know the best way to organize web projects, especially now adding frameworks. I can see the potential of things getting hairy, and I want to make sure I won't be slowly building a sloppy project pile that's gonna screw me over in the future, or moving folders and messing up relative addressing etc.

Thank you for your time, Best -Joe

Joe P
  • 45
  • 7

1 Answers1

1

Between the two choices you mention, the second is the appropriate one.

Best Practice to Organize Javascript Library & CSS Folder Structure

Web project's folders/directories structure - Best practices

There are many ways people structure their project folders. Google something like "website folder structure" and read resources like the above links to get a general idea. The two common ones are grouping files by type and by module/library. The second way is what I would recommend and is what your second choice does.

If you just need default Bulma, all you need to do is load bulma.min.css in your web pages from wherever you've chosen to put it. So out of the entire package, that file is really the only necessary one to keep if you like (and perhaps the LICENSE file since it requests that you do).

If you are customising Bulma, you will need to create your own sass file that should live outside the bulma folder, and then follow the customize Bulma documentation. It would be very similar to an answer I wrote for a Bootstrap question.

LionelW
  • 376
  • 3
  • 11
  • 1
    Thank you for your reply. Ahhh ok "Instead of editing the original source, create a new source file we'll call myproject.scss, somewhere other than the Bootstrap source folder. By keeping all changes separate, we make any future Bootstrap upgrades easy." That, and the other info clarifies it for me, and was what I was looking for. So I should keep the Bulma folder (unchanged) in my project folder and then create my own sass file that will import/access things I want from Bulma. Great! I will also start following a good organization practice. Thanks! again. – Joe P Nov 15 '18 at 00:57