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 3 months ago

Learning Source

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

Avatar

By Stuart Marshall

updated less than a minute 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 10 months 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 over 1 year 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 over 1 year 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 4 months 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 4 months 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 over 1 year 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 over 1 year 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 about 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 4 months 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 over 1 year 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 over 1 year 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 over 1 year 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 almost 2 years 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 over 1 year ago

Utility classes (Addon stack)

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

Avatar

By Stuart Marshall

updated 10 months ago

Dark Mode Vis stack

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

Avatar

By Stuart Marshall

updated over 1 year ago

Image Fit stack

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

Avatar

By Stuart Marshall

updated over 1 year ago

Grid Plus Pro stack

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

Avatar

By Stuart Marshall

updated over 1 year ago

Custom Fonts

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

Avatar

By Stuart Marshall

updated 10 months ago

Skip links

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

Avatar

By Stuart Marshall

updated 8 months ago

Companion stacks

Animate stack

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

Avatar

By Stuart Marshall

updated 8 months ago

FAQ Toggle

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

Avatar

By Stuart Marshall

updated 8 months 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 11 months 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 about 2 years 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 over 1 year 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 about 2 years 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 about 2 years 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 over 1 year 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 almost 2 years ago

Utility classes (Base)

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 months ago

Utility classes (Addon stack)

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

Avatar

By Stuart Marshall

updated 10 months ago

Grid enabler stack

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

Avatar

By Stuart Marshall

updated over 1 year ago

Source grid stacks comparison

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

Avatar

By Stuart Marshall

updated 8 months ago

Learn css grid

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

Avatar

By Stuart Marshall

updated over 1 year ago

Poster 2 integration (Source grids)

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

Avatar

By Stuart Marshall

updated over 1 year ago

Adding a background video

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

Avatar

By Stuart Marshall

updated 10 months ago

Hide and reveal

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

Avatar

By Stuart Marshall

updated 10 months ago

Positioning content

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

Avatar

By Stuart Marshall

updated 10 months ago

Equal height columns

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

Avatar

By Stuart Marshall

updated 10 months ago