Single CSS and JS file for the entire site instead of separate files for each page

Hi folks,

Newbie to RapidWeaver, Stacks and Foundry 3 here, hence have 35+ years of IT experience with on and off web design. I think I’m doing something conceptually wrong here. Here is the problem:

I’ve got a site I’m trying to re-design and RW creates “files” folder for every file. Well… maybe I’m just an old school, but I want a single custom CSS file and single custom JS file for all my pages and not for every page.

The reason behind that is very simple - lots of pages are referencing the same images so I don’t want these files to be duplicated. I want them to reside in just /images folders, all css are in /css and all javascript in /js. Also because some pages are generated on a fly so I eed to reference existing CSS and JS.

What’s the point of creating a different css file for every page? Why it can’t be a part of one single css? Especially because I’m using the same style for, say paragraphs, so creating a section in CSS for each paragraph is a bit overkill from my POV. Ok, at least can all CSS be combined into one CSS file with all customisations?

Regards,
Ilya

Hi, I’m a newbie too here, I use the same config like you and I was also surprised as you are about external CSS file management. With Foundry we have to use Blacksmith tool in order to create stylesheets and then apply it in each page. RW, stacks and Foundry (and Foundation of course) exist to bring us the « no code graal ». I used Dreamweaver before (hmm in fact I’m still using it for my job’s site, apologies :disappointed: sorry :yawning_face:) and « no code » wasn’t possible, here it’s really possible and I build two sites better and faster than I can with Dreamweaver (or VStudio). Depend on what we’re looking for. Hopefully I found it :smile: I wish you the same.

1 Like

Because RW is page and not site based. You would have to look into other tools providing one JS and CSS file for the whole site.

Bruno, I get that. Moreover, I’m all for it. I don’t like coding css etc. What I don’t get is why you need to have separate “files” folders when some resources like images are re-used on multiple pages that simply increases time to load your pages instead using one that’s already in the browser’s cache.

And creating multiple css files for each page when they can be combined into one and then minified. Also saved time to load pages.

1 Like

Jannis, “page and not site based”? You mean that RW is design to design a single page and not a website? Really?

No. I am speaking of how CS and JS files are combined. They are combined page and not site based. What you found out already.

Well not so much so, but RW treats each page as an individual entity within your project. So yes - each page has it’s own little self-contained eco system of files.

This does greatly simplify things, but does indeed mean that you’re going to have duplicate files and this does indeed impact page loading speeds due to caching issues.

There are ways around this of course. For instance, you can warehouse images.

As I understand it, the next major release of RapidWeaver (Elements) completely changes the approach and only stores images once. Not sure if the same is true for CSS, JS and whatnot though.

Cheers,
Erwin

1 Like

Jannis, hmm… sorry, not sure what you mean…

Erwin, oh! That’s the relief.

I found a way around anyway, but it does complicate my workflow. Yet it still much, much more faster than I had before. (In two days I managed to complete 80% of the site while with other frameworks I couldn’t do even 20% for weeks) So I’m not really complaining. :slight_smile:

I"m not sure if you are already familiar with “partials” when using Stacks. This approach won’t solve the CSS/JS for each page issue, but it does make it much faster to duplicate elements of a page that you want to be the same across pages. Partializing a stack can be a big time saver when used correctly.

In addition I tend to “warehouse” any images, PDFs, audio and other materials I might use. This means I manually place the image/PDF/audio in a dedicated folder on my webserver. Then I manually refer to that content within RW/Stacks. This has a couple of benefits:

  1. when backing up my RW project the size of the project is greatly reduced. (In my case I’ll often have a project file that is 40 Mb, but about 2 Gb of content that I’ve warehoused.) Thus I end up backing up 40 Mb of “stuff” rather than 2.4 Gb of “stuff”. (You can activate the ability to auto-backup within RW’s preferences area).
  2. in certain cases this makes is much easier to reference the same content (e.g. an image) across multiple pages.
  3. some stacks also provide an option within their settings to reference a warehoused file.

… but my guess is you really want to learn about using “partials”. This won’t do away with the CSS and JS for every page, but used correctly partials can greatly reduce the time it takes to create your website.

2 Likes

Yes, I’m currently using “partials” and yes, it is speeds up the process dramatically. I probably need to look into that in more details, so thanks for that!

And yes, I’m “warehousing” images as well. After I publish the project in Dev, I do “refactoring” and move all css and js into the single folder and point all image links to the correct location. Created a simple Perl script to do that automatically instead of manually - this script is basically “publishing” Dev into Pre-Prod with consolidation and refactoring. Works well in my case, but I thought there was a more elegant way of doing that. :slight_smile: