| 1 | # FSF Holiday Giving Guide README |
| 2 | |
| 3 | ## Deployment |
| 4 | The git repo holding the live copy of the site is in the master branch. |
| 5 | |
| 6 | ## Adding images |
| 7 | Make sure that, for side-by-side comparisons, both images are a similar height |
| 8 | |
| 9 | ## Developing using Python |
| 10 | The guide is a simple static web page. To view it in your browser, |
| 11 | run `make` at the root of the source tree, then visit |
| 12 | `localhost:8000`. The `Makefile` relies on Python for starting the |
| 13 | development web server, but it's trivial to serve the page using the |
| 14 | web server of your preference if you do not have Python. |
| 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. |