v11
[fsf-giving-guide.git] / Guidelines.md
index ffa035f27c7cbb009720594a69aebf4772b8a5a7..7ac46031b458e9c42f80e6c9ff8a2c092c438c01 100644 (file)
@@ -1,13 +1,40 @@
-#Guidelines for future use
+# Guidelines for future use
 ---
-##Images:
+## Git
 
-* Use high resolution images with transparent backgrounds.
-* If it's a logo then export the images from its verctor source.
-* Do not put a logo next to a product or vice-versa. Always use images with the same nature (i.e. product versus product; logo versus logo)
-* Always export images and logos to 500px*500px.
+Use master branch.
 
+historical info: Ignore the responsive branch. Changes there have been
+manually brought back into master, this was necessary because Zak was
+not using git properly.
 
-##Text:
+## Images:
 
-* Be brief, people do not usually read long text.
+* If it's a logo then ALWAYS export the images from its VECTOR (.svg, .eps, .pdf) source. If a vector source isn't available, use a very large image and scale it down.
+
+* Do not put a logo next to a product or vice-versa, Always use images with the same nature (i.e. product versus product; logo versus logo)
+
+* Charities' logos should be exported to 580px × 580px, transparent PNG
+
+* Products' images, "good" or "naughty" should be put inside transparent, square PNG files at 350px × 350px, and a padding consistent with existing images.
+
+## BUY/GET button
+
+* Copy the entire block of code including the two lines for comments before and after the Divs.
+
+* Paste it just after the **h5** line.
+
+* Append a unique string to the `id` `href` `aria-controls` of the **a** elements, as well as the `id` of the next div and the content of `document.getElementById('...')` so that all have the same text. Example: `get-iem-smartphone` `get-item-compact` ...
+
+* Change the content of the Anchor link **a** and its `href` attributes to link to different sellers.
+
+* If the product has only one source use this code instead:
+
+`<a class="btn get-item" role="button" href="#">BUY</a>`
+
+
+## General Best Practices
+
+* Resist the urge to add another list-element **li** to announce a SALE, a BONUS, or anything unrelated to being a PROS or CONS. Instead use the SALE triangle, and Bootstrap's *alert* (Check its documentation, or existing code if unsure)
+
+* Avoid using very long titles as they tend to wrap into multiple lines on mobile devices. Be concise.