2013-10-10 13:35:26 -04:00
<!DOCTYPE html> < html > < head > < title > normalize | Ribs
2013-10-15 14:19:50 -04:00
< / title > < meta charset = "utf-8" > < style > * { - m o z - b o x - s i z i n g : b o r d e r - b o x ; b o x - s i z i n g : b o r d e r - b o x ; m a r g i n : 0 ; p a d d i n g : 0 ; b o r d e r : 0 } b o d y { p a d d i n g : 6 0 p x 0 4 0 p x ; b a c k g r o u n d - c o l o r : h s l ( 2 0 7 , 1 0 % , 9 0 % ) ; c o l o r : h s l ( 2 0 7 , 5 % , 3 0 % ) } . c o n t a i n e r { m a x - w i d t h : 1 3 0 0 p x ; m a r g i n : 0 a u t o ; p a d d i n g : 0 2 0 p x } . s e c t i o n { p o s i t i o n : r e l a t i v e ; m a r g i n - b o t t o m : 2 0 p x } . d o c s { p o s i t i o n : r e l a t i v e ; z - i n d e x : 2 ; w i d t h : 6 8 % ; m i n - h e i g h t : 2 0 0 p x ; b a c k g r o u n d - c o l o r : h s l ( 2 0 7 , 0 % , 1 0 0 % ) ; b a c k g r o u n d - c l i p : p a d d i n g - b o x ; b o r d e r : 1 p x s o l i d h s l a ( 2 0 7 , 5 % , 5 % , . 1 ) ; b o r d e r - r a d i u s : 5 p x ; b o x - s h a d o w : 0 0 3 p x h s l a ( 2 0 7 , 5 % , 5 % , . 1 ) } . c o d e { p o s i t i o n : a b s o l u t e ; t o p : 5 p x ; b o t t o m : 5 p x ; r i g h t : 0 ; z - i n d e x : 1 ; w i d t h : 3 3 % ; p a d d i n g : 1 0 p x 1 0 p x 1 0 p x 2 0 p x ; b o r d e r - r a d i u s : 0 5 p x 5 p x 0 ; b o r d e r : 1 p x s o l i d h s l a ( 2 0 7 , 2 0 % , 1 0 % , . 1 ) ; b a c k g r o u n d - c o l o r : h s l a ( 2 0 7 , 2 0 % , 9 5 % , . 9 ) ; b a c k g r o u n d - c l i p : p a d d i n g - b o x ; o p a c i t y : . 5 ; - w e b k i t - t r a n s i t i o n : o p a c i t y . 4 s ; - m o z - t r a n s i t i o n : o p a c i t y . 4 s ; - o - t r a n s i t i o n : o p a c i t y . 4 s ; t r a n s i t i o n : o p a c i t y . 4 s } . c o d e : h o v e r { o p a c i t y : 1 } . p r e v i e w { b a c k g r o u n d : h s l ( 2 0 7 , 0 % , 1 0 0 % ) ; b o r d e r - t o p : 1 p x s o l i d h s l ( 2 0 7 , 3 0 % , 9 5 % ) ; p o s i t i o n : r e l a t i v e ; z - i n d e x : 1 } . p r e v i e w - c o d e + . p r e v i e w { m a r g i n - t o p : 0 ; b o r d e r - t o p : 0 } . p r e v i e w i f r a m e { d i s p l a y : b l o c k ; w i d t h : 1 0 0 % ; h e i g h t : 1 0 0 % ; o v e r f l o w : h i d d e n } . p r e v i e w - c o d e { p o s i t i o n : r e l a t i v e ; z - i n d e x : 2 ; d i s p l a y : b l o c k ; w i d t h : 1 0 0 % ; c o l o r : h s l ( 2 0 7 , 9 % , 3 7 % ) ; m a x - h e i g h t : 2 0 0 p x ; p a d d i n g : 1 0 p x 2 0 p x ; o v e r f l o w - y : a u t o ; b a c k g r o u n d : h s l ( 2 0 7 , 3 0 % , 9 5 % ) ; b o r d e r : 1 p x s o l i d h s l ( 2 0 7 , 3 0 % , 8 5 % ) ; b o r d e r - l e f t : 0 ; b o r d e r - r i g h t ; b o x - s h a d o w : i n s e t 0 1 p x 2 p x h s l a ( 2 0 7 , 3 0 % , 1 0 % , . 1 ) ; l i n e - h e i g h t : 1 . 1 ! i m p o r t a n t ; r e s i z e : n o n e } . p r e v i e w - c o d e : f o c u s { o u t l i n e : 0 ; b a c k g r o u n d : h s l ( 2 0 7 , 3 0 % , 9 7 % ) ; b o x - s h a d o w : i n s e t 0 1 p x 2 p x h s l a ( 2 0 7 , 3 0 % , 1 0 % , . 1 ) , 0 0 5 p x h s l a ( 2 0 7 , 7 5 % , 7 5 % , . 9 ) } . p r e v i e w - c o d e : l a s t - c h i l d { b o r d e r - b o t t o m : 0 ; b o r d e r - r a d i u s : 0 0 5 p x 5 p x } . r e s i z e a b l e { p a d d i n g : 1 5 p x ; o v e r f l o w : a u t o ; b a c k g r o u n d : h s l ( 2 0 7 , 0 % , 1 0 0 % ) ; b o x - s h a d o w : 0 0 2 p x h s l a ( 2 0 7 , 1 0 % , 2 0 % , . 2 ) ; r e s i z e : b o t h } . p r e v i e w - c o d e , p r e { w h i t e - s p a c e : p r e - w r a p ; w o r d - w r a p : b r e a k - w o r d ; o v e r f l o w - y : a u t o } . c o d e p r e { h e i g h t : 1 0 0 % ; m a r g i n - t o p : 0 } . b a r { p o s i t i o n : f i x e d ; l e f t : 0 ; r i g h t : 0 ; z - i n d e x : 1 0 1 0 ; m i n - h e i g h t : 4 0 p x ; l i n e - h e i g h t : 4 0 p x ; b a c k g r o u n d - i m a g e : - w e b k i t - l i n e a r - g r a d i e n t ( h s l a ( 2 0 7 , 1 0 % , 3 5 % , . 9 7 ) , h s l a ( 2 0 7 , 5 % , 2 5 % , . 9 2 ) ) ; b a c k g r o u n d - i m a g e : - m o z - l i n e a r - g r a d i e n t ( h s l a ( 2 0 7 , 1 0 % , 3 5 % , . 9 7 ) , h s l a ( 2 0 7 , 5 % , 2 5 % , . 9 2 ) ) ; b a c k g r o u n d - i m a g e : - o - l i n e a r - g r a d i e n t ( h s l a ( 2 0 7 , 1 0 % , 3 5 % , . 9 7 ) , h s l a ( 2 0 7 , 5 % , 2 5 % , . 9 2 ) ) ; b a c k g r o u n d - i m a g e : l i n e a r - g r a d i e n t ( h s l a ( 2 0 7 , 1 0 % , 3 5 % , . 9 7 ) , h s l a ( 2 0 7 , 5 % , 2 5 % , . 9 2 ) ) } . b a r . t o p { t o p : 0 ; b o x - s h a d o w : 0 1 p x 2 p x h s l a ( 2 0 7 , 5 % , 0 % , . 2 ) } . b a r . b o t t o m { b o t t o m : 0 ; b o x - s h a d o w : 0 - 1 p x 2 p x h s l a ( 2 0 7 , 5 % , 0 % , . 2 ) } . b a r u l { m a r g i n : 0 ! i m p o r t a n t } . b a r l i { d i s p l a y : b l o c k ; l i s t - s t y l e : n o n e } . b a r . i c o n p a t h { f i l l : h s l a ( 2 7 , 1 0 % , 7 5 % , . 7 5 ) } . d o c s . i c o n p a t h { f i l l : h s l a ( 2 0 7 , 1 0 % , 7 5 % , . 5 ) } . d o c s . p e r m a l i n k : h o v e r . i c o n p a t h { f i l l : h s l ( 2 0 7 , 1 0 % , 7 5 % ) } . b a r b u t t o n { c o l o r : h s l a ( 2 7 , 1 0 % , 7 5 % , . 7 5 ) } . b a r b u t t o n : h o v e r . i c o n p a t h , . b a r b u t t o n . i s - a c t i v e . i c o n p a t h { f i l l : h s l ( 2 7 , 1 0 % , 8 5 % ) } . b a r b u t t o n : h o v e r , . b a r b u t t o n . i s - a c t i v e { c o l o r : h s l ( 2 7 , 1 0 % , 8 5 % ) } . b a r . i c o n { v e r t i c a l - a l i g n : m i d d l e ; d i s p l a y : i n l i n e - b l o c k } . b a r , . b a r a , . b a r a : v i s i t e d { c o l o r : h s l ( 2 7 , 1 0 % , 8 5 % ) ; t e x t - s h a d o w : 1 p x 1 p x 0 h s l a ( 2 7 , 5 % , 0 % , . 5 ) } . b a r a : h o v e r , . b a r a . i s - a c t i v e { c o l o r : h s l ( 2 7 , 1 0 % , 9 5 % ) ; t e x t - s h a d o w : 1 p x 1 p x 0 h s l a ( 2 7 , 5 % , 0 % , 1 ) ; t e x t - d e c o r a t i o n : n o n e } . b r a n d { f l o a t : l e f t ; m a r g i n - r i g h t : 2 0 p x ; f o n t - w e i g h t : 7 0 0 ; f o n t - s i z e : 1 6 p x ; t e x t - d e c o r a t i o n : n o n e } . b r a n d , a . b r a n d , a . b r a n d : v i s i t e d { c o l o r : h s l ( 2 7 , 5 % , 5 % ) ; t e x t - s h a d o w : 1 p x 1 p x 0 h s l a ( 2 7 , 5 % , 1 0 0 % , . 2 ) } . b r a n d : h o v e r , a . b r a n d : h o v e r { c o l o r : h s l ( 2 7 , 5 % , 0 % ) ; t e x t - s h a d o w : 1 p x 1 p x 0 h s l a ( 2 7 , 5 % , 1 0 0 % , . 3 ) ; t e x t - d e c o r a t i o n : n o n e } . m e n u { f o n t - s i z e : 1 2 p x } . m e n u > l i { f l o a t : l e f t ; p o s i t i o n : r e l a t i v e } . m e n u a { d i s p l a y : b l o c k ; m a r g i n - r i g h t : 1 5 p x } . d r o p d o w n - t o g g l e { p o s i t i o n : r e l a t i v e ; p a d d i n g - r i g h t : 1 5 p x } . d r o p d o w n - t o g g l e : a f t e r { d i s p l a y : b l o c k ; p o s i t i o n : a b s o l u t e ; r i g h t : 0 ; t o p : 1 8 p x ; c o n t e n t : ' ' ; b o r d e r : 4 p x s o l i d ; b o r d e r - l e f t - c o l o r : t r a n s p a r e n t ; b o r d e r - r i g h t - c o l o r : t r a n s p a r e n t ; b o r d e r - b o t t o m - c o l o r : t r a n s p a r e n t } . n a v - r e s u l t s , . d r o p d o w n { p o s i t i o n : a b s o l u t e ; z - i n d e x : 1 0 2 0 ; t o p : 3 2 p x ; l e f t : - 1 6 p x ; w i d t h : 1 7 5 p x ; m a x - h e i g h t : 5 0 0 p x ; p a d d i n g : 1 0 p x 0 ; o v e r f l o w - y : a u t o ; w o r d - w r a p : b r e a k - w o r d ; f o n t - s i z e : 1 1 p x ; l i n e - h e i g h t : 2 0 p x ; b a c k g r o u n d - c o l o r : h s l a ( 2 0 7 , 1 0 % , 2 5 % , . 9 7 ) ; b o r d e r : 1 p x s o l i d h s l a ( 2 0 7 , 5 % , 7 0 % , . 3 ) ; b o r d e r - r a d i u s : 3 p x ; b o x - s h a d o w : 0 0 3 p x h s l a ( 2 0 7 , 5 % , 0 % , . 2 ) } . t o c - l i s t { w i d t h : 2 0 0 p x } . n a v - r e s u l t s { r i g h t : 0 ; w i d t h : 2 0 0 p x ; l e f t : a u t o ; p a d d i n g : 5 p x 0 } . n a v - r e s u l t s - f i l e n a m e { d i s p l a y : b l o c k ; f o n t
2013-10-10 13:35:26 -04:00
< p > ==========================================================================< / p >
< / div > < / article > < article id = "html5-display-definitions" class = "section" > < div class = "docs" > < a href = "#html5-display-definitions" class = "permalink" > < svg viewBox = "0 0 512 512" height = "32" width = "32" class = "icon" > < path d = "M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z" > < / path > < / svg > < / a > < h1 id = "html5-display-definitions" > HTML5 display definitions< / h1 >
< p > < em >
< / em > Correct < code > block< / code > display not defined in IE 8/9.< / p >
< p > < em >
< / em > Correct < code > inline-block< / code > display not defined in IE 8/9.< / p >
< p > < em >
< / em > Prevent modern browsers from displaying < code > audio< / code > without controls.
* Remove excess height in iOS 5 devices.< / p >
< p > < em >
< / em > Address < code > [hidden]< / code > styling not present in IE 8/9.
* Hide the < code > template< / code > element in IE, Safari, and Firefox < 22.< / p >
< p > ==========================================================================< / p >
< / div > < div class = "code" > < pre > < code > article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}< / code > < / pre > < / div > < / article > < article id = "base" class = "section" > < div class = "docs" > < a href = "#base" class = "permalink" > < svg viewBox = "0 0 512 512" height = "32" width = "32" class = "icon" > < path d = "M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z" > < / path > < / svg > < / a > < h1 id = "base" > Base< / h1 >
< p > < em >
< / em > 1. Set default font family to sans-serif.
< em > 2. Prevent iOS text size adjust after orientation change, without disabling
< / em > user zoom.< / p >
< p > < em >
< / em > Remove default margin.< / p >
< p > ==========================================================================< / p >
< / div > < div class = "code" > < pre > < code > html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}< / code > < / pre > < / div > < / article > < article id = "links" class = "section" > < div class = "docs" > < a href = "#links" class = "permalink" > < svg viewBox = "0 0 512 512" height = "32" width = "32" class = "icon" > < path d = "M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z" > < / path > < / svg > < / a > < h1 id = "links" > Links< / h1 >
< p > < em >
< / em > Remove the gray background color from active links in IE 10.< / p >
< p > < em >
< / em > Address < code > outline< / code > inconsistency between Chrome and other browsers.< / p >
< p > < em >
< / em > Improve readability when focused and also mouse hovered in all browsers.< / p >
< p > ==========================================================================< / p >
< / div > < div class = "code" > < pre > < code > a {
background: transparent;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}< / code > < / pre > < / div > < / article > < article id = "typography" class = "section" > < div class = "docs" > < a href = "#typography" class = "permalink" > < svg viewBox = "0 0 512 512" height = "32" width = "32" class = "icon" > < path d = "M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z" > < / path > < / svg > < / a > < h1 id = "typography" > Typography< / h1 >
< p > < em >
< / em > Address variable < code > h1< / code > font-size and margin within < code > section< / code > and < code > article< / code >
* contexts in Firefox 4+, Safari 5, and Chrome.< / p >
< p > < em >
< / em > Address styling not present in IE 8/9, Safari 5, and Chrome.< / p >
< p > < em >
< / em > Address style set to < code > bolder< / code > in Firefox 4+, Safari 5, and Chrome.< / p >
< p > < em >
< / em > Address styling not present in Safari 5 and Chrome.< / p >
< p > < em >
< / em > Address differences between Firefox and other browsers.< / p >
< p > < em >
< / em > Address styling not present in IE 8/9.< / p >
< p > < em >
< / em > Correct font family set oddly in Safari 5 and Chrome.< / p >
< p > < em >
< / em > Improve readability of pre-formatted text in all browsers.< / p >
< p > < em >
< / em > Set consistent quote types.< / p >
< p > < em >
< / em > Address inconsistent and variable font size in all browsers.< / p >
< p > < em >
< / em > Prevent < code > sub< / code > and < code > sup< / code > affecting < code > line-height< / code > in all browsers.< / p >
< p > ==========================================================================< / p >
< / div > < div class = "code" > < pre > < code > h1 {
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}< / code > < / pre > < / div > < / article > < article id = "embedded-content" class = "section" > < div class = "docs" > < a href = "#embedded-content" class = "permalink" > < svg viewBox = "0 0 512 512" height = "32" width = "32" class = "icon" > < path d = "M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z" > < / path > < / svg > < / a > < h1 id = "embedded-content" > Embedded content< / h1 >
< p > < em >
< / em > Remove border when inside < code > a< / code > element in IE 8/9.< / p >
< p > < em >
< / em > Correct overflow displayed oddly in IE 9.< / p >
< p > ==========================================================================< / p >
< / div > < div class = "code" > < pre > < code > img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}< / code > < / pre > < / div > < / article > < article id = "figures" class = "section" > < div class = "docs" > < a href = "#figures" class = "permalink" > < svg viewBox = "0 0 512 512" height = "32" width = "32" class = "icon" > < path d = "M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z" > < / path > < / svg > < / a > < h1 id = "figures" > Figures< / h1 >
< p > < em >
< / em > Address margin not present in IE 8/9 and Safari 5.< / p >
< p > ==========================================================================< / p >
< / div > < div class = "code" > < pre > < code > figure {
margin: 0;
}< / code > < / pre > < / div > < / article > < article id = "forms" class = "section" > < div class = "docs" > < a href = "#forms" class = "permalink" > < svg viewBox = "0 0 512 512" height = "32" width = "32" class = "icon" > < path d = "M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z" > < / path > < / svg > < / a > < h1 id = "forms" > Forms< / h1 >
< p > < em >
< / em > Define consistent border, margin, and padding.< / p >
< p > < em >
< / em > 1. Correct < code > color< / code > not being inherited in IE 8/9.
* 2. Remove padding so people aren' t caught out if they zero out fieldsets.< / p >
< p > < em >
< / em > 1. Correct font family not being inherited in all browsers.
< em > 2. Correct font size not being inherited in all browsers.
< / em > 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.< / p >
< p > < em >
< / em > Address Firefox 4+ setting < code > line-height< / code > on < code > input< / code > using < code > !important< / code > in
* the UA stylesheet.< / p >
< p > < em >
< / em > Address inconsistent < code > text-transform< / code > inheritance for < code > button< / code > and < code > select< / code > .
< em > All other form control elements do not inherit < code > text-transform< / code > values.
< / em > Correct < code > button< / code > style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct < code > select< / code > style inheritance in Firefox 4+ and Opera.< / p >
< p > < em >
< / em > 1. Avoid the WebKit bug in Android 4.0.< em > where (2) destroys native < code > audio< / code >
< / em > and < code > video< / code > controls.
< em > 2. Correct inability to style clickable < code > input< / code > types in iOS.
< / em > 3. Improve usability and consistency of cursor style between image-type
* < code > input< / code > and others.< / p >
< p > < em >
< / em > Re-set default cursor for disabled elements.< / p >
< p > < em >
< / em > 1. Address box sizing set to < code > content-box< / code > in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.< / p >
< p > < em >
< / em > 1. Address < code > appearance< / code > set to < code > searchfield< / code > in Safari 5 and Chrome.
< em > 2. Address < code > box-sizing< / code > set to < code > border-box< / code > in Safari 5 and Chrome
< / em > (include < code > -moz< / code > to future-proof).< / p >
< p > < em >
< / em > Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.< / p >
< p > < em >
< / em > Remove inner padding and border in Firefox 4+.< / p >
< p > < em >
< / em > 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.< / p >
< p > ==========================================================================< / p >
< / div > < div class = "code" > < pre > < code > fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
button[disabled],
html input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}< / code > < / pre > < / div > < / article > < article id = "tables" class = "section" > < div class = "docs" > < a href = "#tables" class = "permalink" > < svg viewBox = "0 0 512 512" height = "32" width = "32" class = "icon" > < path d = "M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z" > < / path > < / svg > < / a > < h1 id = "tables" > Tables< / h1 >
< p > < em >
< / em > Remove most spacing between table cells.< / p >
< / div > < div class = "code" > < pre > < code > table {
border-collapse: collapse;
border-spacing: 0;
}< / code > < / pre > < / div > < / article > < / section > < div class = "bar bottom" > < div hidden class = "settings container" > <!-- Icons from http://iconmonstr.com --> < button title = "Desktop (1280)" data-width = '1280' > < svg viewBox = "0 0 412 386" height = "24" width = "26" class = "icon" > < path d = "m147.6,343.9c-4.5,15.9-26.2,37.6-42.1,42.1h201c-15.3,-4-38.1,-26.8-42.1,-42.1H147.6zM387,0.5H25c-13.8,0-25,11.2-25,25V294c0,13.8 11.2,25 25,25h362c13.8,0 25,-11.2 25,-25V25.5C412,11.7 400.8,0.5 387,0.5zM369.9,238.2H42.1L42.1,42.6 369.9,42.6V238.2z" > < / path > < / svg > < / button > < button title = "Laptop (1024)" data-width = '1024' > < svg viewBox = "0 0 384 312" height = "23" width = "28" class = "icon" > < path d = "m349.2,20.5c0,-11-9,-20-20,-20H53.6c-11,0-20,9-20,20v194H349.2v-194zm-27,167H60.6V27.5H322.2v160zm28,42H32.6L2.6,282.1c-3.5,6.2-3.5,13.8 0.1,19.9 3.6,6.2 10.2,9.9 17.3,9.9H363.1c7.1,0 13.7,-3.8 17.3,-10 3.6,-6.2 3.6,-13.8 0,-20l-30.2,-52.5zm-196.9,54 8,-23.5h60.5l8,23.5h-76.5z" > < / path > < / svg > < / button > < button title = "Tablet (768)" data-width = '768' > < svg viewBox = "0 0 317 412" height = "24" width = "18" class = "icon" > < path d = "M 316.5,380 V 32 c 0,-17.7 -14.3,-32 -32,-32 H 32 C 14.3,0 0,14.3 0,32 v 348 c 0,17.7 14.3,32 32,32 h 252.5 c 17.7,0 32,-14.3 32,-32 z M 40,367 V 45 H 276.5 V 367 H 40 z m 109.8,22.7 c 0,-4.7 3.8,-8.5 8.5,-8.5 4.7,0 8.5,3.8 8.5,8.5 0,4.7 -3.8,8.5 -8.5,8.5 -4.7,0 -8.5,-3.8 -8.5,-8.5 z" > < / path > < / svg > < / button > < button title = "Smart phone (320)" data-width = '320' > < svg viewBox = "0 0 224 412" height = "24" width = "13" class = "icon" > < path d = "M 190.7,0 H 33 C 14.8,0 0,14.8 0,33 v 346 c 0,18.2 14.8,33 33,33 h 157.7 c 18.2,0 33,-14.8 33,-33 V 33 c 0,-18.2 -14.8,-33 -33,-33 z M 94.3,30.2 h 37 c 2.2,0 4,1.8 4,4 0,2.2 -1.8,4 -4,4 h -37 c -2.2,0 -4,-1.8 -4,-4 0,-2.2 1.8,-4 4,-4 z m 18.5,362.8 c -8.8,0 -16,-7.2 -16,-16 0,-8.8 7.2,-16 16,-16 8.8,0 16,7.2 16,16 0,8.8 -7.2,16 -16,16 z M 198.6,343.8 H 25.1 V 68.2 h 173.5 v 275.5 z" > < / path > < / svg > < / button > < button title = "Feature phone (240)" data-width = '240' > < svg viewBox = "0 0 201 412" height = "24" width = "12" class = "icon" > < path d = "M 165.5,0.2 V 45 H 25 c -13.8,0 -25,11.2 -25,25 V 387 c 0,13.8 11.2,25 25,25 h 150.5 c 13.8,0 25,-11.2 25,-25 V 0.2 h -35 z M 65.2,366.5 H 34.2 v -24.5 h 31 v 24.5 z m 0,-44.3 H 34.2 v -24.5 h 31 v 24.5 z m 50.5,44.3 H 84.7 v -24.5 h 31 v 24.5 z m 0,-44.3 H 84.7 v -24.5 h 31 v 24.5 z m 50.5,44.3 h -31 v -24.5 h 31 v 24.5 z m 0,-44.3 h -31 v -24.5 h 31 v 24.5 z m 0,-59.3 h -132 V 95.4 h 132 V 262.9 z" > < / path > < / svg > < / button > < button title = "Auto (100%)" data-width = "auto" class = "auto is-active" > Auto< / button > < / div > < / div > < script > ( f u n c t i o n ( ) { v a r a = [ { t i t l e : " R i b s " , f i l e n a m e : " R i b s " , u r l : " R i b s . h t m l " } , { t i t l e : " R i b s " , f i l e n a m e : " R i b s " , u r l : " R i b s . h t m l # r i b s " } , { t i t l e : " I m p o r t o f n o r m a l i z e , v a r i a b l e s a n d m i x i n s " , f i l e n a m e : " R i b s " , u r l : " R i b s . h t m l # i m p o r t - o f - n o r m a l i z e - v a r i a b l e s - a n d - m i x i n s " } , { t i t l e : " G e n e r a l b o d y s t y l e " , f i l e n a m e : " R i b s " , u r l : " R i b s . h t m l # g e n e r a l - b o d y - s t y l e " } , { t i t l e : " G e n e r a l h o r i z o n t a l r u l e s t y l e " , f i l e n a m e : " R i b s " , u r l : " R i b s . h t m l # g e n e r a l - h o r i z o n t a l - r u l e - s t y l e " } , { t i t l e : " I m p o r t o f r i b s f u n c t i o n a l i t y " , f i l e n a m e : " R i b s " , u r l : " R i b s . h t m l # i m p o r t - o f - r i b s - f u n c t i o n a l i t y " } , { t i t l e : " E x a m p l e M e d i a Q u e r i e s " , f i l e n a m e : " R i b s " , u r l : " R i b s . h t m l # e x a m p l e - m e d i a - q u e r i e s " } , { t i t l e : " f o r m s " , f i l e n a m e : " f o r m s " , u r l : " f o r m s . h t m l " } , { t i t l e : " B u t t o n s " , f i l e n a m e : " f o r m s " , u r l : " f o r m s . h t m l # b u t t o n s " } , { t i t l e : " F o r m s " , f i l e n a m e : " f o r m s " , u r l : " f o r m s . h t m l # f o r m s " } , { t i t l e : " g r i d " , f i l e n a m e : " g r i d " , u r l : " g r i d . h t m l " } , { t i t l e : " G r i d S y s t e m " , f i l e n a m e : " g r i d " , u r l : " g r i d . h t m l # g r i d - s y s t e m " } , { t i t l e : " D e s k t o p G r i d " , f i l e n a m e : " g r i d " , u r l : " g r i d . h t m l # d e s k t o p - g r i d " } , { t i t l e : " T a b l e t G r i d " , f i l e n a m e : " g r i d " , u r l : " g r i d . h t m l # t a b l e t - g r i d " } , { t i t l e : " M o b i l e G r i d " , f i l e n a m e : " g r i d " , u r l : " g r i d . h t m l # m o b i l e - g r i d " } , { t i t l e : " C l e a r i n g " , f i l e n a m e : " g r i d " , u r l : " g r i d . h t m l # c l e a r i n g " } , { t i t l e : " i m a g e s " , f i l e n a m e : " i m a g e s " , u r l : " i m a g e s . h t m l " } , { t i t l e : " I m a g e s " , f i l e n a m e : " i m a g e s " , u r l : " i m a g e s . h t m l # i m a g e s " } , { t i t l e : " l i n k s " , f i l e n a m e : " l i n k s " , u r l : " l i n k s . h t m l " } , { t i t l e : " L i n k s " , f i l e n a m e : " l i n k s " , u r l : " l i n k s . h t m l # l i n k s " } , { t i t l e : " l i s t s " , f i l e n a m e : " l i s t s " , u r l : " l i s t s . h t m l " } , { t i t l e : " L i s t s " , f i l e n a m e : " l i s t s " , u r l : " l i s t s . h t m l # l i s t s " } , { t i t l e : " m i x i n s " , f i l e n a m e : " m i x i n s " , u r l : " m i x i n s . h t m l " } , {
