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) without the usual array of 'div' wrappers (which are very often surplus to requirements). This gives you way more control, allowing you to add divs only where required.
This approach passes the responsibility for styling the added content onto the user. This can be done via CSS classes - using the Source built-in utility and colour classes as well as your own custom CSS. The separate Utility Classes stack is a great fit for this approach too.
Overview video
Settings
Content type
You can select what type of content you want the Coder stack to use. It can be either HTML, Markdown, Styled Text, CSS or a Stacks drop zone. There will be times where you will need to nest Coder stacks - for this you would obviously choose 'Stacks' as the content type and then simply drop in another Coder stack.
The CSS option is useful for when you are creating a partial, external or template and want to include CSS that you would normally add to the page. (Tip: Create / edit your CSS code outside of RapidWeaver and then copy/paste into Coder stack as it is very difficult to use the text fields within Stacks for this purpose).
Add Wrapper div?
You have the option of wrapping the content within a wrapper div. You will generally want to do this if you want to apply a class/styling to the div or added content.
Wrapper tag
You can select the tag that you wish to use for this Coder wrapper (e.g. div, header, main etc)
Use Base max-width?
This setting will add the relevant classes to the wrapper so that the width of the wrapper picks up the Source Base max-width value (it also centres the wrapper in the available space).
Class(es)
Add any class names into this box. Note: separate multiple class names with spaces.
Data attributes
You can use this space to add in any data attributes that you also want to include within the div.
Anchor / ID
You can add an optional ID name for the stack. This can be used to target CSS or to act as an anchor that you can link to via a url.
Show Developer notes
You can show/hide a notes section where you can add notes that are relevant to that particular Coder stack. These are only seen in Edit mode.
