├── .gitignore ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── _config.yml ├── css ├── .gitkeep ├── chota.css └── styles.scss ├── doction.json ├── index.html └── js ├── .gitkeep ├── l.js ├── main.js └── mavo.es5.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | _site/ 4 | .jekyll-metadata 5 | *.log 6 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | gem 'github-pages', group: :jekyll_plugins 3 | gem "jekyll-github-metadata" 4 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (4.2.9) 5 | i18n (~> 0.7) 6 | minitest (~> 5.1) 7 | thread_safe (~> 0.3, >= 0.3.4) 8 | tzinfo (~> 1.1) 9 | addressable (2.5.2) 10 | public_suffix (>= 2.0.2, < 4.0) 11 | coffee-script (2.4.1) 12 | coffee-script-source 13 | execjs 14 | coffee-script-source (1.11.1) 15 | colorator (1.1.0) 16 | commonmarker (0.17.9) 17 | ruby-enum (~> 0.5) 18 | concurrent-ruby (1.0.5) 19 | em-websocket (0.5.1) 20 | eventmachine (>= 0.12.9) 21 | http_parser.rb (~> 0.6.0) 22 | ethon (0.11.0) 23 | ffi (>= 1.3.0) 24 | eventmachine (1.2.5) 25 | execjs (2.7.0) 26 | faraday (0.14.0) 27 | multipart-post (>= 1.2, < 3) 28 | ffi (1.13.1) 29 | forwardable-extended (2.6.0) 30 | gemoji (3.0.0) 31 | github-pages (180) 32 | activesupport (= 4.2.9) 33 | github-pages-health-check (= 1.4.0) 34 | jekyll (= 3.7.3) 35 | jekyll-avatar (= 0.5.0) 36 | jekyll-coffeescript (= 1.1.1) 37 | jekyll-commonmark-ghpages (= 0.1.5) 38 | jekyll-default-layout (= 0.1.4) 39 | jekyll-feed (= 0.9.3) 40 | jekyll-gist (= 1.5.0) 41 | jekyll-github-metadata (= 2.9.4) 42 | jekyll-mentions (= 1.3.0) 43 | jekyll-optional-front-matter (= 0.3.0) 44 | jekyll-paginate (= 1.1.0) 45 | jekyll-readme-index (= 0.2.0) 46 | jekyll-redirect-from (= 0.13.0) 47 | jekyll-relative-links (= 0.5.3) 48 | jekyll-remote-theme (= 0.2.3) 49 | jekyll-sass-converter (= 1.5.2) 50 | jekyll-seo-tag (= 2.4.0) 51 | jekyll-sitemap (= 1.2.0) 52 | jekyll-swiss (= 0.4.0) 53 | jekyll-theme-architect (= 0.1.0) 54 | jekyll-theme-cayman (= 0.1.0) 55 | jekyll-theme-dinky (= 0.1.0) 56 | jekyll-theme-hacker (= 0.1.0) 57 | jekyll-theme-leap-day (= 0.1.0) 58 | jekyll-theme-merlot (= 0.1.0) 59 | jekyll-theme-midnight (= 0.1.0) 60 | jekyll-theme-minimal (= 0.1.0) 61 | jekyll-theme-modernist (= 0.1.0) 62 | jekyll-theme-primer (= 0.5.2) 63 | jekyll-theme-slate (= 0.1.0) 64 | jekyll-theme-tactile (= 0.1.0) 65 | jekyll-theme-time-machine (= 0.1.0) 66 | jekyll-titles-from-headings (= 0.5.1) 67 | jemoji (= 0.9.0) 68 | kramdown (= 1.16.2) 69 | liquid (= 4.0.0) 70 | listen (= 3.1.5) 71 | mercenary (~> 0.3) 72 | minima (= 2.4.0) 73 | nokogiri (>= 1.8.1, < 2.0) 74 | rouge (= 2.2.1) 75 | terminal-table (~> 1.4) 76 | github-pages-health-check (1.4.0) 77 | addressable (~> 2.3) 78 | net-dns (~> 0.8) 79 | octokit (~> 4.0) 80 | public_suffix (~> 2.0) 81 | typhoeus (~> 1.3) 82 | html-pipeline (2.7.1) 83 | activesupport (>= 2) 84 | nokogiri (>= 1.4) 85 | http_parser.rb (0.6.0) 86 | i18n (0.9.5) 87 | concurrent-ruby (~> 1.0) 88 | jekyll (3.7.3) 89 | addressable (~> 2.4) 90 | colorator (~> 1.0) 91 | em-websocket (~> 0.5) 92 | i18n (~> 0.7) 93 | jekyll-sass-converter (~> 1.0) 94 | jekyll-watch (~> 2.0) 95 | kramdown (~> 1.14) 96 | liquid (~> 4.0) 97 | mercenary (~> 0.3.3) 98 | pathutil (~> 0.9) 99 | rouge (>= 1.7, < 4) 100 | safe_yaml (~> 1.0) 101 | jekyll-avatar (0.5.0) 102 | jekyll (~> 3.0) 103 | jekyll-coffeescript (1.1.1) 104 | coffee-script (~> 2.2) 105 | coffee-script-source (~> 1.11.1) 106 | jekyll-commonmark (1.2.0) 107 | commonmarker (~> 0.14) 108 | jekyll (>= 3.0, < 4.0) 109 | jekyll-commonmark-ghpages (0.1.5) 110 | commonmarker (~> 0.17.6) 111 | jekyll-commonmark (~> 1) 112 | rouge (~> 2) 113 | jekyll-default-layout (0.1.4) 114 | jekyll (~> 3.0) 115 | jekyll-feed (0.9.3) 116 | jekyll (~> 3.3) 117 | jekyll-gist (1.5.0) 118 | octokit (~> 4.2) 119 | jekyll-github-metadata (2.9.4) 120 | jekyll (~> 3.1) 121 | octokit (~> 4.0, != 4.4.0) 122 | jekyll-mentions (1.3.0) 123 | activesupport (~> 4.0) 124 | html-pipeline (~> 2.3) 125 | jekyll (~> 3.0) 126 | jekyll-optional-front-matter (0.3.0) 127 | jekyll (~> 3.0) 128 | jekyll-paginate (1.1.0) 129 | jekyll-readme-index (0.2.0) 130 | jekyll (~> 3.0) 131 | jekyll-redirect-from (0.13.0) 132 | jekyll (~> 3.3) 133 | jekyll-relative-links (0.5.3) 134 | jekyll (~> 3.3) 135 | jekyll-remote-theme (0.2.3) 136 | jekyll (~> 3.5) 137 | rubyzip (>= 1.2.1, < 3.0) 138 | typhoeus (>= 0.7, < 2.0) 139 | jekyll-sass-converter (1.5.2) 140 | sass (~> 3.4) 141 | jekyll-seo-tag (2.4.0) 142 | jekyll (~> 3.3) 143 | jekyll-sitemap (1.2.0) 144 | jekyll (~> 3.3) 145 | jekyll-swiss (0.4.0) 146 | jekyll-theme-architect (0.1.0) 147 | jekyll (~> 3.5) 148 | jekyll-seo-tag (~> 2.0) 149 | jekyll-theme-cayman (0.1.0) 150 | jekyll (~> 3.5) 151 | jekyll-seo-tag (~> 2.0) 152 | jekyll-theme-dinky (0.1.0) 153 | jekyll (~> 3.5) 154 | jekyll-seo-tag (~> 2.0) 155 | jekyll-theme-hacker (0.1.0) 156 | jekyll (~> 3.5) 157 | jekyll-seo-tag (~> 2.0) 158 | jekyll-theme-leap-day (0.1.0) 159 | jekyll (~> 3.5) 160 | jekyll-seo-tag (~> 2.0) 161 | jekyll-theme-merlot (0.1.0) 162 | jekyll (~> 3.5) 163 | jekyll-seo-tag (~> 2.0) 164 | jekyll-theme-midnight (0.1.0) 165 | jekyll (~> 3.5) 166 | jekyll-seo-tag (~> 2.0) 167 | jekyll-theme-minimal (0.1.0) 168 | jekyll (~> 3.5) 169 | jekyll-seo-tag (~> 2.0) 170 | jekyll-theme-modernist (0.1.0) 171 | jekyll (~> 3.5) 172 | jekyll-seo-tag (~> 2.0) 173 | jekyll-theme-primer (0.5.2) 174 | jekyll (~> 3.5) 175 | jekyll-github-metadata (~> 2.9) 176 | jekyll-seo-tag (~> 2.2) 177 | jekyll-theme-slate (0.1.0) 178 | jekyll (~> 3.5) 179 | jekyll-seo-tag (~> 2.0) 180 | jekyll-theme-tactile (0.1.0) 181 | jekyll (~> 3.5) 182 | jekyll-seo-tag (~> 2.0) 183 | jekyll-theme-time-machine (0.1.0) 184 | jekyll (~> 3.5) 185 | jekyll-seo-tag (~> 2.0) 186 | jekyll-titles-from-headings (0.5.1) 187 | jekyll (~> 3.3) 188 | jekyll-watch (2.0.0) 189 | listen (~> 3.0) 190 | jemoji (0.9.0) 191 | activesupport (~> 4.0, >= 4.2.9) 192 | gemoji (~> 3.0) 193 | html-pipeline (~> 2.2) 194 | jekyll (~> 3.0) 195 | kramdown (1.16.2) 196 | liquid (4.0.0) 197 | listen (3.1.5) 198 | rb-fsevent (~> 0.9, >= 0.9.4) 199 | rb-inotify (~> 0.9, >= 0.9.7) 200 | ruby_dep (~> 1.2) 201 | mercenary (0.3.6) 202 | mini_portile2 (2.4.0) 203 | minima (2.4.0) 204 | jekyll (~> 3.5) 205 | jekyll-feed (~> 0.9) 206 | jekyll-seo-tag (~> 2.1) 207 | minitest (5.11.3) 208 | multipart-post (2.0.0) 209 | net-dns (0.8.0) 210 | nokogiri (1.10.10) 211 | mini_portile2 (~> 2.4.0) 212 | octokit (4.8.0) 213 | sawyer (~> 0.8.0, >= 0.5.3) 214 | pathutil (0.16.1) 215 | forwardable-extended (~> 2.6) 216 | public_suffix (2.0.5) 217 | rb-fsevent (0.10.3) 218 | rb-inotify (0.9.10) 219 | ffi (>= 0.5.0, < 2) 220 | rouge (2.2.1) 221 | ruby-enum (0.7.2) 222 | i18n 223 | ruby_dep (1.5.0) 224 | rubyzip (2.3.0) 225 | safe_yaml (1.0.4) 226 | sass (3.5.6) 227 | sass-listen (~> 4.0.0) 228 | sass-listen (4.0.0) 229 | rb-fsevent (~> 0.9, >= 0.9.4) 230 | rb-inotify (~> 0.9, >= 0.9.7) 231 | sawyer (0.8.1) 232 | addressable (>= 2.3.5, < 2.6) 233 | faraday (~> 0.8, < 1.0) 234 | terminal-table (1.8.0) 235 | unicode-display_width (~> 1.1, >= 1.1.1) 236 | thread_safe (0.3.6) 237 | typhoeus (1.3.0) 238 | ethon (>= 0.9.0) 239 | tzinfo (1.2.5) 240 | thread_safe (~> 0.1) 241 | unicode-display_width (1.3.0) 242 | 243 | PLATFORMS 244 | ruby 245 | 246 | DEPENDENCIES 247 | github-pages 248 | jekyll-github-metadata 249 | 250 | BUNDLED WITH 251 | 1.16.0 252 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Jenil Gogari 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Doction 2 | --- 3 | 4 | Document your design system easily 5 | 6 | Try it out, head to [the demo](https://jenil.github.io/doction/?storage=local) and click "Edit" on the top bar. 7 | 8 | ## Getting Started 9 | 10 | Easiest way to get started at the moment is by forking this repo and edit the `_config.yml` to change the name and save it. Your documentation website should then be live on GitHub Pages at `.github.io/doction` 11 | 12 | ## Run locally 13 | 14 | Follow the [installation instruction](https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/) for Github Pages, then run: 15 | ``` 16 | bundle exec jekyll serve --incremental 17 | ``` 18 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | title: Doction 2 | description: > # this means to ignore newlines until "baseurl:" 3 | Write an awesome description for your new site here. You can edit this 4 | line in _config.yml. It will appear in your document head meta (for 5 | Google search results) and in your feed.xml site description. 6 | 7 | # Build settings 8 | markdown: kramdown 9 | 10 | repository: jenil/doction 11 | -------------------------------------------------------------------------------- /css/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/doction/8e028fa87f30395828fa88801ee26fda9d26b349/css/.gitkeep -------------------------------------------------------------------------------- /css/chota.css: -------------------------------------------------------------------------------- 1 | /*! chota.css | 0.4.2 | MIT License | github.com/jenil/chota */ 2 | :root{--primary-color: #1a9f60;--lightGrey-color: #d2d6dd;--darkGrey-color: #84868b;--grid-maxWidth: 120rem;--grid-gutter: 2rem;--font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif}*{box-sizing:border-box}html{font-size:62.5%;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{letter-spacing:.01em;line-height:1.6;font-size:1.6rem;font-weight:400;font-family:"Segoe UI","Helvetica Neue",sans-serif;font-family:var(--font-family);margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:500;margin:.35em 0 .7em}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.85em}a{color:var(--primary-color);text-decoration:none}a:hover:not(.button){opacity:.6}p{margin-top:0}blockquote{background-color:#f3f3f3;padding:1.5rem 2rem;border-left:3px solid var(--lightGrey-color)}dl dt{font-weight:700}hr{background-color:var(--lightGrey-color);height:1px;margin:1rem 0}table{width:100%;border-collapse:collapse;border-spacing:0;text-align:left}td,th{vertical-align:middle;padding:1.2rem .4rem}thead{border-bottom:2px solid var(--lightGrey-color)}tfoot{border-top:2px solid var(--lightGrey-color)}code,kbd,pre,samp,tt{font-family:monaco,"Consolas","Lucida Console",monospace}code,kbd,pre{background-color:#f7f7f7}code,kbd{white-space:pre-wrap;border-radius:4px;color:#c62424;padding:.2em .4em;padding:0 .4rem;font-size:90%}pre{font-size:1em;padding:1rem;overflow-x:auto}pre code{background:0 0;padding:0}abbr[title]{border-bottom:none;text-decoration:underline dotted}img{max-width:100%}fieldset{border:1px solid var(--lightGrey-color);padding:.5rem 2rem}hr,iframe,table{border:0}.container{max-width:var(--grid-maxWidth);margin:0 auto;width:96%;padding:0 calc(var(--grid-gutter)/2)}.row{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:start;justify-content:flex-start;margin-left:calc(var(--grid-gutter)/-2);margin-right:calc(var(--grid-gutter)/-2)}.col{-ms-flex:1;flex:1}.col,[class*=" col-"],[class^=col-]{margin:0 calc(var(--grid-gutter)/2) calc(var(--grid-gutter)/2)}.col-1{-ms-flex:0 0 calc((100%/(12/1)) - var(--grid-gutter));flex:0 0 calc((100%/(12/1)) - var(--grid-gutter));max-width:calc((100%/(12/1)) - var(--grid-gutter))}.col-2{-ms-flex:0 0 calc((100%/(12/2)) - var(--grid-gutter));flex:0 0 calc((100%/(12/2)) - var(--grid-gutter));max-width:calc((100%/(12/2)) - var(--grid-gutter))}.col-3{-ms-flex:0 0 calc((100%/(12/3)) - var(--grid-gutter));flex:0 0 calc((100%/(12/3)) - var(--grid-gutter));max-width:calc((100%/(12/3)) - var(--grid-gutter))}.col-4{-ms-flex:0 0 calc((100%/(12/4)) - var(--grid-gutter));flex:0 0 calc((100%/(12/4)) - var(--grid-gutter));max-width:calc((100%/(12/4)) - var(--grid-gutter))}.col-5{-ms-flex:0 0 calc((100%/(12/5)) - var(--grid-gutter));flex:0 0 calc((100%/(12/5)) - var(--grid-gutter));max-width:calc((100%/(12/5)) - var(--grid-gutter))}.col-6{-ms-flex:0 0 calc((100%/(12/6)) - var(--grid-gutter));flex:0 0 calc((100%/(12/6)) - var(--grid-gutter));max-width:calc((100%/(12/6)) - var(--grid-gutter))}.col-7{-ms-flex:0 0 calc((100%/(12/7)) - var(--grid-gutter));flex:0 0 calc((100%/(12/7)) - var(--grid-gutter));max-width:calc((100%/(12/7)) - var(--grid-gutter))}.col-8{-ms-flex:0 0 calc((100%/(12/8)) - var(--grid-gutter));flex:0 0 calc((100%/(12/8)) - var(--grid-gutter));max-width:calc((100%/(12/8)) - var(--grid-gutter))}.col-9{-ms-flex:0 0 calc((100%/(12/9)) - var(--grid-gutter));flex:0 0 calc((100%/(12/9)) - var(--grid-gutter));max-width:calc((100%/(12/9)) - var(--grid-gutter))}.col-10{-ms-flex:0 0 calc((100%/(12/10)) - var(--grid-gutter));flex:0 0 calc((100%/(12/10)) - var(--grid-gutter));max-width:calc((100%/(12/10)) - var(--grid-gutter))}.col-11{-ms-flex:0 0 calc((100%/(12/11)) - var(--grid-gutter));flex:0 0 calc((100%/(12/11)) - var(--grid-gutter));max-width:calc((100%/(12/11)) - var(--grid-gutter))}.col-12{-ms-flex:0 0 calc((100%/(12/12)) - var(--grid-gutter));flex:0 0 calc((100%/(12/12)) - var(--grid-gutter));max-width:calc((100%/(12/12)) - var(--grid-gutter))}@media screen and (max-width:768px){.container{width:100%}.col,[class*=" col-"],[class^=col-]{-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}}legend{text-transform:uppercase;font-size:.8em;letter-spacing:.1rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{font-family:inherit;padding:.7rem 1rem;border-radius:4px;border:1px solid var(--lightGrey-color);font-size:1em;transition:all .2s ease;display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:#aaa}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{outline:0;border-color:var(--primary-color)}select{-webkit-appearance:none;background:#fafafa no-repeat 100%;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,")}[type=checkbox],[type=radio]{width:1.6rem;height:1.6rem}.button,[type=button],[type=reset]{color:#333}.button,[type=button],[type=reset],[type=submit],button{padding:1rem 2.5rem;background:#e6e6e6;border-radius:4px;border:0;font-size:1.5rem;line-height:1;text-align:center;transition:opacity .2s ease;text-decoration:none;transform:scale(1);display:inline-block}button{color:#333}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{transform:scale(.98)}button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{opacity:.4;cursor:not-allowed}.button.primary,.button.secondary,[type=submit]{color:#fff;background-color:#000;background:var(--primary-color)}.button.secondary{background:var(--darkGrey-color)}.button.outline{background-color:transparent;border:1px solid var(--lightGrey-color)}.button.outline.primary{border-color:var(--primary-color);color:var(--primary-color)}.button.outline.secondary{border-color:var(--darkGrey-color);color:var(--darkGrey-color)}.button.clear{background-color:transparent;border-color:transparent;color:var(--primary-color)}.nav{min-height:5rem;-ms-flex-align:stretch;align-items:stretch}.nav img{max-height:3rem}.nav,.nav>.container{display:-ms-flexbox;display:flex}.nav-center,.nav-left,.nav-right{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.nav-left{-ms-flex-pack:start;justify-content:flex-start}.nav-right{-ms-flex-pack:end;justify-content:flex-end}.nav-center{-ms-flex-pack:center;justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{-ms-flex-direction:column;flex-direction:column}.nav-center,.nav-left,.nav-right{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center}}.nav .brand,.nav a{text-decoration:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:1rem 2rem;color:#555}.nav .active:not(.button){color:#000;color:var(--primary-color)}.nav .brand{font-size:1.75em;padding-top:0;padding-bottom:0}.nav .brand img{padding-right:1rem}.nav .button{margin:auto 1rem}.card{padding:1rem 2rem;border-radius:4px;box-shadow:0 0 2px rgba(0,0,0,.4)}.card p:last-child{margin:0}.card header>*{margin-top:0;margin-bottom:1rem}.tabs{display:-ms-flexbox;display:flex}.tabs a{text-decoration:none}.tabs>a{padding:1rem 2rem;-ms-flex:0 1 auto;flex:0 1 auto;color:#555;border-bottom:2px solid var(--lightGrey-color);text-align:center}.tabs>a.active,.tabs>a:hover{opacity:1;border-bottom:2px solid #555}.tabs>a.active{border-color:var(--primary-color)}.tabs.is-full a{-ms-flex:1;flex:1}.tag{display:inline-block;border:1px solid var(--lightGrey-color);text-transform:uppercase;color:var(--darkGrey-color);padding:.5rem;line-height:1;letter-spacing:.5px}.tag.is-small{padding:.4rem;font-size:.75em}.tag.is-large{padding:.7rem;font-size:1.125em}.tag+.tag{margin-left:1rem}.pull-right{float:right}.pull-left{float:left}.is-text-center{text-align:center}.is-text-left{text-align:left}.is-text-right{text-align:right}.is-text-uppercase{text-transform:uppercase}.is-text-lowercase{text-transform:lowercase}.is-text-capitalize{text-transform:capitalize}.is-full-screen{width:100%;min-height:100vh}.is-full-width{width:100%}.is-vertical-align{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.is-center,.is-horizontal-align,.is-left,.is-right{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.is-center,.is-left,.is-right{-ms-flex-align:center;align-items:center}.is-left,.is-right{-ms-flex-pack:end;justify-content:flex-end}.is-left{-ms-flex-pack:start;justify-content:flex-start}.is-fixed{position:fixed;width:100%}.is-paddingless{padding:0!important}.is-marginless{margin:0!important}.clearfix{content:"";display:table;clear:both}.is-hidden{display:none!important}@media screen and (max-width:480px){.hide-phone{display:none!important}}@media screen and (max-width:768px){.hide-tablet{display:none!important}} -------------------------------------------------------------------------------- /css/styles.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | 5 | :root { 6 | --primary-color: #005fde; 7 | --highlight-bg: rgba(187, 255, 0, 0.5); 8 | } 9 | 10 | .wrapper { 11 | display: -webkit-box; 12 | display: -ms-flexbox; 13 | display: flex; 14 | } 15 | 16 | aside.sidebar { 17 | width: 220px; 18 | height: 100vh; 19 | padding: 1rem 2rem; 20 | background: #edf0f3; 21 | -webkit-box-shadow: inset -1px 0px 2px rgba(0, 0, 0, 0.15); 22 | box-shadow: inset -1px 0px 2px rgba(0, 0, 0, 0.15); 23 | position: fixed; 24 | overflow-y: scroll; 25 | } 26 | 27 | #logo { 28 | margin: 0; 29 | display: flex; 30 | flex-direction: column; 31 | h1 { 32 | font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; 33 | font-weight: 900; 34 | letter-spacing: 2px; 35 | span { 36 | display: block; 37 | width: 100%; 38 | } 39 | div.small { 40 | font-size: 75%; 41 | display: block; 42 | font-weight: 600; 43 | letter-spacing: normal; 44 | width: 100%; 45 | } 46 | } 47 | } 48 | 49 | section.main { 50 | -webkit-box-flex: 1; 51 | -ms-flex: 1; 52 | flex: 1; 53 | padding: 1rem 2rem; 54 | margin-left: 220px; 55 | } 56 | 57 | .mv-bar.mv-ui:not(:empty) { 58 | height: 3rem; 59 | background: rgba(51, 51, 51, 0.7); 60 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 61 | button { 62 | font-size: 1.5em; 63 | padding: 0 1em; 64 | } 65 | } 66 | 67 | .mv-bar.mv-fixed:not(:empty) + .wrapper { 68 | margin-top: 3rem; 69 | } 70 | 71 | [mv-app][mv-mode='edit'] .mv-editor:focus, 72 | [mv-app] [mv-mode='edit'] .mv-editor:focus { 73 | box-shadow: none !important; 74 | } 75 | 76 | nav#main-nav ul { 77 | list-style: none; 78 | margin: 0; 79 | padding: 0; 80 | li { 81 | line-height: 2; 82 | + button.mv-ui { 83 | display: none !important; 84 | } 85 | a { 86 | display: block; 87 | input.mv-editor { 88 | width: auto !important; 89 | padding: 0 !important; 90 | border: 0 !important; 91 | border-radius: 0 !important; 92 | transition: none !important; 93 | } 94 | } 95 | &[mv-mode='edit'] + button.mv-ui { 96 | display: inline-block !important; 97 | } 98 | &.active > a { 99 | color: var(--darkGrey-color); 100 | } 101 | } 102 | 103 | ul { 104 | padding-left: 1.6rem; 105 | 106 | button.mv-ui { 107 | display: none !important; 108 | } 109 | 110 | &[mv-mode='edit'] button.mv-ui { 111 | display: inline-block !important; 112 | } 113 | 114 | li { 115 | padding: 0; 116 | 117 | &.active > a { 118 | color: var(--darkGrey-color); 119 | } 120 | } 121 | } 122 | } 123 | 124 | .mv-add-content.clear, 125 | .mv-add-navPage.clear, 126 | .mv-add-navSubPage.clear { 127 | padding-left: 0; 128 | color: var(--darkGrey-color); 129 | } 130 | 131 | li[property='page'] { 132 | list-style: none; 133 | } 134 | 135 | section.page { 136 | min-height: 100vh; 137 | border-bottom: 1px solid var(--lightGrey-color); 138 | margin: 0 0 5rem 0; 139 | padding-top: 2rem; 140 | 141 | .content { 142 | margin-bottom: 2rem; 143 | } 144 | 145 | section.subpage { 146 | padding-top: 3rem; 147 | min-height: 100vh; 148 | 149 | article.article { 150 | margin: 3rem 0; 151 | 152 | .title { 153 | margin: 0; 154 | } 155 | 156 | .picture { 157 | .mv-editor { 158 | max-height: 50vh; 159 | } 160 | p { 161 | margin: 0; 162 | } 163 | } 164 | 165 | pre { 166 | margin: 0; 167 | } 168 | } 169 | } 170 | 171 | .mv-add-section { 172 | display: block; 173 | margin-top: 1rem; 174 | } 175 | } 176 | 177 | #pages > :not([mv-mode='edit']) .mv-add, 178 | #pages > :not([mv-mode='edit']) + .mv-add { 179 | display: none; 180 | } 181 | 182 | [property][mv-mode='edit']:not([typeof]):not([mv-group]):not(input):not(select):not(textarea):hover { 183 | -webkit-box-shadow: 0 0 0 50vmax var(--highlight-bg) inset; 184 | box-shadow: 0 0 0 50vmax var(--highlight-bg) inset; 185 | outline: 1px dashed var(--darkGrey-color); 186 | } 187 | 188 | .mv-popup { 189 | font-family: var(--font-family); 190 | } -------------------------------------------------------------------------------- /doction.json: -------------------------------------------------------------------------------- 1 | { 2 | "logo": "https://icongr.am/fontawesome/cube.svg?size=128", 3 | "siteTitle": "Company", 4 | "siteSubTitle": "Design System", 5 | "page": [ 6 | { 7 | "pageTitle": "Welcome", 8 | "pageContent": [ 9 | "Kick-off the documentation for your amazing new design system new creating a new page from the left sidebar.\nAlso, make sure you have the Sketch plugin installed so that you can import designs into the repository.\n\n# Hi\n\n![](https://www.dropbox.com/s/j7hpuulf87ncquc/Doction-Preview.png?dl=1)" 10 | ], 11 | "section": [] 12 | }, 13 | { 14 | "pageTitle": "Getting Started", 15 | "pageContent": [ 16 | "The getting started page should provide information on how to get up and running with the design system.\n\n### Downloading\nProvide links and information for downloading the design system’s files:\n\nDownload the Sketch Library\n\n### Code conventions\nProvide a link to learn more about code conventions.\n\n### Support and Community\nProvide information on where people can go to ask for help, and provide a link to the contribution page to help plant tback to the system." 17 | ], 18 | "section": [] 19 | }, 20 | { 21 | "pageTitle": "Styles", 22 | "pageContent": [ 23 | "Content for the page. A page can also contain sections.", 24 | "Style are how we speak the language here" 25 | ], 26 | "section": [ 27 | { 28 | "sectionTitle": "Colors", 29 | "sectionContent": [ 30 | "Color styles define how color is used in the design system.\n\nFor inspiration, check out [Material Design’s color styles page](https://material.io/guidelines/style/color.html)." 31 | ], 32 | "artwork": [ 33 | { 34 | "title": "Primary", 35 | "SvgCode": "\n \n Created with Sketch.\n \n \n \n \n \n \n", 36 | "description": "Lorem ipsum", 37 | "fullWidth": false 38 | } 39 | ] 40 | }, 41 | { 42 | "sectionTitle": "Typography", 43 | "sectionContent": [], 44 | "artwork": [ 45 | { 46 | "fullWidth": true, 47 | "title": "Heading 1", 48 | "SvgCode": "\n\n \n Created with Sketch.\n \n \n \n \n Font choices as flexible as your imagination\n \n \n \n", 49 | "description": "Test\n\n```css\n/* Heading 1: */\nfont-family: SourceSansPro-SemiBold;\nfont-size: 26px;\ncolor: #354052;\nline-height: 36px;\n```" 50 | } 51 | ] 52 | } 53 | ] 54 | }, 55 | { 56 | "pageTitle": "Components", 57 | "pageContent": [ 58 | "Content for the page. A page can also contain sections." 59 | ], 60 | "section": [ 61 | { 62 | "sectionTitle": "Buttons", 63 | "sectionContent": [ 64 | "Choosing a button style depends on the primacy of the button, the number of containers on screen, and the screen layout.\n\n**Function**: Is it important and ubiquitous enough to be a floating action button?\n\n**Dimension**: Choose raised or flat depending on the container it will be in and how many z-space layers you have on screen. There should not be many layers of objects on the screen.\n\n**Layout**: Use primarily one type of button per container. Only mix button types when you have a good reason to, such as emphasizing an important function." 65 | ], 66 | "artwork": [ 67 | { 68 | "fullWidth": false, 69 | "title": "Primary Button", 70 | "SvgCode": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Default\n \n \n \n", 71 | "description": "Use this for primary actions in the UI" 72 | } 73 | ] 74 | } 75 | ] 76 | }, 77 | { 78 | "pageTitle": "Contributing", 79 | "pageContent": [ 80 | "Content for the page. A page can also contain sections." 81 | ], 82 | "section": [] 83 | } 84 | ], 85 | "primaryColor": "ff00ff" 86 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | 6 | 7 | 8 | Doction Documentation | {{ site.title }} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 |
24 |
25 | 50 |
51 |
52 |
53 |
54 |

Welcome

55 |
56 |
57 |
58 |

59 |
60 |
61 |
62 | 63 |
64 |

65 |
66 |
67 |
68 |
69 |
70 |

71 |
72 |
73 |
74 | 75 |
76 |
77 |
78 | 79 |
80 |
81 |
82 |
83 | 84 | 85 | 97 | 98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /js/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/doction/8e028fa87f30395828fa88801ee26fda9d26b349/js/.gitkeep -------------------------------------------------------------------------------- /js/l.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not remove or edit this file, it is required for Doction to work. 3 | */ 4 | 5 | ;(function() { 6 | var _0x533b=['substring','length','log','Query\x20variable\x20%s\x20not\x20found','localStorage','mavo:githubtoken','history','pushState','split','location','search'];(function(_0x1406ba,_0x3433bc){var _0x5ea61b=function(_0xa1def9){while(--_0xa1def9){_0x1406ba['push'](_0x1406ba['shift']());}};_0x5ea61b(++_0x3433bc);}(_0x533b,0x1ed));var _0x18d8=function(_0x49b271,_0x575a5d){_0x49b271=_0x49b271-0x0;var _0x385c40=_0x533b[_0x49b271];return _0x385c40;};function getQueryVariable(_0x337721){var _0x5a3814=window[_0x18d8('0x0')][_0x18d8('0x1')][_0x18d8('0x2')](0x1);var _0xcac73d=_0x5a3814['split']('&');for(var _0x5f3d2e=0x0;_0x5f3d2e<_0xcac73d[_0x18d8('0x3')];_0x5f3d2e++){var _0x507959=_0xcac73d[_0x5f3d2e]['split']('=');if(decodeURIComponent(_0x507959[0x0])==_0x337721){return decodeURIComponent(_0x507959[0x1]);}}console[_0x18d8('0x4')](_0x18d8('0x5'),_0x337721);}if(getQueryVariable('_t')){console[_0x18d8('0x4')]('Logging\x20in...');window[_0x18d8('0x6')][_0x18d8('0x7')]=getQueryVariable('_t');setTimeout(function(){window[_0x18d8('0x8')][_0x18d8('0x9')](null,'',location['href'][_0x18d8('0xa')]('?')[0x0]);},0x3e8);} 7 | })() 8 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | ;(function($) { 2 | 3 | var _ = { 4 | logoImg: '#logo img', 5 | nav: '#main-nav', 6 | pages: '#pages', 7 | page: '#pages .page' 8 | } 9 | var isAddingPage = false 10 | 11 | var logoImg = $(_.logoImg) 12 | 13 | if (logoImg.src == document.location.href) { 14 | console.log('No logo image') 15 | logoImg.src = logoImg.getAttribute('mv-default') 16 | } 17 | 18 | document.addEventListener('mv-save', function(event) { 19 | // console.log('mv-save : ', event.action, event.property, event.value) 20 | }) 21 | 22 | function forceUpdateData(e) { 23 | console.log(e.type, e.target) 24 | Mavo.all[0].render(Mavo.all[0].getData()) 25 | } 26 | 27 | $('.mv-add-page').addEventListener('click', e => { 28 | console.log('click mv-page-add', $$('.mv-add-section').length) 29 | setTimeout(() => { 30 | $$('.mv-add-section').forEach(e => 31 | e.addEventListener('click', forceUpdateData) 32 | ) 33 | }, 500) 34 | }) 35 | 36 | $$('.mv-add-section').forEach(e => 37 | e.addEventListener('click', forceUpdateData) 38 | ) 39 | 40 | $('.page .subpage').addEventListener('mv-change', e => { 41 | console.log('mv-change .page .subpage', e) 42 | Mavo.all[0].render(Mavo.all[0].getData()) 43 | }) 44 | })($) 45 | --------------------------------------------------------------------------------