158 lines
57 KiB
HTML
158 lines
57 KiB
HTML
|
<!DOCTYPE html><html><head><title>variables | Ribs
|
||
|
|
</title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.container{max-width:1300px;margin:0 auto;padding:0 20px}.section{position:relative;margin-bottom:20px}.docs{position:relative;z-index:2;width:68%;min-height:200px;background-color:hsl(207,0%,100%);background-clip:padding-box;border:1px solid hsla(207,5%,5%,.1);border-radius:5px;box-shadow:0 0 3px hsla(207,5%,5%,.1)}.code{position:absolute;top:5px;bottom:5px;right:0;z-index:1;width:33%;padding:10px 10px 10px 20px;border-radius:0 5px 5px 0;border:1px solid hsla(207,20%,10%,.1);background-color:hsla(207,20%,95%,.9);background-clip:padding-box;opacity:.5;-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s}.code:hover{opacity:1}.preview{background:hsl(207,0%,100%);border-top:1px solid hsl(207,30%,95%);position:relative;z-index:1}.preview-code+.preview{margin-top:0;border-top:0}.preview iframe{display:block;width:100%;height:100%;overflow:hidden}.preview-code{position:relative;z-index:2;display:block;width:100%;color:hsl(207,9%,37%);max-height:200px;padding:10px 20px;overflow-y:auto;background:hsl(207,30%,95%);border:1px solid hsl(207,30%,85%);border-left:0;border-right;box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1);line-height:1.1!important;resize:none}.preview-code:focus{outline:0;background:hsl(207,30%,97%);box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1),0 0 5px hsla(207,75%,75%,.9)}.preview-code:last-child{border-bottom:0;border-radius:0 0 5px 5px}.resizeable{padding:15px;overflow:auto;background:hsl(207,0%,100%);box-shadow:0 0 2px hsla(207,10%,20%,.2);resize:both}.preview-code,pre{white-space:pre-wrap;word-wrap:break-word;overflow-y:auto}.code pre{height:100%;margin-top:0}.bar{position:fixed;left:0;right:0;z-index:1010;min-height:40px;line-height:40px;background-image:-webkit-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-moz-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-o-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92))}.bar.top{top:0;box-shadow:0 1px 2px hsla(207,5%,0%,.2)}.bar.bottom{bottom:0;box-shadow:0 -1px 2px hsla(207,5%,0%,.2)}.bar ul{margin:0!important}.bar li{display:block;list-style:none}.bar .icon path{fill:hsla(27,10%,75%,.75)}.docs .icon path{fill:hsla(207,10%,75%,.5)}.docs .permalink:hover .icon path{fill:hsl(207,10%,75%)}.bar button{color:hsla(27,10%,75%,.75)}.bar button:hover .icon path,.bar button.is-active .icon path{fill:hsl(27,10%,85%)}.bar button:hover,.bar button.is-active{color:hsl(27,10%,85%)}.bar .icon{vertical-align:middle;display:inline-block}.bar,.bar a,.bar a:visited{color:hsl(27,10%,85%);text-shadow:1px 1px 0 hsla(27,5%,0%,.5)}.bar a:hover,.bar a.is-active{color:hsl(27,10%,95%);text-shadow:1px 1px 0 hsla(27,5%,0%,1);text-decoration:none}.brand{float:left;margin-right:20px;font-weight:700;font-size:16px;text-decoration:none}.brand,a.brand,a.brand:visited{color:hsl(27,5%,5%);text-shadow:1px 1px 0 hsla(27,5%,100%,.2)}.brand:hover,a.brand:hover{color:hsl(27,5%,0%);text-shadow:1px 1px 0 hsla(27,5%,100%,.3);text-decoration:none}.menu{font-size:12px}.menu>li{float:left;position:relative}.menu a{display:block;margin-right:15px}.dropdown-toggle{position:relative;padding-right:15px}.dropdown-toggle:after{display:block;position:absolute;right:0;top:18px;content:'';border:4px solid;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent}.nav-results,.dropdown{position:absolute;z-index:1020;top:32px;left:-16px;width:175px;max-height:500px;padding:10px 0;overflow-y:auto;word-wrap:break-word;font-size:11px;line-height:20px;background-color:hsla(207,10%,25%,.97);border:1px solid hsla(207,5%,70%,.3);border-radius:3px;box-shadow:0 0 3px hsla(207,5%,0%,.2)}.toc-list{width:200px}.nav-results{right:0;width:200px;left:auto;padding:5px 0}.nav-results-filename{display:block;font
|
||
|
|
</div><div class="code"><pre><code>$gutter: 20px;
|
||
|
|
$column-count: 16;
|
||
|
|
$desktop-container-width: 960px;
|
||
|
|
$tablet-container-width: 768px;
|
||
|
|
$mobile-container-width: 90%;
|
||
|
|
$mobile-column-width: 100%;
|
||
|
|
$base_font_size: 14px;</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;
|
||
|
|
$mobile-max-breakpoint: $tablet-container-width - 1;</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>
|
||
|
|
<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>
|
||
|
|
</div><div class="code"><pre><code>$form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
|
|
|
||
|
|
$form_button_border_radius: 3px;
|
||
|
|
$form_button_border_topleft: 1px solid #ccc;
|
||
|
|
$form_button_border_rightbottom: 1px solid #aaa;
|
||
|
|
$form_button_text_colour: #444;
|
||
|
|
$form_button_text_shadow: 0 1px rgba(255, 255, 255, .75);
|
||
|
|
$form_button_gradient_start: rgba(255, 255, 255, .2);
|
||
|
|
$form_button_gradient_end: rgba(0, 0, 0, .2);
|
||
|
|
$form_button_font_size: 11px;
|
||
|
|
$form_button_padding: 8px 10px;
|
||
|
|
$form_button_line_height: normal;
|
||
|
|
|
||
|
|
$form_button_hover_border_topleft: 1px solid #aaa;
|
||
|
|
$form_button_hover_border_rightbottom: 1px solid #888;
|
||
|
|
$form_button_hover_gradient_start: rgba(255, 255, 255, .3);
|
||
|
|
$form_button_hover_gradient_end: rgba(0, 0, 0, .3);
|
||
|
|
$form_button_hover_text_colour: #222;
|
||
|
|
|
||
|
|
$form_button_active_border: 1px solid #666;
|
||
|
|
$form_button_active_gradient_start: rgba(255, 255, 255, .2);
|
||
|
|
$form_button_active_gradient_end: rgba(0, 0, 0, .2);
|
||
|
|
|
||
|
|
$form_input_border: 1px solid #ccc;
|
||
|
|
$form_input_text_colour: #777;
|
||
|
|
$form_input_background: #fff;
|
||
|
|
$form_input_padding: 6px 4px;
|
||
|
|
$form_input_width: 210px;
|
||
|
|
$form_input_max_width: 100%;
|
||
|
|
$form_input_select_width: 220px;
|
||
|
|
$form_input_margin: 0 0 20px 0;
|
||
|
|
$form_input_font_size: 13px;
|
||
|
|
$form_input_border_radius: 2px;
|
||
|
|
|
||
|
|
$form_input_checkbox_display: inline;
|
||
|
|
|
||
|
|
$form_input_focus_border: 1px solid #aaa;
|
||
|
|
$form_input_focus_text_colour: #444;
|
||
|
|
$form_input_focus_outline: none;
|
||
|
|
$form_input_focus_box_shadow_x: 0;
|
||
|
|
$form_input_focus_box_shadow_y: 0;
|
||
|
|
$form_input_focus_box_shadow_blur: 3px;
|
||
|
|
$form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2);
|
||
|
|
|
||
|
|
$form_input_select_padding: 10px;
|
||
|
|
|
||
|
|
$form_label_legend_colour: #444;
|
||
|
|
$form_label_legend_font_weight: normal;
|
||
|
|
$form_fieldset_margin: 0 0 20px 0;
|
||
|
|
|
||
|
|
$legend_font_weight: bold;
|
||
|
|
$legend_font_size: $form_input_font_size;
|
||
|
|
|
||
|
|
$form_textarea_min_height: 60px;</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;
|
||
|
|
$link_decoration: underline;
|
||
|
|
$link_outline: 0;
|
||
|
|
$link_hover_colour: #000;
|
||
|
|
$link_hover_decoration: none;</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;
|
||
|
|
$heading_font_weight: normal;
|
||
|
|
$heading_colour: #181818;
|
||
|
|
|
||
|
|
$heading1_font_size: 46px;
|
||
|
|
$heading1_line_height: $heading1_font_size * 1.5;
|
||
|
|
$heading1_margin: 0 0 14px 0;
|
||
|
|
|
||
|
|
$heading2_font_size: 35px;
|
||
|
|
$heading2_line_height: $heading2_font_size * 1.5;
|
||
|
|
$heading2_margin: 0 0 10px 0;
|
||
|
|
|
||
|
|
$heading3_font_size: 28px;
|
||
|
|
$heading3_line_height: $heading3_font_size * 1.5;
|
||
|
|
$heading3_margin: 0 0 8px 0;
|
||
|
|
|
||
|
|
$heading4_font_size: 21px;
|
||
|
|
$heading4_line_height: $heading4_font_size * 1.5;
|
||
|
|
$heading4_margin: 0 0 4px 0;
|
||
|
|
|
||
|
|
$heading5_font_size: 17px;
|
||
|
|
$heading5_line_height: $heading5_font_size * 1.5;
|
||
|
|
|
||
|
|
$heading6_font_size: 14px;
|
||
|
|
$heading6_line_height: $heading6_font_size * 1.5;</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;</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;
|
||
|
|
$paragraph_image_margin: 0;
|
||
|
|
$paragraph_line_height: $base_font_size * 1.5;
|
||
|
|
|
||
|
|
$paragraph_lead_font_size: 21px;
|
||
|
|
$paragraph_lead_line_height: $paragraph_lead_font_size * 1.5;
|
||
|
|
$paragraph_lead_colour: #777;</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;
|
||
|
|
|
||
|
|
$small_font_size: 80%;
|
||
|
|
|
||
|
|
$strong_colour: #333;</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;
|
||
|
|
$blockquote_border_left: 1px solid #ddd;
|
||
|
|
$blockquote_cite_colour: #555;
|
||
|
|
$blockquote_cite_link_colour: #555;
|
||
|
|
$blockquote_cite_font_size: 12px;
|
||
|
|
$blockquote_margin: 0 0 20px;
|
||
|
|
$blockquote_padding: 9px 20px 0 19px;
|
||
|
|
$blockquote_font_size: 17px;
|
||
|
|
$blockquote_line_height: 24px;
|
||
|
|
$blockquote_font_style: italic;</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;
|
||
|
|
$hr_border_width: 1px 0 0;
|
||
|
|
$hr_margin: 10px 0 30px;</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;</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;
|
||
|
|
$list_large_line_height: 21px;
|
||
|
|
|
||
|
|
$ul_list_style: none outside;
|
||
|
|
$ol_list_style: decimal;
|
||
|
|
|
||
|
|
$list_styled_margin: 0 0 0 10px; // ul, ol with disc, square etc.
|
||
|
|
$list_styled_position: outside; // List item bullet position
|
||
|
|
|
||
|
|
$nested_list_margin: 4px 0 5px 30px;
|
||
|
|
$nested_list_font_size: 90%;
|
||
|
|
|
||
|
|
$list_item_line_height: 18px;
|
||
|
|
$list_item_margin: 0 0 12px 0;
|
||
|
|
$list_item_paragraph_line_height: 21px;
|
||
|
|
|
||
|
|
$fallback_hex_gradient_bg: #CCC;</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;
|
||
|
|
$table_margin: 10px 0;
|
||
|
|
$table_td_th_padding: 8px;
|
||
|
|
$table_td_th_line_height: 21px;
|
||
|
|
$table_border_colour: #CCC;
|
||
|
|
$table_border_radius: 3px;
|
||
|
|
$table_alt_colour: #EFEFEF;
|
||
|
|
$table_hover_colour: #999;
|
||
|
|
$table_condensed_padding: 4px 5px;</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>(function(){var a=[{title:"Ribs",filename:"Ribs",url:"Ribs.html"},{title:"Ribs",filename:"Ribs",url:"Ribs.html#ribs"},{title:"Import of normalize, variables and mixins",filename:"Ribs",url:"Ribs.html#import-of-normalize-variables-and-mixins"},{title:"General body style",filename:"Ribs",url:"Ribs.html#general-body-style"},{title:"General horizontal rule style",filename:"Ribs",url:"Ribs.html#general-horizontal-rule-style"},{title:"Import of ribs functionality",filename:"Ribs",url:"Ribs.html#import-of-ribs-functionality"},{title:"Example Media Queries",filename:"Ribs",url:"Ribs.html#example-media-queries"},{title:"forms",filename:"forms",url:"forms.html"},{title:"Buttons",filename:"forms",url:"forms.html#buttons"},{title:"Forms",filename:"forms",url:"forms.html#forms"},{title:"grid",filename:"grid",url:"grid.html"},{title:"Grid System",filename:"grid",url:"grid.html#grid-system"},{title:"Desktop Grid",filename:"grid",url:"grid.html#desktop-grid"},{title:"Tablet Grid",filename:"grid",url:"grid.html#tablet-grid"},{title:"Mobile Grid",filename:"grid",url:"grid.html#mobile-grid"},{title:"Clearing",filename:"grid",url:"grid.html#clearing"},{title:"images",filename:"images",url:"images.html"},{title:"Images",filename:"images",url:"images.html#images"},{title:"links",filename:"links",url:"links.html"},{title:"Links",filename:"links",url:"links.html#links"},{title:"lists",filename:"lists",url:"lists.html"},{title:"Lists",filename:"lists",url:"lists.html#lists"},{title:"mixins",filen
|