Source

Source is our lightweight CSS framework for RapidWeaver.

Welcome to Source

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...

Avatar

By Stuart Marshall

updated 6 months ago

Core stacks

Source Base stack

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Container Base stack

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Container stack

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Grid stack

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Grid Item (child stack)

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Header stack

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).

Avatar

By Stuart Marshall

updated about 1 month ago

Image stack

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Markdown stack

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...

Avatar

By Stuart Marshall

updated 7 months ago

Paragraph stack

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Navigation stack

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Addon stacks

Container Plus stack

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Dark Mode

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Grid Plus stack

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Grid Plus Item (child stack)

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...

Avatar

By Stuart Marshall

updated about 1 month ago

SVG stack

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Layouts with Grid Plus

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Displaying items in a row (Grid Plus)

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Coder stack

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)...

Avatar

By Stuart Marshall

updated 8 days ago

Tips, tricks and notes

Using Source colours

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...

Avatar

By Stuart Marshall

updated 17 days ago

Adding icons

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...

Avatar

By Stuart Marshall

updated 5 months ago

Flex containers

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...

Avatar

By Stuart Marshall

updated 28 days ago

Templates

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...

Avatar

By Stuart Marshall

updated 6 months ago

A modern framework (unsupported browsers)

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...

Avatar

By Stuart Marshall

updated 5 months ago

Layouts with Grid Plus

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Displaying items in a row (Grid Plus)

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...

Avatar

By Stuart Marshall

updated about 1 month ago

Source Utility classes

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...

Avatar

By Stuart Marshall

updated 8 days ago