diff --git a/README.md b/README.md index 497a7e7d4d..8aef8a60e1 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/diagram-library/readme.md b/diagram-library/readme.md index aa358fe944..d2a589b7eb 100644 --- a/diagram-library/readme.md +++ b/diagram-library/readme.md @@ -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! @@ -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/