Source is a 'micro' framework that provides the basis to build great sites using RapidWeaver and Stacks. Source is different from the larger frameworks in that it doesn't try and be all things to all people - i.e it doesn't come with an abundance...

Source is relatively simple to learn and use (especially if you have experience of building pages in Stacks). The 'Welcome to Source' project that is comes with the initial stack download is a useful starting point.  We offer a number of additiona...

The base stack is basically the control panel for Source and needs to be added to any new page. It is here that you set up all of the default colours (background, text etc) for your site and also where you can specify what the default fonts (and f...

The Container Base stack allows you to set up some presets / defaults for Padding, Margins and Backgrounds that you can then quickly apply to any Container stack that you add to the page. Not only does adding your commonly used setting here make i...

The Source Container stacks are what should contain any stacks/content that you add to your page. Using these lets you control how wide / how much of the page your content should take up. They also let you apply padding, margins and backgrounds to...

Source's Grid stack is perfect for both grids and columns on your sites. This stack sets up the functionality for the grid / columns and the actual content is added to the Grid Item child stacks . Note: The Grid stack creates equal width columns...

Background You can opt to override any background that has been set by the parent stack. The checkbox needs to be selected if you do wish to set a background for an item. Alignment Alignment lets you set how you want the items that have been added...

This is a stack for when you need to add a header. You can select from H1-H6 and also select the colour and alignment options (including advanced alignment if you need to align your headers differently on different devices).

The Source image stack is a great way to add images to your pages. It allows you to add up to 4 different versions of an image so that an appropriately sized / cropped image is used on each device. This is a great way to improve performance as you...

Markdown is a great approach to writing your web page content. Within a single stack you can add Headers, paragraphs, links, quotes, lists, images etc. You can read more about Markdown (and the required syntax) here . The Source Markdown stack al...

This is a stack for when you need to add a paragraph of text. You can select the colour and alignment options (including advanced alignment if you need to align your paragraph differently on different devices). There is also the option of making a...

The Navigation stack allows you to add a responsive menu bar on your web page. The stack uses the default RapidWeaver navigation entries (i.e. it will show all of the pages that are set to 'show in navigation' within your RapidWeaver project). Nav...

The Container Plus stack is available in the Source Addon Pack The Source Container stacks are what should contain any stacks/content that you add to your page. Using these lets you control how wide / how much of the page your content should take ...

The Dark Mode stack is available in the Source Addon Pack The dark mode stack enables you to present a differently styled version of your page to those that prefer to use their computers (and applications) in dark mode. Source does not use a gimmi...

Grid Plus is available in the Add-on pack. You can set up some really stunning grids using the Source Grid Plus stack. It takes a bit of practice / learning to figure out how it works but once you have mastered it then the possibilities are endles...

Styling You can opt to override any master background that has been set in the parent grid stack. To activate this you need to select the checkbox. You can then apply a background (image, colour, custom css etc) to this particular item. Starting s...

NB: The SVG stack  is available in the Source Addon Pack To use the SVG stack you need to already have an SVG graphic / icon. You then need to copy the code for that SVG (by e.g. opening the file in a code/text editor) and then pasting it into the...

There are countless ways that you can lay out a page using Grid Plus. The default settings allow for a full responsive grid to be built and where all included items expand or reduce in width to fit in the available space. There are times though wh...

The default behaviour in Grid Plus is that any content added to a Grid Item is stacked in a column - e.g. if you add a Heading and a button the Heading will appear above the button. There are times though that you may want to display added content...

IMPORTANT: Coder is intended for advanced users and requires knowledge of HTML and CSS. Coder stack is intended for advanced users that want to take more control of the outputted html code. It lets you add content (html / markdown / stacks) withou...

A small number of utility classes are available as default via the Source Base stack . By adding the Utility classes (Source) stack though you can have access to many more useful classes. When you add the Utility classes stack to the page some ge...

There is a separate Dark Mode stack that applies some default dark mode stylings globally on the page. The Dark Mode Vis stack can be used alongside the Dark Mode stack (or completely on its own) to conditionally show different content to people t...

The Image Fit stack is a great, simple way to add images to your Containers or Grid Items and have that image take up all of the available space (i.e. 100% width and 100% height).  Image source You can opt to use either a local (drag and dropped i...

Grid Plus Pro is available in the Add-on pack. Grid Plus Pro is built upon the same CSS Grid foundation as the regular Grid Plus stack. As such, the heart of the stack works in the same way. The main difference between the 2 stacks is that the Gri...

The Custom Fonts stack allows you to add fonts from various sources: Your own self-hosted fonts (either from RW resources or on your server)  Linking to Google Fonts Applying different system fonts Adding a local version of Raleway font (the...

The Skip Links stack can be used to enhance accessibility on your web page. It adds hidden links to the very top of the page that keyboard screen reader users can access and use to jump straight to relevant content on your page (as opposed to havi...

Large pages with lots of stacks content can be very tricky to keep tidy and organised in Edit mode. That’s where Grouper stack comes in. As its name might suggest, it is a great way to group stacks together and gives you the option of colour codin...

A stack that allows you to stick content to the top or bottom of the page when scrolling

This stack allows you to add your own custom links to the Source Navigation stack

When you use third-party stacks with Source then they will not (at least not yet) have a way for you to select from the Source colours that you set in the Source Base stack. You can of course just 'hard code' in the desired colour using the colour...

Icons often play a big part in sites these days. These can be added to your sites in various ways e.g. as regular images, as SVGs or as icon fonts. In Source we would generally recommend using SVGs for your icons. These are very lightweight in ter...

All of the Source 'layout' stacks (i.e. Container, Container Plus, Grid and Grid Plus) have the capability of displaying their content using flex . This enables us to have great control over how we align and distribute the content items that we a...

Stacks 4 introduced some great new features, including 'Externals' and 'Templates'. Each of these allow stacks (or groups of stacks) to be preserved for use in multiple projects. With Source, we have included a number of templates within the Sourc...

Source is based on established and modern web standards that are well supported in all modern browsers. Source makes use of CSS Grid, Flexbox and CSS variables. It also makes use of ES6 javascript for the Navigation stack. (In fact it is only the ...

There are countless ways that you can lay out a page using Grid Plus. The default settings allow for a full responsive grid to be built and where all included items expand or reduce in width to fit in the available space. There are times though wh...

The default behaviour in Grid Plus is that any content added to a Grid Item is stacked in a column - e.g. if you add a Heading and a button the Heading will appear above the button. There are times though that you may want to display added content...

Source makes use of a number of utility classes that are loaded via the Source Base stack . All of the Source stacks make use of this common code (e.g. for all the alignment options etc). If you are using third-party stacks (or the Source Coder s...

A small number of utility classes are available as default via the Source Base stack . By adding the Utility classes (Source) stack though you can have access to many more useful classes. When you add the Utility classes stack to the page some ge...

I may be more than a little biased but I do think that Source’s Grid Plus stack is the best grid stack available for RapidWeaver. It’s crazy powerful and makes full use of the amazing CSS grid specification (and flexbox!). By spanning grid items a...

A huge part of Source's power and flexibility comes from its grid stacks. Source ships with 3 grid stacks and there is virtually no layout that you cannot build with them. Here is a brief overview of the differences between them. Grid Grid Plus Gr...

Grid Plus and Grid Plus Pro are both based on the CSS Grid specification. It is a really powerful method for building grids but to get the most out of these grid stacks you really need to spend a bit of time getting familiar with the basics of CSS...

If you have Poster 2 from Instacks then you can use the Source Grid stacks to layout your blog lists instead of the inbuilt Poster options.  All 3 Source grid stacks can be used for this purpose but the best option is Grid Plus Pro as this provi...

The Source Container stacks do not have the option to add a video as a background. It is easily achieved though with a couple of Coder stacks and just a little code. First thing is to set up a Container as you normally would and add any desired co...

It can be a nice effect to hide content on the page and then have it appear when the user hovers over it. Thanks to some of the 'effects' utility classes that are built right into Source it is very easy to achieve.  Here we use the classes s-hi...

There are times where you may want to position content over other content - for example you may want to have a button in the middle of an image or a 'New!' label at the top-right of a product listing etc etc. Source Utility Classes stack ships w...

It is often desirable to create 'card' type layouts like the above where we can control the placement of things like the button to give a consistent look to each item, regardless of the amount of content used .  This could not be easier to achiev...

The Animate stack is a lightweight solution to add animated elements to your web pages.   You can see it in action (and buy) it on the Animate demo page .   Animate consists of 2 stacks, the Animate (Enabler) stack and the Animate zone stack.  I...

Our Markdown Link stack allows you to link your RapidWeaver project page to a markdown file on your server and have it pull that content from that file into your web page. This approach means that you can update content that you link in this way w...

The FAQ Toggle stack is a flexible toggle stack for RapidWeaver that is particularly useful for FAQ (Frequently Asked Question) sections on your webpages. View the demo page. How to use Simply drag the FAQ Toggle stack onto your Stacks page where...