Merge pull request #1508 from cogell/Add-amp-border-box-class

Add amp-border-box class for use on html
ampproject · Jan 28, 2016 · 730bda0 · 730bda0
2 parents d670698 + 18bcd2d
commit 730bda0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/css/amp.css b/css/amp.css
@@ -287,6 +287,16 @@ template {
  display: none !important;
 }
 
+/**
+ * Authors can set this class on their html tags to provide `border-box` box-sizing
+ * to every element in their document. Individual elements can override as necessary.
+ */
+.amp-border-box,
+.amp-border-box *,
+.amp-border-box *:before,
+.amp-border-box *:after {
+ box-sizing: border-box;
+}
 
 amp-pixel {
  position: absolute !important;

diff --git a/docs/include_features.md b/docs/include_features.md
@@ -241,6 +241,11 @@ if the browser doesn't support HTML5 audio, for example:
  <source type="audio/ogg" src="foo.ogg">
 </amp-audio>
 ```
+# Add Border Box Sizing
+
+Included in the base amp css is a class of `amp-border-box` that will set `box-sizing: border-box` on all elements 
+nested under that class. You can set this on your `html` tag to provide your page with default `border-box` sizing. 
+Individual elements can override this by beating or matching the CSS specificity of `.amp-border-box`. 
 # Count user page views
 
 Count user page views