So you want to customize your
SharePoint site with custom CSS and JavaScript, like Bootstrap or Angular, but you don’t know where to put the files? You’re in the right place for the answers you seek. There are three places you can put your files: the Master Page Gallery, the Site Assets folder, or the Style Library. The place you choose should be dependent on your project. This is the way I organize my files, as there is no set definition of where you place them.
The Master Page{{cta(‘209aad85-272d-4e83-8cdc-4f30262bc921′,’justifyright’)}}
If you are working with, you guessed it, master pages, then this is the place for you. You use the root folder to hold your master files, then create folders named CSS and JS to place those respective files. You can get to the folder by going to All Files > _catalogs > master page in SharePoint Designer, or simply going to Master Pages under Site Objects on the left hand side. An advantage of using the Master Page gallery is the ability to map the gallery as a network drive for easy access.
Site Assets
You should place your files in the Site Assets folder if you have public facing files that need to be updated regularly. The files in this location should be assets that are used across the site, but not on the master page. For example, if you have a page layout for an anonymous accessible page, you would put a css file for that layout in the Site Assets folder if it has been abstracted from the rest of the master css.
Style Library
Lastly we have the Style Library. This is the place you want to put the files that are associated with web parts. Say you have an image slider that is only used on one page. It has two files, a CSS file and a JS file, that it uses for styling and functionality. Instead of having those two files loading all of the time as a definition in the master page, place the two files in the style library, then reference them in a content editor web part where you want to use the image slider. This will save time on load, and reduce the bandwidth due to file size, since the files aren’t being loaded on every page. The Style Library is not set to allow anonymous access automatically, so you’ll need to change that if you have public facing web parts.
What other reasons do you have for organizing your files in these three ways? Share your wisdom with us in a comment below!
Found this blog post useful? Make yourself comfortable and check out our blog home page to explore other technologies we use on a daily basis and the fixes we’ve solved in our day to day work. To make your life easier, subscribe to our blog to get instant updates sent straight to your inbox:
{{cta(‘33985992-7ced-4ebd-b7c8-4fcb88ae3da4′,’justifycenter’)}}