Source

The Source Button stack allows you to add (and style) buttons or button groups to the page. These can be used to trigger interactions or to link to different sections / pages.

The Source Header stack allows you to add (and style) headings.

The Source Paragraph stack allows you to add (and style) paragraph elements.

Markdown is a great way to add your content to the page. You can combine all sorts of elements within the one stack (headers, paragraphs, lists, quotes, dividers etc). In the stack there are settings to control the styling of all of these elements.

The Source Image stack uses the picture html element and allows you to add up to 4 different image widths (that will then be picked from depending on the device size being used).

There are also numerous styling options (border radius, drop shadow etc).

The SVG stack allows you to add SVG code to the stack. It is a great option for certain types of image - such as icons / logos - but can be used for a range of image types. The code for SVG images is often very small and way more efficient that using regular image equivalents.

Add horizontal lines to break up your content or for effect. Various styling options let you set the width and height of the lines as well as the colour and style.

The Image Fit stack allows you to have an image fill the available space of its parent container. You will find this especially useful in grid items. There is also the option to limit the height of the image which makes it a great solution as an image topper when creating 'card' type layouts.

Image Plus lets you use modern image formats - which are far smaller and more efficient that jpeg/png - and provides fallback image support for browsers that are yet to support these formats.

Adding this enabler stack to the page allows you to 'smooth scroll' between anchor points on the page (even when linked to from another page). Simply add the ID of the stack that you want to link to in the link settings (e.g. #introduction).

Source doesn't include anything you might not need by default. If you want / need to use jQuery then you can add this stack. Note: Most third party stacks that need jQuery will generally load this themselves anyway.

Source doesn't include anything you might not need by default. There are things though - such as Font Awesome - that you may well want to make use of in your Source projects. This enabler stack activates the Stacks Font Awesome loading.

The Container stack is where you place your content. Each Container can have its own width, padding, margins and backgrounds set up. You can even set up the Container to make use of flexbox to make aligning your content on the page a breeze!

The Container Plus stack is a more advanced stack than the default Container stack. In addition to what it can do, Container Plus allows you to set up different widths, margins and padding for each breakpoint. It also lets you use images as a background.

The Source Grid stack is a really powerful solution for equal width grids (and columns!). You can set it to have any number of columns at each breakpoint. Within each grid item all of the added content can be controled / aligned using flexbox values. This provides great options for presenting your content and allows you to build your own 'card'-type content.

For different width columns (and a load more functionality) you will need the Grid Plus stack.

Grid Plus stack brings you the full power of CSS Grid. This is without question the best way to layout modern web pages. You can make your grid items span columns or rows and even make them overlap each other. There is a bit of a learning curve but Grid Plus will truly allow you to do things within RapidWeaver that simply can't be done elsewhere.

Grid Plus Pro is built on the same CSS Grid code as Grid Plus but is a more 'Pro' aligned version of the stack that has a number of key differences:

• Grid Plus Pro allows for unlimited breakpoints (for the grids and items!)
• Grid Plus Pro does not use the inbuilt Stacks styling options and so for advanced styling options you may need to use your own / utility CSS classes

The Source Base stack is where the bulk of the code for Source 'micro' framework is stored and as such it needs to be added to each page in the project.

It is in this stack where most of the basic settings for colours and fonts etc are set.

The Container Base stack allows you to define a number of settings that can then be applied to any Container (or Container Plus) stacks that you add to the page. Sharing common code/settings like this is a great for efficiency. You can set up padding, margins and backgrounds. You can even add multiple Container Base stacks to the page and assign each its own ID.

Our navigation stack was built by none other than Big White Duck and provides a fantastic navigation bar / hamburger menu to present all of your RapidWeaver page links. There are numerous styling controls to allow you to set up the Nav bar just how you like it!

Many people now have a preference for using 'Dark mode' on their computers. The Source Dark Mode stack allows you to set up alternative styling for those that visit your site and have this preference.

This stack is used to set up content to be conditionally displayed based on the web visitors preference for Dark Mode. It could be used, for example, to show a different image in dark and light modes. This stack can be used with or without the main Dark Mode stack added to the page.

Coder is a simple yet extremely powerful stack that gives those that have some coding knowledge (html and css) the option of taking more control of what is added to the page. Coder lets you hand build sections of your page with ease and even lets you incorporate regular stacks wherever required. (It's especially great in conjunction with the Utility Classes stack!)

The Utility Classes stack lets you optionally add (and customise) a number of utlity CSS classes that you can then apply to any stack within a Stacks page. It includes classes for display, positioning, flexbox, margins, padding, borders and more! It's great alongside our Coder stack!

The Custom Fonts stack lets you add your own self-hosted fonts or link to Google Fonts. The fonts can be targetted at specific elements giving you fine grain control of the text on the page. You can even apply some styling (e.g. line-height, letter-spacing and word-spacing).

The Skip Links stack allows for added accessibility on your site by offering users (that are using a keyboard) the option to skip directly to the main content as opposed to having to tab through countless links (e.g. in the nav bar). This makes for a far more enjoyable browsing experience for those using screen readers etc.

Grouper is purely to make Edit mode far more organised. You can add stacks inside it and hide it / minimise it. You can also add notes and colour coding to help streamline your workflow.