854145 - Add a default CSS to live sample

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: General, defect)

Description

[Jeremie Patonnier :Jeremie]

What feature should be changed? Please provide the URL of the feature if possible.
==================================================================================
Currently, CSS included into live sample are the one write into the page section use as a live sample.

This mean that when the live sample is included in a page through an iframe, there is a margin around the result (the default margin of the browser for the HTML body of the document inside the iframe). So defining the right size for the iframe is not obvious because each browser has its own rules about margin size. If the size is wrong the iframe will display some scrollbar.

See https://developer.mozilla.org/en-US/docs/SVG/Element/feColorMatrix
for an example of that issue.

To avoid this, it would be nice to have a default stylesheet apply to all live sample :

body {
  margin: 0;
}

svg {
  display: block; // This is a convenient helper for SVG samples
}

For live sample with custom CSS, it's easy to override this and for live simple which do not use CSS, it makes things easier and more intuitive to use.

We could even consider to use the full normalize.css project:
http://necolas.github.com/normalize.css/

What problems would this solve?
===============================
It allows to include a live simple without to guess the appropriate size to avoid scrollbar.

Who would use this?
===================
Everyone

What would users see?
=====================
Nothing, the inclusion of the live sample would act and look like an image (the size define by the user is the size displayed)

What would users do? What would happen as a result?
===================================================
Nothing. That's the whole point of this ;) 

Is there anything else we should know?
======================================

Comment 1

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/2d5f0d684805368e1b56226fe89e1315dd40df8e
fix bug 854145 - Allow custom CSS for all code samples

https://github.com/mozilla/kuma/commit/5b24152a3cd566fc0b3ab37a014416a656aaa8d5
Merge pull request #999 from darkwing/sample-css

fix bug 854145 - Allow custom CSS for all code samples