fix img link
[fsf-giving-guide.git] / v7 / README.md
CommitLineData
0bca8dc5
ZR
1# FSF Holiday Giving Guide README
2
3## Deployment
4The git repo holding the live copy of the site is in the master branch.
5
6## Adding images
7Make sure that, for side-by-side comparisons, both images are a similar height
8
9## Developing using Python
10The guide is a simple static web page. To view it in your browser,
11run `make` at the root of the source tree, then visit
12`localhost:8000`. The `Makefile` relies on Python for starting the
13development web server, but it's trivial to serve the page using the
14web server of your preference if you do not have Python.
efc4efe8
ZR
15
16
17# Guidelines for future use
18---
19## Images:
20
21* 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.
22
23* 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)
24
25* Charities' logos should be exported to 580px × 580px, transparent PNG
26
27* Products' images, "good" or "naughty" should be put inside transparent, square PNG files at 350px × 350px, and a padding consistent with existing images.
28
29## BUY/GET button
30
31* Copy the entire block of code including the two lines for comments before and after the Divs.
32
33* Paste it just after the **h5** line.
34
35* 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` ...
36
37* Change the content of the Anchor link **a** and its `href` attributes to link to different sellers.
38
39* If the product has only one source use this code instead:
40
41`<a class="btn get-item" role="button" href="#">BUY</a>`
42
43
44## General Best Practices
45
46* 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)
47
48* Avoid using very long titles as they tend to wrap into multiple lines on mobile devices. Be concise.