fixing some more docs, adding icons, adding pages

11 years ago · f3aea0e3f1
18 changed files with 513 additions and 278 deletions
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@ -1248,166 +1248,166 @@ select {
  -webkit-font-smoothing: antialiased;
 }

+.icon-and-up:before {
+  content: '\e809';
+}
+
 .icon-back:before {
  content: '\e80a';
 }

 .icon-bars:before {
-  content: '\e817';
+  content: '\e80e';
 }

 .icon-caret:before {
-  content: '\e818';
+  content: '\e80f';
 }

 .icon-check:before {
-  content: '\e819';
+  content: '\e810';
 }

 .icon-close:before {
-  content: '\e81a';
+  content: '\e811';
 }

 .icon-code:before {
-  content: '\e81b';
+  content: '\e812';
 }

 .icon-compose:before {
-  content: '\e81c';
+  content: '\e813';
 }

 .icon-down-nav:before {
-  content: '\e81d';
+  content: '\e814';
 }

 .icon-down:before {
-  content: '\e80b';
+  content: '\e820';
 }

 .icon-download:before {
-  content: '\e81e';
+  content: '\e815';
 }

 .icon-edit:before {
-  content: '\e81f';
+  content: '\e829';
 }

 .icon-forward:before {
-  content: '\e820';
+  content: '\e82a';
 }

 .icon-gear:before {
-  content: '\e80c';
+  content: '\e821';
 }

 .icon-home:before {
-  content: '\e821';
+  content: '\e82b';
 }

 .icon-info:before {
-  content: '\e822';
+  content: '\e82c';
 }

 .icon-left-nav:before {
-  content: '\e823';
+  content: '\e82d';
 }

 .icon-left:before {
-  content: '\e80d';
+  content: '\e822';
 }

 .icon-list:before {
-  content: '\e80e';
+  content: '\e823';
 }

 .icon-more-vertical:before {
-  content: '\e824';
+  content: '\e82e';
 }

 .icon-more:before {
-  content: '\e825';
+  content: '\e82f';
 }

 .icon-pages:before {
-  content: '\e80f';
+  content: '\e824';
 }

 .icon-pause:before {
-  content: '\e826';
+  content: '\e830';
 }

 .icon-person:before {
-  content: '\e827';
+  content: '\e832';
 }

 .icon-play:before {
-  content: '\e828';
+  content: '\e816';
 }

 .icon-plus:before {
-  content: '\e829';
+  content: '\e817';
 }

 .icon-refresh:before {
-  content: '\e810';
+  content: '\e825';
 }

 .icon-right-nav:before {
-  content: '\e82a';
+  content: '\e818';
 }

 .icon-right:before {
-  content: '\e811';
+  content: '\e826';
 }

 .icon-search:before {
-  content: '\e82b';
+  content: '\e819';
 }

 .icon-share:before {
-  content: '\e82c';
+  content: '\e81a';
 }

 .icon-sound2:before {
-  content: '\e813';
+  content: '\e828';
 }

 .icon-sound3:before {
-  content: '\e814';
+  content: '\e80b';
 }

 .icon-sound4:before {
-  content: '\e815';
+  content: '\e80c';
 }

 .icon-sound:before {
-  content: '\e812';
+  content: '\e827';
 }

 .icon-star-filled:before {
-  content: '\e82e';
+  content: '\e81b';
 }

 .icon-star:before {
-  content: '\e82d';
+  content: '\e81c';
 }

 .icon-stop:before {
-  content: '\e82f';
+  content: '\e81d';
 }

 .icon-trash:before {
-  content: '\e830';
+  content: '\e81e';
 }

 .icon-up-nav:before {
-  content: '\e832';
+  content: '\e81f';
 }

 .icon-up:before {
-  content: '\e816';
-}
-
-.icon-user:before {
-  content: '\e831';
+  content: '\e80d';
 }
--- a/dist/ratchicons/ratchicons.eot
+++ b/dist/ratchicons/ratchicons.eot
--- a/dist/ratchicons/ratchicons.svg
+++ b/dist/ratchicons/ratchicons.svg
@ -7,56 +7,55 @@
 <font-face font-family="ratchicons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 <missing-glyph horiz-adv-x="1000" />
 <glyph glyph-name="and-caret" unicode="&#xe800;" d="m313 225l375 0v376" horiz-adv-x="1000" />
-<glyph glyph-name="user" unicode="&#xe831;" d="m736 128q204-72 204-122l0-106l-940 0l0 106q0 50 204 122q94 34 128 69t34 95q0 22-22 49t-32 73q-2 12-9 18t-14 8t-14 17t-9 43q0 16 5 26t9 12l4 4q-8 50-12 88q-4 54 41 112t157 58t158-58t40-112l-12-88q18-8 18-42q-2-28-9-43t-14-17t-14-8t-9-18q-8-48-31-74t-23-48q0-60 35-95t127-69z" horiz-adv-x="940" />
+<glyph glyph-name="up-nav" unicode="&#xe81f;" d="m65 146l81-83l354 372l353-372l81 83l-434 456l-435-456z" horiz-adv-x="1000" />
 <glyph glyph-name="and-download" unicode="&#xe802;" d="m875 38h-750v62h750v-62z m-312 375v250h-125v-250h-125l187-250l188 250h-125z" horiz-adv-x="1000" />
 <glyph glyph-name="and-left" unicode="&#xe803;" d="m306 349l325 373l67-59l-273-314l273-315l-67-59l-325 373l0 1z" horiz-adv-x="1000" />
 <glyph glyph-name="and-more-vertical" unicode="&#xe804;" d="m406-25v188h188v-188h-188z m0 563h188v188h-188v-188z m188-281v188h-188v-188h188z" horiz-adv-x="1000" />
 <glyph glyph-name="and-more" unicode="&#xe805;" d="m125 444h188v-187h-188v187z m563 0v-187h187v187h-187z m-281-187h187v187h-187v-187z" horiz-adv-x="1000" />
 <glyph glyph-name="and-right" unicode="&#xe806;" d="m698 348l-325-373l-67 59l274 315l-274 314l68 59l324-373l0-1z" horiz-adv-x="1000" />
+<glyph glyph-name="and-search" unicode="&#xe807;" d="m928 51l-167 167c-17 17-47 15-66-4l-3-3l-69 69c42 54 67 121 67 194c0 173-140 313-314 313s-313-140-313-313s140-314 313-314c71 0 137 24 190 64l69-70c-18-19-19-48-2-65l166-166c17-17 47-16 66 4l59 58c19 19 21 49 4 66z m-801 423c0 137 112 249 249 249s249-112 249-249s-111-249-249-249s-249 111-249 249z" horiz-adv-x="1000" />
 <glyph glyph-name="and-share" unicode="&#xe808;" d="m728 215c-33 0-63-14-84-36l-263 153c1 6 2 12 2 18c0 6-1 12-2 18l263 152c21-23 51-37 84-37c62 0 113 51 113 113s-51 114-113 114s-114-51-114-114c0-7 1-14 2-21l-261-150c-21 23-51 38-85 38c-63 0-114-50-114-113s51-113 114-113c33 0 64 15 85 38l261-151c-1-7-2-14-2-22c0-62 51-113 114-113s113 51 113 113s-51 113-113 113z" horiz-adv-x="1000" />
 <glyph glyph-name="and-up" unicode="&#xe809;" d="m500 548l374-325l-59-67l-315 273l-314-273l-59 67l373 325l0 0z" horiz-adv-x="1000" />
 <glyph glyph-name="back" unicode="&#xe80a;" d="m500 174l-313 176l313 176m312-352l-312 176l312 176" horiz-adv-x="1000" />
-<glyph glyph-name="down" unicode="&#xe80b;" d="m941 479l-124 127l-317-315l-318 315l-124-127l442-441l441 441z" horiz-adv-x="1000" />
-<glyph glyph-name="gear" unicode="&#xe80c;" d="m820 274l118 40l0 72l-118 40c-8 34-22 67-40 97l55 111l-51 51l-111-55c-30 18-62 32-97 40l-39 118l-73 0l-40-118c-34-8-67-22-97-40l-111 55l-51-51l55-111c-18-30-32-62-40-97l-117-39l0-73l117-40c9-34 22-67 41-96l-56-111l52-52l111 56c29-19 62-32 96-40l40-119l73 0l39 119c35 8 67 21 97 40l111-56l51 52l-55 111c18 29 32 62 40 96z m-320-174c-139 0-251 112-251 251s112 250 251 250s250-112 250-250s-112-251-250-251z" horiz-adv-x="1000" />
-<glyph glyph-name="left" unicode="&#xe80d;" d="m628-91l127 123l-314 318l314 318l-127 124l-441-442l441-441z" horiz-adv-x="1000" />
-<glyph glyph-name="list" unicode="&#xe80e;" d="m1000 632h-750v-62l750-1v63z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z m-250 406l125 1v125l-125 0v-126z m0-249h125v125h-125v-125z m0-250h125v125h-125v-125z" horiz-adv-x="1000" />
-<glyph glyph-name="pages" unicode="&#xe80f;" d="m63 601v-689h687l0 688l-687 1z m625-63v-563h-563v563h563z m-500 250v-125h62v62h625v-625l-62 0v-62h125v750h-750z" horiz-adv-x="1000" />
-<glyph glyph-name="refresh" unicode="&#xe810;" d="m813 288c-28-145-161-250-313-250c-172 0-312 139-312 312c0 173 141 312 312 313v-98l221 129l-221 128v-95c0-2 0-2 0-2c-206 0-375-167-375-375s169-375 375-375c187 0 347 133 375 313h-62z" horiz-adv-x="1000" />
-<glyph glyph-name="right" unicode="&#xe811;" d="m372 792l-127-124l314-318l-314-318l127-123l441 441l-441 442z" horiz-adv-x="1000" />
-<glyph glyph-name="sound" unicode="&#xe812;" d="m825-22c-2 0-3 0-5 0l-16 7c0 0 0 0 0 1c-5 1-8 3-10 6c-1 3-1 7 1 12c1 1 22 40 43 101c20 58 44 147 44 244c0 98-24 186-44 243c-21 61-42 100-43 102c-4 11-2 15 8 21l17 8c2 1 5 2 7 2c7 0 12-5 17-16c1-2 2-4 4-8c10-19 32-63 52-125c25-78 37-156 37-232c0-94-24-182-44-240c-22-63-44-104-45-104l-1-2c-5-11-9-20-22-20c0 0 0 0 0 0z m-574 248c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="sound2" unicode="&#xe813;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="sound3" unicode="&#xe814;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m390 3c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="sound4" unicode="&#xe815;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z" horiz-adv-x="1000" />
-<glyph glyph-name="up" unicode="&#xe816;" d="m58 222l124-126l318 314l317-314l124 126l-441 441l-442-441z" horiz-adv-x="1000" />
-<glyph glyph-name="bars" unicode="&#xe817;" d="m875 632h-750v-62l750-1l0 63l0 0z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z" horiz-adv-x="1000" />
-<glyph glyph-name="caret" unicode="&#xe818;" d="m438 475h-125l187-250l188 250h-125" horiz-adv-x="1000" />
-<glyph glyph-name="check" unicode="&#xe819;" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />
+<glyph glyph-name="down" unicode="&#xe820;" d="m941 479l-124 127l-317-315l-318 315l-124-127l442-441l441 441z" horiz-adv-x="1000" />
+<glyph glyph-name="gear" unicode="&#xe821;" d="m820 274l118 40l0 72l-118 40c-8 34-22 67-40 97l55 111l-51 51l-111-55c-30 18-62 32-97 40l-39 118l-73 0l-40-118c-34-8-67-22-97-40l-111 55l-51-51l55-111c-18-30-32-62-40-97l-117-39l0-73l117-40c9-34 22-67 41-96l-56-111l52-52l111 56c29-19 62-32 96-40l40-119l73 0l39 119c35 8 67 21 97 40l111-56l51 52l-55 111c18 29 32 62 40 96z m-320-174c-139 0-251 112-251 251s112 250 251 250s250-112 250-250s-112-251-250-251z" horiz-adv-x="1000" />
+<glyph glyph-name="left" unicode="&#xe822;" d="m628-91l127 123l-314 318l314 318l-127 124l-441-442l441-441z" horiz-adv-x="1000" />
+<glyph glyph-name="list" unicode="&#xe823;" d="m1000 632h-750v-62l750-1v63z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z m-250 406l125 1v125l-125 0v-126z m0-249h125v125h-125v-125z m0-250h125v125h-125v-125z" horiz-adv-x="1000" />
+<glyph glyph-name="pages" unicode="&#xe824;" d="m63 601v-689h687l0 688l-687 1z m625-63v-563h-563v563h563z m-500 250v-125h62v62h625v-625l-62 0v-62h125v750h-750z" horiz-adv-x="1000" />
+<glyph glyph-name="refresh" unicode="&#xe825;" d="m813 288c-28-145-161-250-313-250c-172 0-312 139-312 312c0 173 141 312 312 313v-98l221 129l-221 128v-95c0-2 0-2 0-2c-206 0-375-167-375-375s169-375 375-375c187 0 347 133 375 313h-62z" horiz-adv-x="1000" />
+<glyph glyph-name="right" unicode="&#xe826;" d="m372 792l-127-124l314-318l-314-318l127-123l441 441l-441 442z" horiz-adv-x="1000" />
+<glyph glyph-name="sound" unicode="&#xe827;" d="m825-22c-2 0-3 0-5 0l-16 7c0 0 0 0 0 1c-5 1-8 3-10 6c-1 3-1 7 1 12c1 1 22 40 43 101c20 58 44 147 44 244c0 98-24 186-44 243c-21 61-42 100-43 102c-4 11-2 15 8 21l17 8c2 1 5 2 7 2c7 0 12-5 17-16c1-2 2-4 4-8c10-19 32-63 52-125c25-78 37-156 37-232c0-94-24-182-44-240c-22-63-44-104-45-104l-1-2c-5-11-9-20-22-20c0 0 0 0 0 0z m-574 248c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound2" unicode="&#xe828;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound3" unicode="&#xe80b;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m390 3c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound4" unicode="&#xe80c;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z" horiz-adv-x="1000" />
+<glyph glyph-name="up" unicode="&#xe80d;" d="m58 222l124-126l318 314l317-314l124 126l-441 441l-442-441z" horiz-adv-x="1000" />
+<glyph glyph-name="bars" unicode="&#xe80e;" d="m875 632h-750v-62l750-1l0 63l0 0z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z" horiz-adv-x="1000" />
+<glyph glyph-name="caret" unicode="&#xe80f;" d="m438 475h-125l187-250l188 250h-125" horiz-adv-x="1000" />
 <glyph glyph-name="and-down" unicode="&#xe801;" d="m500 156l-373 325l59 67l314-273l315 273l59-67l-374-325l0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="code" unicode="&#xe81b;" d="m680 608l-74-72l184-186l-184-185l74-73l257 258l-257 258z m-360-516l74 72l-184 186l184 186l-74 72l-258-258l258-258z" horiz-adv-x="1000" />
-<glyph glyph-name="down-nav" unicode="&#xe81d;" d="m934 537l-81 83l-354-372l-353 372l-81-83l435-455l434 455z" horiz-adv-x="1000" />
-<glyph glyph-name="download" unicode="&#xe81e;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-344-323v635l-62 0v-635l-115 112l-41-39l187-188l188 188l-42 40l-115-113z" horiz-adv-x="1000" />
-<glyph glyph-name="edit" unicode="&#xe81f;" d="m749 511l-404-404l-110-22l22 110l404 404l16-16l-404-405l56-55l404 404l16-16z m16 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20" horiz-adv-x="1000" />
-<glyph glyph-name="forward" unicode="&#xe820;" d="m500 526l313-176l-313-176m-312 352l312-176l-312-176" horiz-adv-x="1000" />
-<glyph glyph-name="info" unicode="&#xe822;" d="m500 725c-207 0-375-168-375-375s168-375 375-375s375 168 375 375s-168 375-375 375z m63-625h-125v313h125v-313z m-63 375c-34 0-62 28-62 63c0 34 28 62 62 62s63-28 63-62c0-35-28-63-63-63z" horiz-adv-x="1000" />
-<glyph glyph-name="left-nav" unicode="&#xe823;" d="m663-84l83 81l-372 354l372 354l-83 81l-455-435l455-435z" horiz-adv-x="1000" />
-<glyph glyph-name="more-vertical" unicode="&#xe824;" d="m500 163c52 0 94-42 94-94c0-52-42-94-94-94s-94 42-94 94c0 52 42 94 94 94z m-94 468c0-51 42-93 94-93s94 42 94 93s-42 94-94 94s-94-42-94-94z m0-281c0-52 42-94 94-94s94 42 94 94s-42 94-94 94s-94-42-94-94z" horiz-adv-x="1000" />
-<glyph glyph-name="more" unicode="&#xe825;" d="m313 350c0-52-42-94-94-94s-94 42-94 94s42 94 94 94s94-42 94-94z m468 94c-52 0-93-42-93-94s41-94 93-94s94 42 94 94s-42 94-94 94z m-281 0c-52 0-94-42-94-94c0-52 42-94 94-94s94 42 94 94c0 52-42 94-94 94z" horiz-adv-x="1000" />
-<glyph glyph-name="pause" unicode="&#xe826;" d="m438 37h-188v625h188v-625z m312 1h-187v625h187v-625z" horiz-adv-x="1000" />
-<glyph glyph-name="person" unicode="&#xe827;" d="m501 847c-275 0-497-222-497-497s222-496 497-496s496 222 496 496s-222 497-496 497z m315-801c-25 11-53 26-79 28c-149 12-152 43-152 106c0 47 30 8 52 118c8 36 15 29 36 95c13 47-12 41-12 41s8 35 12 72c10 96-32 187-175 187c-64 0-94-27-133-57c-41-32-55-76-44-130c7-39 21-77 12-72c0 0-22 6-12-41c21-59 32-59 38-95c18-107 47-70 53-118c6-63-7-94-148-106c-25-2-55-16-79-27c-76 79-123 186-123 303c0 242 197 439 439 439s438-197 438-439c0-118-47-226-123-304z" horiz-adv-x="1000" />
-<glyph glyph-name="play" unicode="&#xe828;" d="m250 663l567-313l-567-312" horiz-adv-x="1000" />
-<glyph glyph-name="plus" unicode="&#xe829;" d="m469 725v-750h61l1 750l-62 0l0 0z m406-344h-750v-61l750-1l0 62l0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="right-nav" unicode="&#xe82a;" d="m291 786l-83-81l372-354l-372-354l83-81l455 435l-455 435z" horiz-adv-x="1000" />
-<glyph glyph-name="share" unicode="&#xe82c;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-406 197v-572h62v572l115-112l42 40l-188 187l-187-187l41-41l115 113z" horiz-adv-x="1000" />
-<glyph glyph-name="stop" unicode="&#xe82f;" d="m812 37h-625v625h625v-625z" horiz-adv-x="1000" />
-<glyph glyph-name="trash" unicode="&#xe830;" d="m875 725h-250c0 22 0 50 0 62c0 18-15 34-34 34h-182c-19 0-34-16-34-34c0-14 0-41 0-62h-250v-63h69l57-715c0-19 16-34 34-34h432c19 0 34 15 34 34l58 715h66v63z m-459 33c0 14 11 25 24 25h120c13 0 24-11 24-25c0-6 0-20 0-33h-168c0 12 0 26 0 33z m287-757c0-15-11-26-26-26h-355c-14 0-25 11-25 26l-42 661h490l-42-661z m-273 37h-47l-39 562l46 0l40-562z m187 0l-46 0l39 562l47 0l-40-562z m-94 0h-47v562h47v-562z" horiz-adv-x="1000" />
-<glyph glyph-name="up-nav" unicode="&#xe832;" d="m65 146l81-83l354 372l353-372l81 83l-434 456l-435-456z" horiz-adv-x="1000" />
-<glyph glyph-name="star-filled" unicode="&#xe82e;" d="m500 812l116-354l371 0l-300-218l115-353l-301 218l-300-218l114 353l-300 218l371 0l114 354z" horiz-adv-x="1000" />
-<glyph glyph-name="star" unicode="&#xe82d;" d="m987 458l-372 0l-115 354l-114-354l-371 0l301-218l-115-353l301 218l299-218l-115 353l301 218z m-252-478l-234 174l-234-174l99 274l-252 171l295 0l92 290l91-290l296 0l-253-175l100-270z" horiz-adv-x="1000" />
-<glyph glyph-name="and-search" unicode="&#xe807;" d="m928 51l-167 167c-17 17-47 15-66-4l-3-3l-69 69c42 54 67 121 67 194c0 173-140 313-314 313s-313-140-313-313s140-314 313-314c71 0 137 24 190 64l69-70c-18-19-19-48-2-65l166-166c17-17 47-16 66 4l59 58c19 19 21 49 4 66z m-801 423c0 137 112 249 249 249s249-112 249-249s-111-249-249-249s-249 111-249 249z" horiz-adv-x="1000" />
-<glyph glyph-name="search" unicode="&#xe82b;" d="m935-10l-279 279c39 54 62 120 62 191c0 181-147 328-328 328s-327-147-327-328s147-327 327-327c71 0 136 22 190 61l279-280l76 76z m-808 470c0 146 118 263 263 263s264-117 264-263s-118-263-264-263s-263 118-263 263z" horiz-adv-x="1000" />
-<glyph glyph-name="home" unicode="&#xe821;" d="m939 350l-438 438l0 0l0 0l-438-438l48-47l54 54v-444h16h51h168h47h109h46h168h55h12v444l54-54l48 47z m-501-370v245h125v-245h-125z m332 444v-444h-161v291h-16h-30h-125h-34h-12v-291h-160v444h0l269 269l269-269h0z" horiz-adv-x="1000" />
-<glyph glyph-name="compose" unicode="&#xe81c;" d="m890 651l-405-404l-110-22l22 110l404 405l17-17l-405-404l56-56l404 405l17-17z m15 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20m-4-272v-445h-625v625h440l63 62h-566v-750h750v570l-62-62z" horiz-adv-x="1000" />
-<glyph glyph-name="close" unicode="&#xe81a;" d="m213 593l530-530l43 44l-529 530l-44-44l0 0z m530 44l-530-530l43-44l531 530l-44 44l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="close" unicode="&#xe811;" d="m213 593l530-530l43 44l-529 530l-44-44l0 0z m530 44l-530-530l43-44l531 530l-44 44l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="code" unicode="&#xe812;" d="m680 608l-74-72l184-186l-184-185l74-73l257 258l-257 258z m-360-516l74 72l-184 186l184 186l-74 72l-258-258l258-258z" horiz-adv-x="1000" />
+<glyph glyph-name="compose" unicode="&#xe813;" d="m890 651l-405-404l-110-22l22 110l404 405l17-17l-405-404l56-56l404 405l17-17z m15 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20m-4-272v-445h-625v625h440l63 62h-566v-750h750v570l-62-62z" horiz-adv-x="1000" />
+<glyph glyph-name="down-nav" unicode="&#xe814;" d="m934 537l-81 83l-354-372l-353 372l-81-83l435-455l434 455z" horiz-adv-x="1000" />
+<glyph glyph-name="download" unicode="&#xe815;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-344-323v635l-62 0v-635l-115 112l-41-39l187-188l188 188l-42 40l-115-113z" horiz-adv-x="1000" />
+<glyph glyph-name="edit" unicode="&#xe829;" d="m749 511l-404-404l-110-22l22 110l404 404l16-16l-404-405l56-55l404 404l16-16z m16 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20" horiz-adv-x="1000" />
+<glyph glyph-name="forward" unicode="&#xe82a;" d="m500 526l313-176l-313-176m-312 352l312-176l-312-176" horiz-adv-x="1000" />
+<glyph glyph-name="home" unicode="&#xe82b;" d="m939 350l-438 438l0 0l0 0l-438-438l48-47l54 54v-444h16h51h168h47h109h46h168h55h12v444l54-54l48 47z m-501-370v245h125v-245h-125z m332 444v-444h-161v291h-16h-30h-125h-34h-12v-291h-160v444h0l269 269l269-269h0z" horiz-adv-x="1000" />
+<glyph glyph-name="info" unicode="&#xe82c;" d="m500 725c-207 0-375-168-375-375s168-375 375-375s375 168 375 375s-168 375-375 375z m63-625h-125v313h125v-313z m-63 375c-34 0-62 28-62 63c0 34 28 62 62 62s63-28 63-62c0-35-28-63-63-63z" horiz-adv-x="1000" />
+<glyph glyph-name="left-nav" unicode="&#xe82d;" d="m663-84l83 81l-372 354l372 354l-83 81l-455-435l455-435z" horiz-adv-x="1000" />
+<glyph glyph-name="more-vertical" unicode="&#xe82e;" d="m500 163c52 0 94-42 94-94c0-52-42-94-94-94s-94 42-94 94c0 52 42 94 94 94z m-94 468c0-51 42-93 94-93s94 42 94 93s-42 94-94 94s-94-42-94-94z m0-281c0-52 42-94 94-94s94 42 94 94s-42 94-94 94s-94-42-94-94z" horiz-adv-x="1000" />
+<glyph glyph-name="more" unicode="&#xe82f;" d="m313 350c0-52-42-94-94-94s-94 42-94 94s42 94 94 94s94-42 94-94z m468 94c-52 0-93-42-93-94s41-94 93-94s94 42 94 94s-42 94-94 94z m-281 0c-52 0-94-42-94-94c0-52 42-94 94-94s94 42 94 94c0 52-42 94-94 94z" horiz-adv-x="1000" />
+<glyph glyph-name="pause" unicode="&#xe830;" d="m438 37h-188v625h188v-625z m312 1h-187v625h187v-625z" horiz-adv-x="1000" />
+<glyph glyph-name="person" unicode="&#xe832;" d="m501 847c-275 0-497-222-497-497s222-496 497-496s496 222 496 496s-222 497-496 497z m315-801c-25 11-53 26-79 28c-149 12-152 43-152 106c0 47 30 8 52 118c8 36 15 29 36 95c13 47-12 41-12 41s8 35 12 72c10 96-32 187-175 187c-64 0-94-27-133-57c-41-32-55-76-44-130c7-39 21-77 12-72c0 0-22 6-12-41c21-59 32-59 38-95c18-107 47-70 53-118c6-63-7-94-148-106c-25-2-55-16-79-27c-76 79-123 186-123 303c0 242 197 439 439 439s438-197 438-439c0-118-47-226-123-304z" horiz-adv-x="1000" />
+<glyph glyph-name="play" unicode="&#xe816;" d="m250 663l567-313l-567-312" horiz-adv-x="1000" />
+<glyph glyph-name="plus" unicode="&#xe817;" d="m469 725v-750h61l1 750l-62 0l0 0z m406-344h-750v-61l750-1l0 62l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="right-nav" unicode="&#xe818;" d="m291 786l-83-81l372-354l-372-354l83-81l455 435l-455 435z" horiz-adv-x="1000" />
+<glyph glyph-name="search" unicode="&#xe819;" d="m935-10l-279 279c39 54 62 120 62 191c0 181-147 328-328 328s-327-147-327-328s147-327 327-327c71 0 136 22 190 61l279-280l76 76z m-808 470c0 146 118 263 263 263s264-117 264-263s-118-263-264-263s-263 118-263 263z" horiz-adv-x="1000" />
+<glyph glyph-name="share" unicode="&#xe81a;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-406 197v-572h62v572l115-112l42 40l-188 187l-187-187l41-41l115 113z" horiz-adv-x="1000" />
+<glyph glyph-name="star-filled" unicode="&#xe81b;" d="m500 812l116-354l371 0l-300-218l115-353l-301 218l-300-218l114 353l-300 218l371 0l114 354z" horiz-adv-x="1000" />
+<glyph glyph-name="star" unicode="&#xe81c;" d="m987 458l-372 0l-115 354l-114-354l-371 0l301-218l-115-353l301 218l299-218l-115 353l301 218z m-252-478l-234 174l-234-174l99 274l-252 171l295 0l92 290l91-290l296 0l-253-175l100-270z" horiz-adv-x="1000" />
+<glyph glyph-name="stop" unicode="&#xe81d;" d="m812 37h-625v625h625v-625z" horiz-adv-x="1000" />
+<glyph glyph-name="trash" unicode="&#xe81e;" d="m875 725h-250c0 22 0 50 0 62c0 18-15 34-34 34h-182c-19 0-34-16-34-34c0-14 0-41 0-62h-250v-63h69l57-715c0-19 16-34 34-34h432c19 0 34 15 34 34l58 715h66v63z m-459 33c0 14 11 25 24 25h120c13 0 24-11 24-25c0-6 0-20 0-33h-168c0 12 0 26 0 33z m287-757c0-15-11-26-26-26h-355c-14 0-25 11-25 26l-42 661h490l-42-661z m-273 37h-47l-39 562l46 0l40-562z m187 0l-46 0l39 562l47 0l-40-562z m-94 0h-47v562h47v-562z" horiz-adv-x="1000" />
+<glyph glyph-name="check" unicode="&#xe810;" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />
 </font>
 </defs>
 </svg>
--- a/dist/ratchicons/ratchicons.ttf
+++ b/dist/ratchicons/ratchicons.ttf
--- a/dist/ratchicons/ratchicons.woff
+++ b/dist/ratchicons/ratchicons.woff
--- a/docs/_includes/jump.html
+++ b/docs/_includes/jump.html
@ -17,4 +17,5 @@
  <a class="docs-component-item" href="#modals" data-ignore="push">Modals</a>
  <a class="docs-component-item" href="#sliders" data-ignore="push">Sliders</a>
  <a class="docs-component-item" href="#push" data-ignore="push">Push</a>
+  <a class="docs-component-item" href="#ratchicons" data-ignore="push">Ratchicons</a>
 </div>
--- a/docs/_includes/masthead.html
+++ b/docs/_includes/masthead.html
@ -11,7 +11,6 @@
          <a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a>
          <a class="docs-nav-item" href="/components" data-ignore="push">Components</a>
          <a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a>
-          <a class="docs-nav-item" href="/about" data-ignore="push">About</a>
        </div>
      </nav>
    </div>
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@ -331,6 +331,13 @@ body {
  cursor: pointer;
 }

+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  background-color: #f9f9f9;
+  border-radius: 3px;
+}
+
 .component {
  padding: 50px 15px;
  margin-left: -15px;
@ -349,13 +356,6 @@ body {
  margin-bottom: 15px;
  font-size: 16px;
 }
-.component-description code {
-  padding: 2px 4px;
-  font-size: 90%;
-  background-color: #f9f9f9;
-  white-space: nowrap;
-  border-radius: 3px;
-}

 .component-example {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
@ -438,6 +438,19 @@ body {
  word-wrap: normal;
 }

+#ratchicons .icon,
+#ratchiconsInDevice .icon {
+  width: 50px;
+  height: 50px;
+  margin: 3px;
+  font-size: 24px;
+  line-height: 50px;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 25px;
+}
+
 #modals .modal {
  left: 0;
  z-index: 50;
@ -694,8 +707,24 @@ hr {
    margin-top: 0;
  }

-  .docs-contribute .column {
-    margin-bottom: 0;
+  .docs-steps {
+    margin-top: 50px;
+    padding: 0;
+    list-style: none;
+  }
+
+  .step {
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+
+  .step-title,
+  .step-description {
+    font-weight: 300;
+  }
+
+  .step-description {
+    font-size: 18px;
  }

  .section-heading {
--- a/docs/components.html
+++ b/docs/components.html
@ -1224,6 +1224,103 @@ window.addEventListener('push', myFunction);
 {% endhighlight %}

      </article>
+
+      <!-- Ratchicons -->
+    <article class="component" id="ratchicons">
+      <h3 class="component-title">Ratchicons</h3>
+      <p class="component-description">Use Ratchicons in your application to help inform interactions.</p>
+
+      <div class="component-example">
+        <div class="content-padded">
+          <span class="icon icon-back"></span>
+          <span class="icon icon-bars"></span>
+          <span class="icon icon-caret"></span>
+          <span class="icon icon-check"></span>
+          <span class="icon icon-close"></span>
+          <span class="icon icon-code"></span>
+          <span class="icon icon-compose"></span>
+          <span class="icon icon-down-nav"></span>
+          <span class="icon icon-down"></span>
+          <span class="icon icon-download"></span>
+          <span class="icon icon-edit"></span>
+          <span class="icon icon-forward"></span>
+          <span class="icon icon-gear"></span>
+          <span class="icon icon-home"></span>
+          <span class="icon icon-info"></span>
+          <span class="icon icon-left-nav"></span>
+          <span class="icon icon-left"></span>
+          <span class="icon icon-list"></span>
+          <span class="icon icon-more-vertical"></span>
+          <span class="icon icon-more"></span>
+          <span class="icon icon-pages"></span>
+          <span class="icon icon-pause"></span>
+          <span class="icon icon-person"></span>
+          <span class="icon icon-play"></span>
+          <span class="icon icon-plus"></span>
+          <span class="icon icon-refresh"></span>
+          <span class="icon icon-right-nav"></span>
+          <span class="icon icon-right"></span>
+          <span class="icon icon-search"></span>
+          <span class="icon icon-share"></span>
+          <span class="icon icon-sound"></span>
+          <span class="icon icon-sound2"></span>
+          <span class="icon icon-sound3"></span>
+          <span class="icon icon-sound4"></span>
+          <span class="icon icon-star-filled"></span>
+          <span class="icon icon-star"></span>
+          <span class="icon icon-stop"></span>
+          <span class="icon icon-trash"></span>
+          <span class="icon icon-up-nav"></span>
+          <span class="icon icon-up"></span>
+        </div>
+      </div>
+
+{% highlight html %}
+<div class="content-padded">
+  <span class="icon icon-back"></span>
+  <span class="icon icon-bars"></span>
+  <span class="icon icon-caret"></span>
+  <span class="icon icon-check"></span>
+  <span class="icon icon-close"></span>
+  <span class="icon icon-code"></span>
+  <span class="icon icon-compose"></span>
+  <span class="icon icon-down-nav"></span>
+  <span class="icon icon-down"></span>
+  <span class="icon icon-download"></span>
+  <span class="icon icon-edit"></span>
+  <span class="icon icon-forward"></span>
+  <span class="icon icon-gear"></span>
+  <span class="icon icon-home"></span>
+  <span class="icon icon-info"></span>
+  <span class="icon icon-left-nav"></span>
+  <span class="icon icon-left"></span>
+  <span class="icon icon-list"></span>
+  <span class="icon icon-more-vertical"></span>
+  <span class="icon icon-more"></span>
+  <span class="icon icon-pages"></span>
+  <span class="icon icon-pause"></span>
+  <span class="icon icon-person"></span>
+  <span class="icon icon-play"></span>
+  <span class="icon icon-plus"></span>
+  <span class="icon icon-refresh"></span>
+  <span class="icon icon-right-nav"></span>
+  <span class="icon icon-right"></span>
+  <span class="icon icon-search"></span>
+  <span class="icon icon-share"></span>
+  <span class="icon icon-sound"></span>
+  <span class="icon icon-sound2"></span>
+  <span class="icon icon-sound3"></span>
+  <span class="icon icon-sound4"></span>
+  <span class="icon icon-star-filled"></span>
+  <span class="icon icon-star"></span>
+  <span class="icon icon-stop"></span>
+  <span class="icon icon-trash"></span>
+  <span class="icon icon-up-nav"></span>
+  <span class="icon icon-up"></span>
+</div>
+{% endhighlight %}
+
+    </article>
      
      <!-- Footer -->
      {% include footer.html %}
--- a/docs/dist/ratchet.css
+++ b/docs/dist/ratchet.css
@ -1248,166 +1248,166 @@ select {
  -webkit-font-smoothing: antialiased;
 }

+.icon-and-up:before {
+  content: '\e809';
+}
+
 .icon-back:before {
  content: '\e80a';
 }

 .icon-bars:before {
-  content: '\e817';
+  content: '\e80e';
 }

 .icon-caret:before {
-  content: '\e818';
+  content: '\e80f';
 }

 .icon-check:before {
-  content: '\e819';
+  content: '\e810';
 }

 .icon-close:before {
-  content: '\e81a';
+  content: '\e811';
 }

 .icon-code:before {
-  content: '\e81b';
+  content: '\e812';
 }

 .icon-compose:before {
-  content: '\e81c';
+  content: '\e813';
 }

 .icon-down-nav:before {
-  content: '\e81d';
+  content: '\e814';
 }

 .icon-down:before {
-  content: '\e80b';
+  content: '\e820';
 }

 .icon-download:before {
-  content: '\e81e';
+  content: '\e815';
 }

 .icon-edit:before {
-  content: '\e81f';
+  content: '\e829';
 }

 .icon-forward:before {
-  content: '\e820';
+  content: '\e82a';
 }

 .icon-gear:before {
-  content: '\e80c';
+  content: '\e821';
 }

 .icon-home:before {
-  content: '\e821';
+  content: '\e82b';
 }

 .icon-info:before {
-  content: '\e822';
+  content: '\e82c';
 }

 .icon-left-nav:before {
-  content: '\e823';
+  content: '\e82d';
 }

 .icon-left:before {
-  content: '\e80d';
+  content: '\e822';
 }

 .icon-list:before {
-  content: '\e80e';
+  content: '\e823';
 }

 .icon-more-vertical:before {
-  content: '\e824';
+  content: '\e82e';
 }

 .icon-more:before {
-  content: '\e825';
+  content: '\e82f';
 }

 .icon-pages:before {
-  content: '\e80f';
+  content: '\e824';
 }

 .icon-pause:before {
-  content: '\e826';
+  content: '\e830';
 }

 .icon-person:before {
-  content: '\e827';
+  content: '\e832';
 }

 .icon-play:before {
-  content: '\e828';
+  content: '\e816';
 }

 .icon-plus:before {
-  content: '\e829';
+  content: '\e817';
 }

 .icon-refresh:before {
-  content: '\e810';
+  content: '\e825';
 }

 .icon-right-nav:before {
-  content: '\e82a';
+  content: '\e818';
 }

 .icon-right:before {
-  content: '\e811';
+  content: '\e826';
 }

 .icon-search:before {
-  content: '\e82b';
+  content: '\e819';
 }

 .icon-share:before {
-  content: '\e82c';
+  content: '\e81a';
 }

 .icon-sound2:before {
-  content: '\e813';
+  content: '\e828';
 }

 .icon-sound3:before {
-  content: '\e814';
+  content: '\e80b';
 }

 .icon-sound4:before {
-  content: '\e815';
+  content: '\e80c';
 }

 .icon-sound:before {
-  content: '\e812';
+  content: '\e827';
 }

 .icon-star-filled:before {
-  content: '\e82e';
+  content: '\e81b';
 }

 .icon-star:before {
-  content: '\e82d';
+  content: '\e81c';
 }

 .icon-stop:before {
-  content: '\e82f';
+  content: '\e81d';
 }

 .icon-trash:before {
-  content: '\e830';
+  content: '\e81e';
 }

 .icon-up-nav:before {
-  content: '\e832';
+  content: '\e81f';
 }

 .icon-up:before {
-  content: '\e816';
-}
-
-.icon-user:before {
-  content: '\e831';
+  content: '\e80d';
 }
--- a/docs/dist/ratchicons/ratchicons.eot
+++ b/docs/dist/ratchicons/ratchicons.eot
--- a/docs/dist/ratchicons/ratchicons.svg
+++ b/docs/dist/ratchicons/ratchicons.svg
@ -7,56 +7,55 @@
 <font-face font-family="ratchicons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 <missing-glyph horiz-adv-x="1000" />
 <glyph glyph-name="and-caret" unicode="&#xe800;" d="m313 225l375 0v376" horiz-adv-x="1000" />
-<glyph glyph-name="user" unicode="&#xe831;" d="m736 128q204-72 204-122l0-106l-940 0l0 106q0 50 204 122q94 34 128 69t34 95q0 22-22 49t-32 73q-2 12-9 18t-14 8t-14 17t-9 43q0 16 5 26t9 12l4 4q-8 50-12 88q-4 54 41 112t157 58t158-58t40-112l-12-88q18-8 18-42q-2-28-9-43t-14-17t-14-8t-9-18q-8-48-31-74t-23-48q0-60 35-95t127-69z" horiz-adv-x="940" />
+<glyph glyph-name="up-nav" unicode="&#xe81f;" d="m65 146l81-83l354 372l353-372l81 83l-434 456l-435-456z" horiz-adv-x="1000" />
 <glyph glyph-name="and-download" unicode="&#xe802;" d="m875 38h-750v62h750v-62z m-312 375v250h-125v-250h-125l187-250l188 250h-125z" horiz-adv-x="1000" />
 <glyph glyph-name="and-left" unicode="&#xe803;" d="m306 349l325 373l67-59l-273-314l273-315l-67-59l-325 373l0 1z" horiz-adv-x="1000" />
 <glyph glyph-name="and-more-vertical" unicode="&#xe804;" d="m406-25v188h188v-188h-188z m0 563h188v188h-188v-188z m188-281v188h-188v-188h188z" horiz-adv-x="1000" />
 <glyph glyph-name="and-more" unicode="&#xe805;" d="m125 444h188v-187h-188v187z m563 0v-187h187v187h-187z m-281-187h187v187h-187v-187z" horiz-adv-x="1000" />
 <glyph glyph-name="and-right" unicode="&#xe806;" d="m698 348l-325-373l-67 59l274 315l-274 314l68 59l324-373l0-1z" horiz-adv-x="1000" />
+<glyph glyph-name="and-search" unicode="&#xe807;" d="m928 51l-167 167c-17 17-47 15-66-4l-3-3l-69 69c42 54 67 121 67 194c0 173-140 313-314 313s-313-140-313-313s140-314 313-314c71 0 137 24 190 64l69-70c-18-19-19-48-2-65l166-166c17-17 47-16 66 4l59 58c19 19 21 49 4 66z m-801 423c0 137 112 249 249 249s249-112 249-249s-111-249-249-249s-249 111-249 249z" horiz-adv-x="1000" />
 <glyph glyph-name="and-share" unicode="&#xe808;" d="m728 215c-33 0-63-14-84-36l-263 153c1 6 2 12 2 18c0 6-1 12-2 18l263 152c21-23 51-37 84-37c62 0 113 51 113 113s-51 114-113 114s-114-51-114-114c0-7 1-14 2-21l-261-150c-21 23-51 38-85 38c-63 0-114-50-114-113s51-113 114-113c33 0 64 15 85 38l261-151c-1-7-2-14-2-22c0-62 51-113 114-113s113 51 113 113s-51 113-113 113z" horiz-adv-x="1000" />
 <glyph glyph-name="and-up" unicode="&#xe809;" d="m500 548l374-325l-59-67l-315 273l-314-273l-59 67l373 325l0 0z" horiz-adv-x="1000" />
 <glyph glyph-name="back" unicode="&#xe80a;" d="m500 174l-313 176l313 176m312-352l-312 176l312 176" horiz-adv-x="1000" />
-<glyph glyph-name="down" unicode="&#xe80b;" d="m941 479l-124 127l-317-315l-318 315l-124-127l442-441l441 441z" horiz-adv-x="1000" />
-<glyph glyph-name="gear" unicode="&#xe80c;" d="m820 274l118 40l0 72l-118 40c-8 34-22 67-40 97l55 111l-51 51l-111-55c-30 18-62 32-97 40l-39 118l-73 0l-40-118c-34-8-67-22-97-40l-111 55l-51-51l55-111c-18-30-32-62-40-97l-117-39l0-73l117-40c9-34 22-67 41-96l-56-111l52-52l111 56c29-19 62-32 96-40l40-119l73 0l39 119c35 8 67 21 97 40l111-56l51 52l-55 111c18 29 32 62 40 96z m-320-174c-139 0-251 112-251 251s112 250 251 250s250-112 250-250s-112-251-250-251z" horiz-adv-x="1000" />
-<glyph glyph-name="left" unicode="&#xe80d;" d="m628-91l127 123l-314 318l314 318l-127 124l-441-442l441-441z" horiz-adv-x="1000" />
-<glyph glyph-name="list" unicode="&#xe80e;" d="m1000 632h-750v-62l750-1v63z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z m-250 406l125 1v125l-125 0v-126z m0-249h125v125h-125v-125z m0-250h125v125h-125v-125z" horiz-adv-x="1000" />
-<glyph glyph-name="pages" unicode="&#xe80f;" d="m63 601v-689h687l0 688l-687 1z m625-63v-563h-563v563h563z m-500 250v-125h62v62h625v-625l-62 0v-62h125v750h-750z" horiz-adv-x="1000" />
-<glyph glyph-name="refresh" unicode="&#xe810;" d="m813 288c-28-145-161-250-313-250c-172 0-312 139-312 312c0 173 141 312 312 313v-98l221 129l-221 128v-95c0-2 0-2 0-2c-206 0-375-167-375-375s169-375 375-375c187 0 347 133 375 313h-62z" horiz-adv-x="1000" />
-<glyph glyph-name="right" unicode="&#xe811;" d="m372 792l-127-124l314-318l-314-318l127-123l441 441l-441 442z" horiz-adv-x="1000" />
-<glyph glyph-name="sound" unicode="&#xe812;" d="m825-22c-2 0-3 0-5 0l-16 7c0 0 0 0 0 1c-5 1-8 3-10 6c-1 3-1 7 1 12c1 1 22 40 43 101c20 58 44 147 44 244c0 98-24 186-44 243c-21 61-42 100-43 102c-4 11-2 15 8 21l17 8c2 1 5 2 7 2c7 0 12-5 17-16c1-2 2-4 4-8c10-19 32-63 52-125c25-78 37-156 37-232c0-94-24-182-44-240c-22-63-44-104-45-104l-1-2c-5-11-9-20-22-20c0 0 0 0 0 0z m-574 248c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="sound2" unicode="&#xe813;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="sound3" unicode="&#xe814;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m390 3c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="sound4" unicode="&#xe815;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z" horiz-adv-x="1000" />
-<glyph glyph-name="up" unicode="&#xe816;" d="m58 222l124-126l318 314l317-314l124 126l-441 441l-442-441z" horiz-adv-x="1000" />
-<glyph glyph-name="bars" unicode="&#xe817;" d="m875 632h-750v-62l750-1l0 63l0 0z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z" horiz-adv-x="1000" />
-<glyph glyph-name="caret" unicode="&#xe818;" d="m438 475h-125l187-250l188 250h-125" horiz-adv-x="1000" />
-<glyph glyph-name="check" unicode="&#xe819;" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />
+<glyph glyph-name="down" unicode="&#xe820;" d="m941 479l-124 127l-317-315l-318 315l-124-127l442-441l441 441z" horiz-adv-x="1000" />
+<glyph glyph-name="gear" unicode="&#xe821;" d="m820 274l118 40l0 72l-118 40c-8 34-22 67-40 97l55 111l-51 51l-111-55c-30 18-62 32-97 40l-39 118l-73 0l-40-118c-34-8-67-22-97-40l-111 55l-51-51l55-111c-18-30-32-62-40-97l-117-39l0-73l117-40c9-34 22-67 41-96l-56-111l52-52l111 56c29-19 62-32 96-40l40-119l73 0l39 119c35 8 67 21 97 40l111-56l51 52l-55 111c18 29 32 62 40 96z m-320-174c-139 0-251 112-251 251s112 250 251 250s250-112 250-250s-112-251-250-251z" horiz-adv-x="1000" />
+<glyph glyph-name="left" unicode="&#xe822;" d="m628-91l127 123l-314 318l314 318l-127 124l-441-442l441-441z" horiz-adv-x="1000" />
+<glyph glyph-name="list" unicode="&#xe823;" d="m1000 632h-750v-62l750-1v63z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z m-250 406l125 1v125l-125 0v-126z m0-249h125v125h-125v-125z m0-250h125v125h-125v-125z" horiz-adv-x="1000" />
+<glyph glyph-name="pages" unicode="&#xe824;" d="m63 601v-689h687l0 688l-687 1z m625-63v-563h-563v563h563z m-500 250v-125h62v62h625v-625l-62 0v-62h125v750h-750z" horiz-adv-x="1000" />
+<glyph glyph-name="refresh" unicode="&#xe825;" d="m813 288c-28-145-161-250-313-250c-172 0-312 139-312 312c0 173 141 312 312 313v-98l221 129l-221 128v-95c0-2 0-2 0-2c-206 0-375-167-375-375s169-375 375-375c187 0 347 133 375 313h-62z" horiz-adv-x="1000" />
+<glyph glyph-name="right" unicode="&#xe826;" d="m372 792l-127-124l314-318l-314-318l127-123l441 441l-441 442z" horiz-adv-x="1000" />
+<glyph glyph-name="sound" unicode="&#xe827;" d="m825-22c-2 0-3 0-5 0l-16 7c0 0 0 0 0 1c-5 1-8 3-10 6c-1 3-1 7 1 12c1 1 22 40 43 101c20 58 44 147 44 244c0 98-24 186-44 243c-21 61-42 100-43 102c-4 11-2 15 8 21l17 8c2 1 5 2 7 2c7 0 12-5 17-16c1-2 2-4 4-8c10-19 32-63 52-125c25-78 37-156 37-232c0-94-24-182-44-240c-22-63-44-104-45-104l-1-2c-5-11-9-20-22-20c0 0 0 0 0 0z m-574 248c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound2" unicode="&#xe828;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound3" unicode="&#xe80b;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m390 3c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound4" unicode="&#xe80c;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z" horiz-adv-x="1000" />
+<glyph glyph-name="up" unicode="&#xe80d;" d="m58 222l124-126l318 314l317-314l124 126l-441 441l-442-441z" horiz-adv-x="1000" />
+<glyph glyph-name="bars" unicode="&#xe80e;" d="m875 632h-750v-62l750-1l0 63l0 0z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z" horiz-adv-x="1000" />
+<glyph glyph-name="caret" unicode="&#xe80f;" d="m438 475h-125l187-250l188 250h-125" horiz-adv-x="1000" />
 <glyph glyph-name="and-down" unicode="&#xe801;" d="m500 156l-373 325l59 67l314-273l315 273l59-67l-374-325l0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="code" unicode="&#xe81b;" d="m680 608l-74-72l184-186l-184-185l74-73l257 258l-257 258z m-360-516l74 72l-184 186l184 186l-74 72l-258-258l258-258z" horiz-adv-x="1000" />
-<glyph glyph-name="down-nav" unicode="&#xe81d;" d="m934 537l-81 83l-354-372l-353 372l-81-83l435-455l434 455z" horiz-adv-x="1000" />
-<glyph glyph-name="download" unicode="&#xe81e;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-344-323v635l-62 0v-635l-115 112l-41-39l187-188l188 188l-42 40l-115-113z" horiz-adv-x="1000" />
-<glyph glyph-name="edit" unicode="&#xe81f;" d="m749 511l-404-404l-110-22l22 110l404 404l16-16l-404-405l56-55l404 404l16-16z m16 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20" horiz-adv-x="1000" />
-<glyph glyph-name="forward" unicode="&#xe820;" d="m500 526l313-176l-313-176m-312 352l312-176l-312-176" horiz-adv-x="1000" />
-<glyph glyph-name="info" unicode="&#xe822;" d="m500 725c-207 0-375-168-375-375s168-375 375-375s375 168 375 375s-168 375-375 375z m63-625h-125v313h125v-313z m-63 375c-34 0-62 28-62 63c0 34 28 62 62 62s63-28 63-62c0-35-28-63-63-63z" horiz-adv-x="1000" />
-<glyph glyph-name="left-nav" unicode="&#xe823;" d="m663-84l83 81l-372 354l372 354l-83 81l-455-435l455-435z" horiz-adv-x="1000" />
-<glyph glyph-name="more-vertical" unicode="&#xe824;" d="m500 163c52 0 94-42 94-94c0-52-42-94-94-94s-94 42-94 94c0 52 42 94 94 94z m-94 468c0-51 42-93 94-93s94 42 94 93s-42 94-94 94s-94-42-94-94z m0-281c0-52 42-94 94-94s94 42 94 94s-42 94-94 94s-94-42-94-94z" horiz-adv-x="1000" />
-<glyph glyph-name="more" unicode="&#xe825;" d="m313 350c0-52-42-94-94-94s-94 42-94 94s42 94 94 94s94-42 94-94z m468 94c-52 0-93-42-93-94s41-94 93-94s94 42 94 94s-42 94-94 94z m-281 0c-52 0-94-42-94-94c0-52 42-94 94-94s94 42 94 94c0 52-42 94-94 94z" horiz-adv-x="1000" />
-<glyph glyph-name="pause" unicode="&#xe826;" d="m438 37h-188v625h188v-625z m312 1h-187v625h187v-625z" horiz-adv-x="1000" />
-<glyph glyph-name="person" unicode="&#xe827;" d="m501 847c-275 0-497-222-497-497s222-496 497-496s496 222 496 496s-222 497-496 497z m315-801c-25 11-53 26-79 28c-149 12-152 43-152 106c0 47 30 8 52 118c8 36 15 29 36 95c13 47-12 41-12 41s8 35 12 72c10 96-32 187-175 187c-64 0-94-27-133-57c-41-32-55-76-44-130c7-39 21-77 12-72c0 0-22 6-12-41c21-59 32-59 38-95c18-107 47-70 53-118c6-63-7-94-148-106c-25-2-55-16-79-27c-76 79-123 186-123 303c0 242 197 439 439 439s438-197 438-439c0-118-47-226-123-304z" horiz-adv-x="1000" />
-<glyph glyph-name="play" unicode="&#xe828;" d="m250 663l567-313l-567-312" horiz-adv-x="1000" />
-<glyph glyph-name="plus" unicode="&#xe829;" d="m469 725v-750h61l1 750l-62 0l0 0z m406-344h-750v-61l750-1l0 62l0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="right-nav" unicode="&#xe82a;" d="m291 786l-83-81l372-354l-372-354l83-81l455 435l-455 435z" horiz-adv-x="1000" />
-<glyph glyph-name="share" unicode="&#xe82c;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-406 197v-572h62v572l115-112l42 40l-188 187l-187-187l41-41l115 113z" horiz-adv-x="1000" />
-<glyph glyph-name="stop" unicode="&#xe82f;" d="m812 37h-625v625h625v-625z" horiz-adv-x="1000" />
-<glyph glyph-name="trash" unicode="&#xe830;" d="m875 725h-250c0 22 0 50 0 62c0 18-15 34-34 34h-182c-19 0-34-16-34-34c0-14 0-41 0-62h-250v-63h69l57-715c0-19 16-34 34-34h432c19 0 34 15 34 34l58 715h66v63z m-459 33c0 14 11 25 24 25h120c13 0 24-11 24-25c0-6 0-20 0-33h-168c0 12 0 26 0 33z m287-757c0-15-11-26-26-26h-355c-14 0-25 11-25 26l-42 661h490l-42-661z m-273 37h-47l-39 562l46 0l40-562z m187 0l-46 0l39 562l47 0l-40-562z m-94 0h-47v562h47v-562z" horiz-adv-x="1000" />
-<glyph glyph-name="up-nav" unicode="&#xe832;" d="m65 146l81-83l354 372l353-372l81 83l-434 456l-435-456z" horiz-adv-x="1000" />
-<glyph glyph-name="star-filled" unicode="&#xe82e;" d="m500 812l116-354l371 0l-300-218l115-353l-301 218l-300-218l114 353l-300 218l371 0l114 354z" horiz-adv-x="1000" />
-<glyph glyph-name="star" unicode="&#xe82d;" d="m987 458l-372 0l-115 354l-114-354l-371 0l301-218l-115-353l301 218l299-218l-115 353l301 218z m-252-478l-234 174l-234-174l99 274l-252 171l295 0l92 290l91-290l296 0l-253-175l100-270z" horiz-adv-x="1000" />
-<glyph glyph-name="and-search" unicode="&#xe807;" d="m928 51l-167 167c-17 17-47 15-66-4l-3-3l-69 69c42 54 67 121 67 194c0 173-140 313-314 313s-313-140-313-313s140-314 313-314c71 0 137 24 190 64l69-70c-18-19-19-48-2-65l166-166c17-17 47-16 66 4l59 58c19 19 21 49 4 66z m-801 423c0 137 112 249 249 249s249-112 249-249s-111-249-249-249s-249 111-249 249z" horiz-adv-x="1000" />
-<glyph glyph-name="search" unicode="&#xe82b;" d="m935-10l-279 279c39 54 62 120 62 191c0 181-147 328-328 328s-327-147-327-328s147-327 327-327c71 0 136 22 190 61l279-280l76 76z m-808 470c0 146 118 263 263 263s264-117 264-263s-118-263-264-263s-263 118-263 263z" horiz-adv-x="1000" />
-<glyph glyph-name="home" unicode="&#xe821;" d="m939 350l-438 438l0 0l0 0l-438-438l48-47l54 54v-444h16h51h168h47h109h46h168h55h12v444l54-54l48 47z m-501-370v245h125v-245h-125z m332 444v-444h-161v291h-16h-30h-125h-34h-12v-291h-160v444h0l269 269l269-269h0z" horiz-adv-x="1000" />
-<glyph glyph-name="compose" unicode="&#xe81c;" d="m890 651l-405-404l-110-22l22 110l404 405l17-17l-405-404l56-56l404 405l17-17z m15 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20m-4-272v-445h-625v625h440l63 62h-566v-750h750v570l-62-62z" horiz-adv-x="1000" />
-<glyph glyph-name="close" unicode="&#xe81a;" d="m213 593l530-530l43 44l-529 530l-44-44l0 0z m530 44l-530-530l43-44l531 530l-44 44l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="close" unicode="&#xe811;" d="m213 593l530-530l43 44l-529 530l-44-44l0 0z m530 44l-530-530l43-44l531 530l-44 44l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="code" unicode="&#xe812;" d="m680 608l-74-72l184-186l-184-185l74-73l257 258l-257 258z m-360-516l74 72l-184 186l184 186l-74 72l-258-258l258-258z" horiz-adv-x="1000" />
+<glyph glyph-name="compose" unicode="&#xe813;" d="m890 651l-405-404l-110-22l22 110l404 405l17-17l-405-404l56-56l404 405l17-17z m15 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20m-4-272v-445h-625v625h440l63 62h-566v-750h750v570l-62-62z" horiz-adv-x="1000" />
+<glyph glyph-name="down-nav" unicode="&#xe814;" d="m934 537l-81 83l-354-372l-353 372l-81-83l435-455l434 455z" horiz-adv-x="1000" />
+<glyph glyph-name="download" unicode="&#xe815;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-344-323v635l-62 0v-635l-115 112l-41-39l187-188l188 188l-42 40l-115-113z" horiz-adv-x="1000" />
+<glyph glyph-name="edit" unicode="&#xe829;" d="m749 511l-404-404l-110-22l22 110l404 404l16-16l-404-405l56-55l404 404l16-16z m16 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20" horiz-adv-x="1000" />
+<glyph glyph-name="forward" unicode="&#xe82a;" d="m500 526l313-176l-313-176m-312 352l312-176l-312-176" horiz-adv-x="1000" />
+<glyph glyph-name="home" unicode="&#xe82b;" d="m939 350l-438 438l0 0l0 0l-438-438l48-47l54 54v-444h16h51h168h47h109h46h168h55h12v444l54-54l48 47z m-501-370v245h125v-245h-125z m332 444v-444h-161v291h-16h-30h-125h-34h-12v-291h-160v444h0l269 269l269-269h0z" horiz-adv-x="1000" />
+<glyph glyph-name="info" unicode="&#xe82c;" d="m500 725c-207 0-375-168-375-375s168-375 375-375s375 168 375 375s-168 375-375 375z m63-625h-125v313h125v-313z m-63 375c-34 0-62 28-62 63c0 34 28 62 62 62s63-28 63-62c0-35-28-63-63-63z" horiz-adv-x="1000" />
+<glyph glyph-name="left-nav" unicode="&#xe82d;" d="m663-84l83 81l-372 354l372 354l-83 81l-455-435l455-435z" horiz-adv-x="1000" />
+<glyph glyph-name="more-vertical" unicode="&#xe82e;" d="m500 163c52 0 94-42 94-94c0-52-42-94-94-94s-94 42-94 94c0 52 42 94 94 94z m-94 468c0-51 42-93 94-93s94 42 94 93s-42 94-94 94s-94-42-94-94z m0-281c0-52 42-94 94-94s94 42 94 94s-42 94-94 94s-94-42-94-94z" horiz-adv-x="1000" />
+<glyph glyph-name="more" unicode="&#xe82f;" d="m313 350c0-52-42-94-94-94s-94 42-94 94s42 94 94 94s94-42 94-94z m468 94c-52 0-93-42-93-94s41-94 93-94s94 42 94 94s-42 94-94 94z m-281 0c-52 0-94-42-94-94c0-52 42-94 94-94s94 42 94 94c0 52-42 94-94 94z" horiz-adv-x="1000" />
+<glyph glyph-name="pause" unicode="&#xe830;" d="m438 37h-188v625h188v-625z m312 1h-187v625h187v-625z" horiz-adv-x="1000" />
+<glyph glyph-name="person" unicode="&#xe832;" d="m501 847c-275 0-497-222-497-497s222-496 497-496s496 222 496 496s-222 497-496 497z m315-801c-25 11-53 26-79 28c-149 12-152 43-152 106c0 47 30 8 52 118c8 36 15 29 36 95c13 47-12 41-12 41s8 35 12 72c10 96-32 187-175 187c-64 0-94-27-133-57c-41-32-55-76-44-130c7-39 21-77 12-72c0 0-22 6-12-41c21-59 32-59 38-95c18-107 47-70 53-118c6-63-7-94-148-106c-25-2-55-16-79-27c-76 79-123 186-123 303c0 242 197 439 439 439s438-197 438-439c0-118-47-226-123-304z" horiz-adv-x="1000" />
+<glyph glyph-name="play" unicode="&#xe816;" d="m250 663l567-313l-567-312" horiz-adv-x="1000" />
+<glyph glyph-name="plus" unicode="&#xe817;" d="m469 725v-750h61l1 750l-62 0l0 0z m406-344h-750v-61l750-1l0 62l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="right-nav" unicode="&#xe818;" d="m291 786l-83-81l372-354l-372-354l83-81l455 435l-455 435z" horiz-adv-x="1000" />
+<glyph glyph-name="search" unicode="&#xe819;" d="m935-10l-279 279c39 54 62 120 62 191c0 181-147 328-328 328s-327-147-327-328s147-327 327-327c71 0 136 22 190 61l279-280l76 76z m-808 470c0 146 118 263 263 263s264-117 264-263s-118-263-264-263s-263 118-263 263z" horiz-adv-x="1000" />
+<glyph glyph-name="share" unicode="&#xe81a;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-406 197v-572h62v572l115-112l42 40l-188 187l-187-187l41-41l115 113z" horiz-adv-x="1000" />
+<glyph glyph-name="star-filled" unicode="&#xe81b;" d="m500 812l116-354l371 0l-300-218l115-353l-301 218l-300-218l114 353l-300 218l371 0l114 354z" horiz-adv-x="1000" />
+<glyph glyph-name="star" unicode="&#xe81c;" d="m987 458l-372 0l-115 354l-114-354l-371 0l301-218l-115-353l301 218l299-218l-115 353l301 218z m-252-478l-234 174l-234-174l99 274l-252 171l295 0l92 290l91-290l296 0l-253-175l100-270z" horiz-adv-x="1000" />
+<glyph glyph-name="stop" unicode="&#xe81d;" d="m812 37h-625v625h625v-625z" horiz-adv-x="1000" />
+<glyph glyph-name="trash" unicode="&#xe81e;" d="m875 725h-250c0 22 0 50 0 62c0 18-15 34-34 34h-182c-19 0-34-16-34-34c0-14 0-41 0-62h-250v-63h69l57-715c0-19 16-34 34-34h432c19 0 34 15 34 34l58 715h66v63z m-459 33c0 14 11 25 24 25h120c13 0 24-11 24-25c0-6 0-20 0-33h-168c0 12 0 26 0 33z m287-757c0-15-11-26-26-26h-355c-14 0-25 11-25 26l-42 661h490l-42-661z m-273 37h-47l-39 562l46 0l40-562z m187 0l-46 0l39 562l47 0l-40-562z m-94 0h-47v562h47v-562z" horiz-adv-x="1000" />
+<glyph glyph-name="check" unicode="&#xe810;" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />
 </font>
 </defs>
 </svg>
--- a/docs/dist/ratchicons/ratchicons.ttf
+++ b/docs/dist/ratchicons/ratchicons.ttf
--- a/docs/dist/ratchicons/ratchicons.woff
+++ b/docs/dist/ratchicons/ratchicons.woff
--- a/docs/examples.html
+++ b/docs/examples.html
@ -0,0 +1,28 @@
+---
+layout: default
+title: Ratchet &middot; Getting Started
+---
+
+<div class="docs-sub-header">
+  {% include masthead.html %}
+  <div class="container">
+    <div class="column-group">
+      <div class="column units-2">
+        <div class="docs-sub-content">
+          <h2 class="page-title">Examples</h2>
+          <p class="page-description">Take a look at some of these example app built on Ratchet.</p>
+        </div>
+      </div>
+    </div>
+    {% include ad.html %}
+  </div>
+  {% include toolbar.html %}
+</div>
+
+<div class="container">
+  <div class="column-group">
+    <div class="column units-2 lg-units-8">
+      <p>Examples will go here</p>
+    </div>
+  </div>
+</div>
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@ -3,63 +3,125 @@ layout: default
 title: Ratchet &middot; Getting Started
 ---

-<!-- Getting started -->
-<div class="docs-outer-wrapper docs-content">
-  <section class="content-section section-informational" id="gettingStarted">
-    <div class="docs-inner-wrapper">
-      <div class="section-header">
-        <h2 class="section-title">Getting started</h2>
-        <p class="section-description">Once you've downloaded Ratchet, here's what to do next.</p>
+<div class="docs-sub-header">
+  {% include masthead.html %}
+  <div class="container">
+    <div class="column-group">
+      <div class="column units-2">
+        <div class="docs-sub-content">
+          <h2 class="page-title">Getting started</h2>
+          <p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p>
+        </div>
      </div>
+    </div>
+    {% include ad.html %}
+  </div>
+</div>

-      <ol class="steps">
+<div class="container">
+  <div class="column-group">
+    <div class="column units-2 lg-units-8">
+      <ol class="docs-steps">
        <li class="step">
-          <div class="step-icon">
-            <span class="icon icon-pages"></span>
-          </div>
-          <h3 class="step-title">Create your pages</h3>
-          <p class="step-description">Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own.</p>
+          <h3 class="step-title">1. Create your pages</h3>
+          <p class="step-description">Use the <a href="/components">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples">example applications</a>. Customize the style too - make the prototype all your own.</p>
        </li>
        <li class="step">
-          <div class="step-icon">
-            <span class="icon icon-refresh"></span>
-          </div>
-          <h3 class="step-title">Connect pages with push.js</h3>
-          <p class="step-description">Read about <a href="#push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
+          <h3 class="step-title">2. Connect pages with push.js</h3>
+          <p class="step-description">Read about <a href="/components/#push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
        </li>
        <li class="step">
-          <div class="step-icon">
-            <span class="icon icon-share"></span>
-          </div>
-          <h3 class="step-title">Save the prototype to your phone</h3>
+          <h3 class="step-title">3. Save the prototype to your phone</h3>
          <p class="step-description">There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen".</p>
        </li>
      </ol>
-    </div>
-  </section>
-</div>

-<!-- Page setup -->
-<section class="content-section section-informational" id="pageSetup">
-  <div class="docs-inner-wrapper">
-    <div class="section-header">
-      <h2 class="section-title">Page setup</h2>
-      <p class="section-description">3 simple rules for structuring your Ratchet pages</p>
-    </div>
+      <hr> 

-    <ol class="steps">
+      <h2>Page setup</h2>
+      <ol class="docs-steps">
+        <li class="step">
+          <h3 class="step-title">1. Fixed bars come first</h3>
+          <p class="step-description">All fixed bars (<code>.bar</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
+        </li>
+        <li class="step">
+          <h3 class="step-title">2. Everything else goes in <code>.content</code></h3>
+          <p class="step-description">Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code>&lt;body&gt;</code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
+        </li>
        <li class="step">
-        <h3 class="step-title">1. Fixed bars come first</h3>
-        <p class="step-description">All fixed bars (<code>.bar-nav, .bar-tab, .bar-header-secondary, .bar-footer</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
-      </li>
-      <li class="step">
-        <h3 class="step-title">2. Everything else goes in <code>.content</code></h3>
-        <p class="step-description">Anything that's not a <code>.bar-</code> should be put in a div with the class "<code>content</code>". Put this div after the bars in the <code>&lt;body&gt;</code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
-      </li>
-      <li class="step">
-        <h3 class="step-title">3. Don't forget your meta tags</h3>
-        <p class="step-description">They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.</p>
-      </li>
-    </ol>
+          <h3 class="step-title">3. Don't forget your meta tags</h3>
+          <p class="step-description">They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.</p>
+        </li>
+      </ol>
+
+
+      <hr> 
+
+      <h2>Basic template</h2>
+{% highlight html %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ratchet template page</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+    <!-- Include the compiled Ratchet CSS -->
+    <link href="ratchet.css" rel="stylesheet">
+
+    <!-- Include the compiled Ratchet JS -->
+    <script src="ratchet.js"></script>
+
+  </head>
+  <body>
+
+    <!-- Make sure all your bars are the first things in your <body> -->
+    <header class="bar bar-nav">
+      <h1 class="title">Ratchet</h1>
+    </header>
+
+    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
+    <div class="content">
+      <p class="content-padded">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p>
+      <div class="card">
+        <ul class="table-view">
+          <li class="table-view-cell">
+            <a class="push-right" href="http://maker.github.io/ratchet/">
+              <strong>Ratchet documentation</strong>
+            </a>
+          </li>
+          <li class="table-view-cell">
+            <a class="push-right" href="https\://www.github.com/maker/ratchet/">
+              <strong>Ratchet on Github</strong>
+            </a>
+          </li>
+          <li class="table-view-cell">
+            <a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
+              <strong>Ratchet Google group</strong>
+            </a>
+          </li>
+          <li class="table-view-cell">
+            <a class="push-right" href="http://www.twitter.com/GoRatchet">
+              <strong>Ratchet on Twitter</strong>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+  </body>
+</html>
+{% endhighlight %}
+    </div>
+  </div>
+  <div class="column units-2">
+    <!-- Footer -->
+    {% include footer.html %}
  </div>
-</section>
+</div>
--- a/sass/docs.scss
+++ b/sass/docs.scss
@ -331,7 +331,12 @@ body {

 // Components
 // --------------------------------------------------
-
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  background-color: #f9f9f9;
+  border-radius: 3px;
+}
 .component {
  padding: 50px 15px;
  margin-left: -15px;
@ -347,14 +352,6 @@ body {
 .component-description {
  margin-bottom: 15px;
  font-size: 16px;
-
-  code {
-    padding: 2px 4px;
-    font-size: 90%;
-    background-color: #f9f9f9;
-    white-space: nowrap;
-    border-radius: 3px;
-  }
 }
 .component-example {
  font-family: $font-family-default;
@ -427,6 +424,18 @@ body {
  white-space: pre;
  word-wrap: normal;
 }
+#ratchicons .icon,
+#ratchiconsInDevice .icon {
+  width: 50px;
+  height: 50px;
+  margin: 3px;
+  font-size: 24px;
+  line-height: 50px;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 25px;
+}
 // Modals
 #modals .modal {
  left: 0;
@ -706,13 +715,25 @@ hr {
    }
  }

-  // Contribution section
-  .docs-contribute {
-    .column {
-      margin-bottom: 0;
-    }
+  // Steps
+  .docs-steps {
+    margin-top: 50px;
+    padding: 0;
+    list-style: none;
+  }
+  .step {
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+  .step-title,
+  .step-description {
+    font-weight: 300;
+  }
+  .step-description {
+    font-size: 18px;
  }

+
  // Content sections
  // --------------------------------------------------
  .section-heading {
--- a/sass/ratchicons.scss
+++ b/sass/ratchicons.scss
@ -21,44 +21,44 @@
  cursor: default;
  -webkit-font-smoothing: antialiased;
 }
+.icon-and-up:before { content: '\e809'; }
 .icon-back:before { content: '\e80a'; }
-.icon-bars:before { content: '\e817'; }
-.icon-caret:before { content: '\e818'; }
-.icon-check:before { content: '\e819'; }
-.icon-close:before { content: '\e81a'; }
-.icon-code:before { content: '\e81b'; }
-.icon-compose:before { content: '\e81c'; }
-.icon-down-nav:before { content: '\e81d'; }
-.icon-down:before { content: '\e80b'; }
-.icon-download:before { content: '\e81e'; }
-.icon-edit:before { content: '\e81f'; }
-.icon-forward:before { content: '\e820'; }
-.icon-gear:before { content: '\e80c'; }
-.icon-home:before { content: '\e821'; }
-.icon-info:before { content: '\e822'; }
-.icon-left-nav:before { content: '\e823'; }
-.icon-left:before { content: '\e80d'; }
-.icon-list:before { content: '\e80e'; }
-.icon-more-vertical:before { content: '\e824'; }
-.icon-more:before { content: '\e825'; }
-.icon-pages:before { content: '\e80f'; }
-.icon-pause:before { content: '\e826'; }
-.icon-person:before { content: '\e827'; }
-.icon-play:before { content: '\e828'; }
-.icon-plus:before { content: '\e829'; }
-.icon-refresh:before { content: '\e810'; }
-.icon-right-nav:before { content: '\e82a'; }
-.icon-right:before { content: '\e811'; }
-.icon-search:before { content: '\e82b'; }
-.icon-share:before { content: '\e82c'; }
-.icon-sound2:before { content: '\e813'; }
-.icon-sound3:before { content: '\e814'; }
-.icon-sound4:before { content: '\e815'; }
-.icon-sound:before { content: '\e812'; }
-.icon-star-filled:before { content: '\e82e'; }
-.icon-star:before { content: '\e82d'; }
-.icon-stop:before { content: '\e82f'; }
-.icon-trash:before { content: '\e830'; }
-.icon-up-nav:before { content: '\e832'; }
-.icon-up:before { content: '\e816'; }
-.icon-user:before { content: '\e831'; }
+.icon-bars:before { content: '\e80e'; }
+.icon-caret:before { content: '\e80f'; }
+.icon-check:before { content: '\e810'; }
+.icon-close:before { content: '\e811'; }
+.icon-code:before { content: '\e812'; }
+.icon-compose:before { content: '\e813'; }
+.icon-down-nav:before { content: '\e814'; }
+.icon-down:before { content: '\e820'; }
+.icon-download:before { content: '\e815'; }
+.icon-edit:before { content: '\e829'; }
+.icon-forward:before { content: '\e82a'; }
+.icon-gear:before { content: '\e821'; }
+.icon-home:before { content: '\e82b'; }
+.icon-info:before { content: '\e82c'; }
+.icon-left-nav:before { content: '\e82d'; }
+.icon-left:before { content: '\e822'; }
+.icon-list:before { content: '\e823'; }
+.icon-more-vertical:before { content: '\e82e'; }
+.icon-more:before { content: '\e82f'; }
+.icon-pages:before { content: '\e824'; }
+.icon-pause:before { content: '\e830'; }
+.icon-person:before { content: '\e832'; }
+.icon-play:before { content: '\e816'; }
+.icon-plus:before { content: '\e817'; }
+.icon-refresh:before { content: '\e825'; }
+.icon-right-nav:before { content: '\e818'; }
+.icon-right:before { content: '\e826'; }
+.icon-search:before { content: '\e819'; }
+.icon-share:before { content: '\e81a'; }
+.icon-sound2:before { content: '\e828'; }
+.icon-sound3:before { content: '\e80b'; }
+.icon-sound4:before { content: '\e80c'; }
+.icon-sound:before { content: '\e827'; }
+.icon-star-filled:before { content: '\e81b'; }
+.icon-star:before { content: '\e81c'; }
+.icon-stop:before { content: '\e81d'; }
+.icon-trash:before { content: '\e81e'; }
+.icon-up-nav:before { content: '\e81f'; }
+.icon-up:before { content: '\e80d'; }