Note that while the process is slightly technical, it’s nothing too crazy. Now that I’ve gotten the hang of it, it takes no more than 2-3 minutes per site.
The general process, for those who are very technical and may prefer their own version of the below instructions, is as follows:
- Compile your theme.scss file.
- If the new file is <500 KB, upload and publish it to your theme. If not, split it into as few files as possible such that each is less than 500 KB in size. Upload and publish these to your theme.
- In your base templates, link to these new stylesheets instead of the typical theme.scss link.
Otherwise, follow the below instructions. Note that this method requires basic usage of your system’s terminal. Also note that in the video, though I don't explain this, if your theme.css stylesheet compiles smaller than 500 KB, you can skip splitting it and move on to the next steps.
- Compile your theme’s theme.scss file into a minified theme.css file using the terminal (you should first use the terminal to navigate to your theme’s directory - then, I use the following command: sass theme.scss:theme.css --style compressed). You will need to have Sass installed locally, which you can learn about here. When compiling, Sass may log stylesheet errors to your terminal - you will need to fix these before Sass will generate a valid CSS stylesheet.
- If the minified theme.css file is less than 500 KB in size, you’re in luck: upload it to your theme’s file directory (you may have created it into the appropriate Dropbox folder and it’s already synced) and publish it. If the theme.css file is greater than 500 KB in size, repeat Step 1, this time creating an unminified theme.css file (I use the following command: sass theme.scss theme.css). Then, get the file size (in KB, not MB - you can multiply MB by 1,000 to get KB), divide by 500, and round up. So if your theme.css file is 1.23 MB, you’d get 3. This is how many theme-*.css files you need to create (as in theme-1.css, theme-2.css, and theme-3.css). The vast majority of people will only need two of these files. Then, evenly distribute the contents of the unminified theme.css file (I had you create an unminified version because it’s easier to split evenly) into the theme-*.css files (while I prefer mine to be evenly distributed, the only hard rule is that each is less than 500 KB). Sync / upload these files to your theme’s file directory and publish.
- Replace links to the theme.scss file (they probably look something like <link href="theme.scss" rel="stylesheet">) in your layout.html, layout_protected.html, and splash.html base templates with stylesheet links to the new theme.css file (if this was less than 500 KB) or the theme-*.css files. For example, I use <link rel="stylesheet" type="text/css" href="theme-1.css"> and so on.
- Note that this process will need to be repeated any time you modify an active Sass file (any file ending in .scss) in your theme. Hopefully in the near future NationBuilder’s theme infrastructure will support CSS stylesheets larger than 500 KB - until then, theme.css files larger than 500 KB will need to be split.
If you have any feedback on the process or instructions, feel free to shoot me an email at email@example.com.