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...
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 ter...
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 a...
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 Sourc...
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 ...
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 wh...
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...
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 s...
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 ge...
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 a...
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 Gr...
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...
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 provi...
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 co...
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 s-hi...
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 w...
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 achiev...
