uncompiled/amp-bootstrap-example

failed to reproduce

Opened this issue · 1 comments

Trying reproduce, but only successfuly create amphtml/css/bootstrap.min.css. No amphtml/index.html and no build directory.

Using nodejs 0.12.7

The default gulp command doesn't run any of the helper tasks.

You need to run each of these tasks individually to create the output:

  • gulp purify to output the purified CSS in amphtml/css
  • gulp inline-css to insert the CSS into the HTML in build/index.html
  • gulp validate to run the AMP validator on the output file

That was done intentionally because this example workflow is really not a panacea to make Bootstrap 100% compatible with AMP. In this example, gulp validate is expected to fail. This is because even after cleaning Bootstrap's CSS, there are still CSS classes that are used, but not allowed as part of the AMP spec. Notably, the errors are caused by @-ms-viewport and !important present in the final CSS.

Possible solutions are:

  • Build a version of Bootstrap CSS from source that validates with the AMP validator.
  • Build a node module that automatically cleanses/fixes CSS that is not valid in the AMP spec. Stripped CSS would need to be output because this could cause unintended changes to the layout during the build process. This is another reason that I didn't automatically remove invalid CSS classes in this example.