2013-10-10 13:35:26 -04:00
<!DOCTYPE html> < html > < head > < title > variables | 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
< / div > < div class = "code" > < pre > < code > $gutter: 20px !default;
$column-count: 16 !default;
$desktop-container-width: 960px !default;
$tablet-container-width: 768px !default;
$mobile-container-width: 90% !default;
$mobile-column-width: 100% !default;
$base_font_size: 14px !default;< / code > < / pre > < / div > < / article > < article id = "breakpoint-max-widths-you-probably-dont-need-to-change-these" class = "section" > < div class = "docs" > < a href = "#breakpoint-max-widths-you-probably-dont-need-to-change-these" 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 = "breakpoint-max-widths-you-probably-dont-need-to-change-these" > Breakpoint max widths - you probably dont need to change these< / h1 >
< / div > < div class = "code" > < pre > < code > $tablet-max-breakpoint: $desktop-container-width - 1 !default;
$mobile-max-breakpoint: $tablet-container-width - 1 !default;< / code > < / pre > < / div > < / article > < article id = "form-variables" class = "section" > < div class = "docs" > < a href = "#form-variables" 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 = "form-variables" > Form Variables< / h1 >
2013-10-10 13:35:26 -04:00
< h2 id = "button" > button< / h2 >
< h2 id = "button-hover" > button hover< / h2 >
< h2 id = "button-active" > Button active< / h2 >
< h2 id = "form-input" > Form input< / h2 >
< h2 id = "form-checkbox" > Form checkbox< / h2 >
< h2 id = "form-input-focus" > Form input focus< / h2 >
< h2 id = "select" > select< / h2 >
< h2 id = "fieldsetlabellegend" > fieldset/label/legend< / h2 >
< h2 id = "textarea" > Textarea< / h2 >
2013-10-15 14:19:50 -04:00
< / div > < div class = "code" > < pre > < code > $form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$form_button_border_radius: 3px !default;
$form_button_border_topleft: 1px solid #ccc !default;
$form_button_border_rightbottom: 1px solid #aaa !default;
$form_button_text_colour: #444 !default;
$form_button_text_shadow: 0 1px rgba(255, 255, 255, .75) !default;
$form_button_gradient_start: rgba(255, 255, 255, .2) !default;
$form_button_gradient_end: rgba(0, 0, 0, .2) !default;
$form_button_font_size: 11px !default;
$form_button_padding: 8px 10px !default;
$form_button_line_height: normal !default;
$form_button_hover_border_topleft: 1px solid #aaa !default;
$form_button_hover_border_rightbottom: 1px solid #888 !default;
$form_button_hover_gradient_start: rgba(255, 255, 255, .3) !default;
$form_button_hover_gradient_end: rgba(0, 0, 0, .3) !default;
$form_button_hover_text_colour: #222 !default;
$form_button_active_border: 1px solid #666 !default;
$form_button_active_gradient_start: rgba(255, 255, 255, .2) !default;
$form_button_active_gradient_end: rgba(0, 0, 0, .2) !default;
$form_input_border: 1px solid #ccc !default;
$form_input_text_colour: #777 !default;
$form_input_background: #fff !default;
$form_input_padding: 6px 4px !default;
$form_input_width: 210px !default;
$form_input_max_width: 100% !default;
$form_input_select_width: 220px !default;
$form_input_margin: 0 0 20px 0 !default;
$form_input_font_size: 13px !default;
$form_input_border_radius: 2px !default;
$form_input_checkbox_display: inline !default;
$form_input_focus_border: 1px solid #aaa !default;
$form_input_focus_text_colour: #444 !default;
$form_input_focus_outline: none !default;
$form_input_focus_box_shadow_x: 0 !default;
$form_input_focus_box_shadow_y: 0 !default;
$form_input_focus_box_shadow_blur: 3px !default;
$form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2) !default;
$form_input_select_padding: 10px !default;
$form_label_legend_colour: #444 !default;
$form_label_legend_font_weight: normal !default;
$form_fieldset_margin: 0 0 20px 0 !default;
$legend_font_weight: bold !default;
$legend_font_size: $form_input_font_size !default;
$form_textarea_min_height: 60px !default;< / 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 >
< / div > < div class = "code" > < pre > < code > $link_colour: #333 !default;
$link_decoration: underline !default;
$link_outline: 0 !default;
$link_hover_colour: #000 !default;
$link_hover_decoration: none !default;< / code > < / pre > < / div > < / article > < article id = "headings" class = "section" > < div class = "docs" > < a href = "#headings" 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 = "headings" > Headings< / h1 >
< / div > < div class = "code" > < pre > < code > $heading_font: "Georgia", "Times New Roman", serif !default;
$heading_font_weight: normal !default;
$heading_colour: #181818 !default;
$heading1_font_size: 46px !default;
$heading1_line_height: $heading1_font_size * 1.5 !default;
$heading1_margin: 0 0 14px 0 !default;
$heading2_font_size: 35px !default;
$heading2_line_height: $heading2_font_size * 1.5 !default;
$heading2_margin: 0 0 10px 0 !default;
$heading3_font_size: 28px !default;
$heading3_line_height: $heading3_font_size * 1.5 !default;
$heading3_margin: 0 0 8px 0 !default;
$heading4_font_size: 21px !default;
$heading4_line_height: $heading4_font_size * 1.5 !default;
$heading4_margin: 0 0 4px 0 !default;
$heading5_font_size: 17px !default;
$heading5_line_height: $heading5_font_size * 1.5 !default;
$heading6_font_size: 14px !default;
$heading6_line_height: $heading6_font_size * 1.5 !default;< / code > < / pre > < / div > < / article > < article id = "subheading" class = "section" > < div class = "docs" > < a href = "#subheading" 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 = "subheading" > Subheading< / h1 >
< / div > < div class = "code" > < pre > < code > $subheader_colour: #777 !default;< / code > < / pre > < / div > < / article > < article id = "paragraphs" class = "section" > < div class = "docs" > < a href = "#paragraphs" 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 = "paragraphs" > Paragraphs< / h1 >
< / div > < div class = "code" > < pre > < code > $paragraph_margin: 0 0 20px 0 !default;
$paragraph_image_margin: 0 !default;
$paragraph_line_height: $base_font_size * 1.5 !default;
$paragraph_lead_font_size: 21px !default;
$paragraph_lead_line_height: $paragraph_lead_font_size * 1.5 !default;
$paragraph_lead_colour: #777 !default;< / code > < / pre > < / div > < / article > < article id = "general-text" class = "section" > < div class = "docs" > < a href = "#general-text" 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 = "general-text" > General Text< / h1 >
< / div > < div class = "code" > < pre > < code > $em_font_style: italic !default;
$small_font_size: 80% !default;
$strong_colour: #333 !default;< / code > < / pre > < / div > < / article > < article id = "blockquotes" class = "section" > < div class = "docs" > < a href = "#blockquotes" 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 = "blockquotes" > Blockquotes< / h1 >
< / div > < div class = "code" > < pre > < code > $blockquote_colour: #777 !default;
$blockquote_border_left: 1px solid #ddd !default;
$blockquote_cite_colour: #555 !default;
$blockquote_cite_link_colour: #555 !default;
$blockquote_cite_font_size: 12px !default;
$blockquote_margin: 0 0 20px !default;
$blockquote_padding: 9px 20px 0 19px !default;
$blockquote_font_size: 17px !default;
$blockquote_line_height: 24px !default;
$blockquote_font_style: italic !default;< / code > < / pre > < / div > < / article > < article id = "horizontal-rules" class = "section" > < div class = "docs" > < a href = "#horizontal-rules" 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 = "horizontal-rules" > Horizontal rules< / h1 >
< / div > < div class = "code" > < pre > < code > $hr_border: solid #ddd !default;
$hr_border_width: 1px 0 0 !default;
$hr_margin: 10px 0 30px !default;< / code > < / pre > < / div > < / article > < article id = "main-font" class = "section" > < div class = "docs" > < a href = "#main-font" 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 = "main-font" > Main font< / h1 >
< / div > < div class = "code" > < pre > < code > $body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !default;< / code > < / pre > < / div > < / article > < article id = "lists" class = "section" > < div class = "docs" > < a href = "#lists" 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 = "lists" > Lists< / h1 >
< / div > < div class = "code" > < pre > < code > $list_margin: 0 0 20px 0 !default;
$list_large_line_height: 21px !default;
$ul_list_style: none outside !default;
$ol_list_style: decimal !default;
$list_styled_margin: 0 0 0 10px !default; // ul, ol with disc, square etc.
$list_styled_position: outside !default; // List item bullet position
$nested_list_margin: 4px 0 5px 30px !default;
$nested_list_font_size: 90% !default;
$list_item_line_height: 18px !default;
$list_item_margin: 0 0 12px 0 !default;
$list_item_paragraph_line_height: 21px !default;
$fallback_hex_gradient_bg: #CCC !default;< / 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 >
< / div > < div class = "code" > < pre > < code > $table_background: #FFF !default;
$table_margin: 10px 0 !default;
$table_td_th_padding: 8px !default;
$table_td_th_line_height: 21px !default;
$table_border_colour: #CCC !default;
$table_border_radius: 3px !default;
$table_alt_colour: #EFEFEF !default;
$table_hover_colour: #999 !default;
$table_condensed_padding: 4px 5px !default;< / 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
