sugarcoat-example-project/index.html at master · sugarcoat/sugarcoat-example-project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:300|Arvo:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="library/styles/global/reset.css" />
  <link rel="stylesheet" type="text/css" href="library/dist/index.css" />
</head>
<body>
  <nav>
    <h1>Sugarcoat</h1>
    <ul>
      <li>
        <a class="btn" href="https://www.npmjs.com/package/sugarcoat">npm <img src="library/images/octicons-external-link.svg" stroke="blue"/></a>
      </li>
      <li>
        <a class="btn" href="https://github.com/sugarcoat/sugarcoat/">github <img src="library/images/octicons-external-link.svg" /></a>
      </li>
      <li>
        <a class="btn cta" href="documentation/index.html">Pattern Library</a>
      </li>
    </ul>
  </nav>
  <main>

    <section>
      <h1>Making UI documentation a bit sweeter &#10024;</h1>
      <p>
        <b>Sugarcoat</b> was created to enable developers to produce rich UI documentation easily and with minimal up-keep. Sugarcoat works by parsing project files for documentation comments (similar to JavaDoc, JSDoc, etc.) and generates HTML or JSON that is organized and easy to read. Sugarcoat allows developers and designers to access up-to-date previews of UI elements, page components, project specific colors and typography, all in one place.
      </p>
      <p>
        <a class="btn cta" href="documentation/index.html">View this site's Pattern Library</a>
      </p>
    </section>

    <section>
      <h2>Features</h2>
      <div class="feature">
        <div class="feature-item">
          <h3>Lives in your project seamlessly</h3>
          <p>Sugarcoat will never dictate your project. It will never force a file/project structure, nor will it ever make you have to create extra files for it to work. Sugarcoat will live within your project seamlessly.</p>
        </div>
        <div class="feature-item">
          <h3>Universal Comment Styles</h3>
          <p>Sugarcoat will parse *all* comment blocks in the file(s) you specify, excluding inline comments. You can use the same JSDoc commenting syntax across all file types. But if you don't want to use JSDoc syntax, you can specify your own delimiters.</p>
        </div>
        <div class="feature-item">
          <h3>Easy-to-identify component states</h3>
          <p>You can tell sugarcoat that there are modifier states in your css, right within your comment block! Sugarcoat will help highlight and display them for extra readability.</p>
        </div>
        <div class="feature-item">
          <h3>Variables Galore</h3>
          <p>Sugarcoat will still understand your variables if they're SCSS, LESS, or even future specs: <code>--my-var</code>.</p>
        </div>
        <div class="feature-item">
          <h3>No Style Bleed</h3>
          <p>The styles that come out of the box with Sugarcoat will not allow for any bleeding of styles into your components or modules. To ensure that your project styles don't bleed, you can provide Sugarcoat with an array of assets for it to prefix. Note: We chose not to use iframes because of their unpredictible resizing (such as a custom dropdown)</p>
        </div>
        <div class="feature-item">
          <h3>Customizable Templates</h3>
          <p>Sugarcoat allows you to define your own templates, partials and assets.</p>
        </div>
      </div>
    </section>

    <section>
      <h2>Sample Comment</h2>
      <p>The feature items above have a comment block in our codebase that would look like this:</p>
      <script src="https://gist.github.com/vbalcom/b0fd14a9f6c56a517aff384ef2dd138a.js"></script>
      <p><a class="btn cta" href="documentation/index.html#sugar-library-styles-feature-defaults-css-0">Pattern Library Output</a></p>
    </section>
  </main>
</body>