amp-bootstrap-example
amp-bootstrap-example copied to clipboard
failed to reproduce
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 inamphtml/css
-
gulp inline-css
to insert the CSS into the HTML inbuild/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.