v9/#README.md#

   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.