Explain the approach used by building blocks

[acuster]

The page http://buildingfirefoxos.com/building-blocks/ needs to start with an explanation of the system of HTML elements, CSS files and Image Sprites that are proposed for use. The section should not immediately jump to the example of action-items.html.

The approach proposed by this site is significantly more complicated than a straight forwards approach using HTML. The use of a single icon for the configure menu, for example, requires a slew of CSS files and a huge image sprite; in old school HTML this would be a single <button...> element and one, small, image. The explanation should give an indication of how your approach structures HTML elements, CSS classes (and their grouping into files) and the PNG sprites for the different category of elements. The explanation should also give some of the reasoning for and justification of this approach. Image sprites, for example, originated as a response to the latency of HTTP requests (a single request could be made for all the icon images which would be used on a site); a web app on an actual device has completely different tradeoffs (zero latency, severe memory constraints) making it unclear why the web approach would still be considered suitable for apps on a physical device.

[rnowm]

You are right, we need "mini-homes" per section. This is something we wanted to work on, but never had a good version we were happy with, so we just went straight to the content.
If you think you could offer a good design, feel free to PR.

And you are also right about sprites, we are currently working in two new approaches: icon fonts and SVG graphics.