Source Base stack

Avatar

By Stuart Marshall

updated 7 months ago

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 font sizes) should be. Most Source stacks require the base stack to be present on the page in order to operate correctly.

Colours

The colours that you set here are used to style your page and provide the default colours for a range of elements (background, text etc). You can also add an accent colour that is used (as default) for buttons and that can also be selected for text and background elements in your projects.

Fonts

To set the base font (i.e. for paragraphs, lists etc etc) and the Headers font you can use any of the built in fonts from the list or opt to add a custom font (that you have added to RW resources) or add a css link (to e.g. a Google Font). There is also the option of setting a different font for H1s.

Font sizes

All sizes are added using REMs as the sizing unit. REMs offer a flexible method of sizing fonts as the size is based off of a base font size and so if / when this base font size is changed then all of the font sizes will also be changed accordingly.

NB: The standard size of the base font is 16px. This size makes it a bit troublesome to calculate the actual size a font will be (as multiplying your rem size by 16 isn't particularly easy). Stripped however (as default) adjusts the base size to 10px which makes things a lot easier. The default REM size for paragraph text is 1.6 which equates to 16px. A header with a size of 4.8rem is 48px.

You can, if you wish, set up Source to use the standard base size of 16px by selecting the appropriate option in the stack. You may wish to do this if you regularly use other (third party) stacks that use rem as their default settings will likely be set up with an assumption that the base size is the standard 16px. Note however that if you do adjust the base size back to standard that you will have to adjust all of the default rem sizes in the Font settings as when multiplied by 16 (as opposed to 10) they will be too big for your needs.

Adding Google fonts

To add a google font, select 'Google / CSS link' from the drop down menu. Once done you will be presented with an input field that is looking for the url to the file. On the Google Fonts web page, once you have selected a font (and specified the weight) check out the embed code and copy only the url part (i.e. everything between the double quotes). Then paste this into the url field in the stack settings. You need to also add in the name of the font. This should be exactly as written on Google Fonts (do not include any quote marks, these will be added automatically in Source). In the stack settings, you should also select the default weight for the font.

Adding custom fonts

To add your own fonts, place the 'woff' version of your file into RW Resources (NB: Only woff files are required / supported). Then select 'Custom' from the drop down list in Source Base stack. You will then be able to set a link to the font you have added by locating it in the Resources folder. You should link to the different styles / weights that you have (if provided). The name that you add does not really matter - it doesn't need to exactly match the filename. 

Container defaults

You can set a max-width value. This value will be the default for any Source Container (or Container Plus) stacks that you add to the page. 

To set up additional Container default values (for padding, margins, backgrounds etc) you can add the Container Base stack to the page.



Did this answer your question?