Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,16 +112,23 @@ Destinations: These files also include "intelligent partials", which are section


## Formatting and Prettifying
Some important tips! We also have a Styleguide available so you can see how different formatting looks when rendered.
Some important tips! We also have a (rendering)[Formatting guide](/src/utils/formatguide.md) available so you can see how different formatting looks when rendered.

### Diagrams

We have a diagram library in sketch, which you can use to build pretty, on-brand architecture diagrams, etc. There's a [readme file in that directory](diagram-library/readme.md) with instructions on how to use it.

### Adding Images

**All images should be saved locally! No linking to 3rd party-hosted images!**

As CDN hosting is from the publish side, we shouldn't be worrying about that at the file level.

To add images to a docs page, create an `images` folder for the docs path, save the image to the folder and then reference it in your markdown file. The [Google Analytics destination](/src/connections/destinations/catalog/google-analytics) is a good example.

There are no naming conventions at this time. Anything you see with `asset` was dowloaded by a script to save it from Contents.io. :)
There are no _enforced_ naming conventions at this time. Files that start with an underscore are ignored by jekyll. Anything you see with `asset` was dowloaded by a script to save it from Contents.io. :)

In general, it's a good practice to name images with a description that helps you figure out where they should go within a page, or within a larger folder of images. Naming with a prefix of what application the screenshot contains can be helpful (for example `atom-new-file.png`, `atom-commit-changes.png` etc), or you can name images to describe a process flow (for example `checkout-1-add-to-cart.png`, `checkout-2-est-shipping.png` and so on).

### Adding links

Expand Down
5 changes: 5 additions & 0 deletions diagram-library/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ You can also export the file, or diagrams you make with it, to `.svg` format for
8. At the VERY end of the panel, find the **Export Selected** button, and click it.
9. If needed, move the resulting `.png` file to the correct `images` directory.
10. Add the new diagram in the markdown file, and run a test build to make sure your diagram is legible on the page!
(Don't forget to add the file in git!)

That's it!

Expand All @@ -30,3 +31,7 @@ When you need to update the images, you can reopen the Sketch file, make your ch
## Adding new items to the Library

Contact @sanscontext for instructions. :)

## More reading on diagrams and diagram best practices

https://blog.ilograph.com/posts/diagram-mistakes/