How should integrate and structure Bulma folder into existing web project folder?










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










share|improve this question




























    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










    share|improve this question


























      0












      0








      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










      share|improve this question
















      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







      css sass bulma folder-structure






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 13 '18 at 23:47







      Joe P

















      asked Nov 13 '18 at 23:32









      Joe PJoe P

      155




      155






















          1 Answer
          1






          active

          oldest

          votes


















          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.






          share|improve this answer


















          • 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 0:57











          • You're welcome, glad you found it helpful!

            – LionelW
            Nov 15 '18 at 1:00










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291038%2fhow-should-integrate-and-structure-bulma-folder-into-existing-web-project-folder%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          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.






          share|improve this answer


















          • 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 0:57











          • You're welcome, glad you found it helpful!

            – LionelW
            Nov 15 '18 at 1:00















          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.






          share|improve this answer


















          • 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 0:57











          • You're welcome, glad you found it helpful!

            – LionelW
            Nov 15 '18 at 1:00













          1












          1








          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.






          share|improve this answer













          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 14 '18 at 1:42









          LionelWLionelW

          19216




          19216







          • 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 0:57











          • You're welcome, glad you found it helpful!

            – LionelW
            Nov 15 '18 at 1:00












          • 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 0:57











          • You're welcome, glad you found it helpful!

            – LionelW
            Nov 15 '18 at 1:00







          1




          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 0:57





          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 0:57













          You're welcome, glad you found it helpful!

          – LionelW
          Nov 15 '18 at 1:00





          You're welcome, glad you found it helpful!

          – LionelW
          Nov 15 '18 at 1:00

















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291038%2fhow-should-integrate-and-structure-bulma-folder-into-existing-web-project-folder%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Top Tejano songwriter Luis Silva dead of heart attack at 64

          ReactJS Fetched API data displays live - need Data displayed static

          政党