Source

Source is our lightweight CSS framework for RapidWeaver.

21 articles in the collection

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 all people - i.e it doesn't come with an abundance...

By Stuart Marshall

updated 12 days 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...

By Stuart Marshall

updated 24 days 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...

By Stuart Marshall

updated 24 days 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...

By Stuart Marshall

updated 24 days 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. If...

By Stuart Marshall

updated about 1 month ago

Grid Item (child stack)

BackgroundYou 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.AlignmentAlignment lets you set how you want the items that have been added to...

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

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

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

By Stuart Marshall

updated about 1 month 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...

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

By Stuart Marshall

updated 2 days ago

Addon stacks

Container Plus stack

The Container Plus stack is available in the Source Addon PackThe 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...

By Stuart Marshall

updated 24 days ago

Dark Mode

The Dark Mode stack is available in the Source Addon PackThe 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...

By Stuart Marshall

updated 12 days 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 endless...

By Stuart Marshall

updated 12 days ago

Grid Plus Item (child stack)

It is recommended that you watch our 'Walkthrough' tutorial video (at bottom of this page). This video demonstrates designing a grid on paper and then translating that into Grid Plus, including the use of breakpoints to change how the grid appears...

By Stuart Marshall

updated about 1 month ago

SVG stack

NB: The SVG stack is available in the Source Addon PackTo 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...

By Stuart Marshall

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

By Stuart Marshall

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

By Stuart Marshall

updated 2 days 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 add...

By Stuart Marshall

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

By Stuart Marshall

updated 12 days 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...

By Stuart Marshall

updated 4 days ago