[fsf-giving-guide.git] / Guidelines.md

# Guidelines for future use
---
## Git

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.

## Images:

* 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.
Commit	Line	Data
	1	# Guidelines for future use
	2	---
	3	## Git
	4
	5	Use master branch.
	6
	7	historical info: Ignore the responsive branch. Changes there have been
	8	manually brought back into master, this was necessary because Zak was
	9	not using git properly.
	10
	11	## Images:
	12
	13	* 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.
	14
	15	* 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)
	16
	17	* Charities' logos should be exported to 580px × 580px, transparent PNG
	18
	19	* Products' images, "good" or "naughty" should be put inside transparent, square PNG files at 350px × 350px, and a padding consistent with existing images.
	20
	21	## BUY/GET button
	22
	23	* Copy the entire block of code including the two lines for comments before and after the Divs.
	24
	25	* Paste it just after the h5 line.
	26
	27	* 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` ...
	28
	29	* Change the content of the Anchor link a and its `href` attributes to link to different sellers.
	30
	31	* If the product has only one source use this code instead:
	32
	33	`<a class="btn get-item" role="button" href="#">BUY</a>`
	34
	35
	36	## General Best Practices
	37
	38	* 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)
	39
	40	* Avoid using very long titles as they tend to wrap into multiple lines on mobile devices. Be concise.