Source update - v1.3

Hi all,

I’ve just pushed out a nice update for Source which fixes a few things up and also adds a few nice things too.

We have added 3 new stacks to the Add-on pack (Utility Classes, Dark Mode Vis and Image Fit).

The Utility Classes stack is perfectly suited to use alongside our Coder stack and this combo now really lets advanced users (with knowledge of CSS and HTML) to hand build large parts of their sites.

The Image Fit stack is great for when you want an image to take up all of the available space - e.g in a grid item. With this you can make really great image grids (example here using Grid Plus). It also lets you specify a max-height which is great if you want to create ‘card’ type layouts (various examples here).

The Dark Mode Vis stack lets you conditionally show / hide content based on the web page visitor’s preference for Dark or Light mode. It can be used alongside the regular Dark Mode stack (which is for global dark mode stylings) or on its own.

Here is a more detailed overview of Source v1.3:

Coder stack

  • Added new content type of CSS - this is useful if you want to create a partial, external or template that includes some custom CSS (that you would normally add to the page settings).
  • Option to add data attributes to the wrapper

Utility classes stack

  • Option to add different types of utility classes to the page. These can then be used in the Stacks 4 classes boxes or with Coder stack
  • Add all or only ones that you need in your project / page
  • Class types include borders, margins, padding, flex box, position, size, z-index, overflow and display
  • Custom values can be set for the borders, padding and margins

jQuery enabler stack

  • Source doesn’t use / need jQuery but if you want to add your own jQuery code to the page then you can first enable jQuery with this stack

Dark mode Vis stack

  • Stack to conditionally show content depending on the user’s preference for dark / light mode.

Image fit stack

  • Add an image to take up all of the space in its container (a great option for adding images to grid items / building your own galleries with the Source grids!).
  • Option to limit the height of an image (great for creating cards with the same height images!)

Source Base stack

  • Option to limit the size of all images (including SVGs) in Edit mode. This is great for space saving in Edit mode!!

Nav stack

  • More branding control options with site title (heading tag, font size, case)
  • Option to adjust the border radius of the active links background

Heading stack

  • Fixed issue if specifying a custom font name
  • Added additional weight options (for if using with a self loaded font)

Paragraph stack

  • Fixed issue if specifying a custom font name
  • Added additional weight options (for if using with a self loaded font)

Image stack

  • Option to limit image size by height or width (previously was limited by width only)

This is a meaty update with some great stuff in it.

The Image Fit doesn’t sound useful until you try it in Card type layouts.

The new Coder feature with the Utility Class stack has just taken RW to a new level.

Fantastic update.


Remember to restart RapidWeaver after the update to see the new stacks ;)

1 Like

I have been playing around with the new features, and find it amazing how powerful this framework has become. Well done!

1 Like

Thanks @tgr!! Appreciate that.

Also - I forgot to mention in earlier post, there is a small demo project file about using the Utility Classes. It can be downloaded from the Knowledge Base page.


Also just noticed that the link to the fancy little image grid layout that I built wasn’t working either. Fixed that now. It’s here too.

1 Like

Hello Stuart,
May we have that Grid project to see how you did that brillant work ;-)
Have a nice day

No problem - i’ll tidy it up and pass it on.

1 Like