SSW Rules are technical documentation presented as practical guidelines that help teams build better software and work more effectively. They capture best practices across coding, architecture, communication, design and project management, making them a living knowledge base that supports consistency, clarity and quality in every project.
This is an example rule + Markdown cheatsheet to give you some guidance around how to write rules and show you the things you can use to format an SSW Rule. For more info see our GitHub Wiki page.
There are a few concepts that are applied to structure most SSW Rules:
See a few examples of SSW Rules that follow the structure of good and bad examples, then link off to external documentation for more information:
## This is a heading 2### This is a heading 3#### This is a heading 4##### This is a heading 5###### This is a heading 6 and below is a blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.> -Someone famous
Figure: Markdown to generate headings and blockquotes
Do not use Heading 1 (<h1>) in the content, even with the good intention of improving SEO. The page title already uses <h1>, and adding more can harm accessibility and semantic structure. As per MDN guidelines - avoid multiple <h1> elements on the same page.
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
Tip: See text decoration section for more details on making the text bold.
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
...and this is a blockquote:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.- Someone famous
_This text will be italic._**And this text will be bold.**~~strikethrough.~~_You **can** combine them_.==These words== will be highlighted.
Figure: Markdown to generate different text styles
This text will be italic.
And this text will be bold.
strikethrough.
You can combine them.
These words will be highlighted.
#### Unordered lists- This is the first item of an unordered list- This is the second item of an unordered list1. This is the first item of an ordered list inside an unordered list2. This is the second item of an ordered list inside an unordered list- This is the third item of an unordered list- This is the first item of an unordered list inside another- This is the second item of an unordered list inside another1. This is the first item of an ordered list inside a nested unordered list2. This is the second item of an ordered list inside a nested unordered list#### Ordered lists1. This is the first item of an ordered list2. This is the second item of an ordered list3. This is the third item of an ordered list- This is the first item of an unordered list inside an ordered list- This is the second item of an unordered list inside an ordered list1. This is the first item of an ordered list inside another2. This is the second item of an ordered list inside another
Figure: Markdown to generate lists
[link text](https://www.url.com "link title")
Figure: Markdown to generate links
This is an internal link.
This is an internal link with title (hover me).
This is an external link.
Cool link features:
<boxEmbedstyle="greybox"body={<>This is a box using the class "greybox".</>}figurePrefix="none"figure="Figure Text"/>
Figure: Markdown to generate boxes
This is a box using the class "greybox".
This is a box using the class "highlight".
This is a <div> using the class "info". Works the same as using a <p> . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
This is a <div> using the class "china". Works the same as using a <p> . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is a <div> using the class "codeauditor". Works the same as using a <p> . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is a <div> using the class "todo". Works the same as using a <p> . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
<imageEmbedalt="Image"size="large"showBorder={true}figurePrefix="none"figure="Caption text"src="/uploads/rules/rule/image-file.jpg"/>
Figure: Image with size set to "small"
Figure: Image with size set to "medium"
Figure: Image with size set to "large"
Figure: Image with showBorder set to "false"
Figure: How a smaller image (400px) works with long caption. Full screen on mobile, real width on larger screens...
Figure: ...and with a short caption
TODO: Make these images hosted internally as per Do you make sure your images are hosted internally?
β Figure: Caption for bad images
Figure: Caption for regular images
π Figure: Caption for OK images
β Figure: Caption for good images
This is an example of a bad grey box.
β Figure: Caption for bad examples
This is an example of a normal grey box.
Figure: Caption for normal examples
This is an example of a OK grey box.
π Figure: Caption for ok examples
This is an example of a good grey box.
β Figure: Caption for good examples
<youtubeEmbed url="https://www.youtube.com/embed/0ugMkda9IBw" description={"Video: Top 5 Reasons Why ASP.NET MVC is Great (3 min)"} />
Figure: MDX to add videos and video captions
Check out this video - it's responsive!
To include code block in Markdown, start with 3 backticks ``` on a new line, write or paste your code, and then end with 3 backticks on a new line.
For syntax highlighting in code blocks, add the language name right after the opening backticks. Learn more on Markdown β Do you set the language on code blocks?
To add inline code in Markdown, wrap the code snippet with single backticks. See this text as inline code for example.
This is a piece of code in a code block
β Figure: Bad example - Because this code doesn't include the language used
See this json file for all supported languages and their aliases we can use in SSW Rules. See some examples:
let iceCream = "chocolate";if (iceCream === "chocolate") {alert("Yay, I love chocolate ice cream!");} else {alert("Awwww, but chocolate is my favorite...");}
Figure: Javascript code block
IF EXISTS (SELECT 1 FROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASE TABLE' ANDTABLE_NAME='Employees')ALTER TABLE [dbo].[Employees]( β¦β¦ ) ON [PRIMARY]ELSECREATE TABLE [dbo].[Employees]( β¦β¦ ) ON [PRIMARY]
Figure: SQL code block
public class MyClass{public string myField = string.Empty;public MyClass(){}public void MyMethod(int parameter1, string parameter2){Console.WriteLine("First Parameter {0}, second parameter {1}",parameter1, parameter2);}public int MyAutoImplementedProperty { get; set; }private int myPropertyVar;public int MyProperty{get { return myPropertyVar; }set { myPropertyVar = value; }}}
Figure: C Sharp code block
{"glossary": {"title": "example glossary","GlossDiv": {"title": "S","GlossList": {"GlossEntry": {"ID": "SGML","SortAs": "SGML","GlossTerm": "Standard Generalized Markup Language","Acronym": "SGML","Abbrev": "ISO 8879:1986","GlossDef": {"para": "A meta-markup language, used to create markup languages such as DocBook.","GlossSeeAlso": ["GML", "XML"]},"GlossSee": "markup"}}}}}
Figure: JSON code block
<emailEmbedfrom=""to="XXX"cc="YYY"bcc="ZZZ"subject="{{ EMAIL SUBJECT }}"shouldDisplayBody={true}body={<>## Hi XXX,{{ EMAIL CONTENT }}</>}figurePrefix="good"figure="Good example - Nice email template"/>
Figure: Markdown for email templates
{{ EMAIL CONTENT }}
β Figure: Good example - Nice email template
| Tables | Are | Cool || ------------- | :-----------: | -----: || col 3 is | right-aligned | \$1600 || col 2 is | centered | \$12 || zebra stripes | are neat | \$1 |
Figure: Markdown to generate tables
| Tables | Are | Cool |
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
| Markdown | Less | Pretty |
| Still | renders | nicely |
| 1 | 2 | 3 |
---
Hereβs what the --- version looks like in rendered Markdown
Markdown and SSW Rule conventions make your content clear, consistent, and easy to read. Use headings, lists, boxes, images, code, and thematic breaks to structure your rules effectively. This guide is your reference to create professional, maintainable documentation every time.