updates docs

11 years ago · 045879b036
4 changed files with 144 additions and 46 deletions
--- a/server/documents/elements/button.html.eco
+++ b/server/documents/elements/button.html.eco
@ -29,6 +29,31 @@ type        : 'UI Element'
    </div>
  </div>

+  <div class="example">
+    <h4 class="ui header">Animated</h4>
+    <p>A button can animate to show hidden content</p>
+    <div class="ui ignored message">The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show</div>
+    <div class="ui animated button">
+      <div class="visible content">Next</div>
+      <div class="hidden content">
+        <i class="right arrow icon"</i></i>
+      </div>
+    </div>
+    <div class="ui vertical animated button">
+      <div class="hidden content">Shop</div>
+      <div class="visible content">
+        <i class="cart icon"</i></i>
+      </div>
+    </div>
+    <div class="ui animated fade button">
+      <div class="visible content">Buy</div>
+      <div class="hidden content">
+        $12.99
+      </div>
+    </div>
+  </div>
+
+
  <div class="example">
    <h4 class="ui header">Icon</h4>
    <p>A button can have only an icon</p>
@ -61,6 +86,23 @@ type        : 'UI Element'
    </div>
  </div>

+  <div class="example">
+    <h4 class="ui header">Icons</h4>
+    <p>Button groups can show groups of icons</p>
+    <div class="ui icon buttons">
+      <div class="ui button"><i class="align left icon"></i></div>
+      <div class="ui button"><i class="align center icon"></i></div>
+      <div class="ui button"><i class="align right icon"></i></div>
+      <div class="ui button"><i class="align justify icon"></i></div>
+    </div>
+    <div class="ui icon buttons">
+      <div class="ui button"><i class="bold icon"></i></div>
+      <div class="ui button"><i class="underline icon"></i></div>
+      <div class="ui button"><i class="text width icon"></i></div>
+    </div>
+  </div>
+
+
  <div class="example">
    <h4 class="ui header">Conditionals</h4>
    <p>Button groups can be separated by conditionals</p>
@ -340,11 +382,54 @@ type        : 'UI Element'
  <div class="example">
    <h4 class="ui header">Sizes</h4>
    <p>Groups can have a shared size</p>
+    <div class="huge ui buttons">
+      <div class="ui button">One</div>
+      <div class="ui button">Two</div>
+      <div class="ui button">Three</div>
+    </div>
    <div class="large ui buttons">
      <div class="ui button">One</div>
      <div class="ui button">Two</div>
      <div class="ui button">Three</div>
    </div>
  </div>
+  <div class="another example">
+    <div class="small icon ui buttons">
+      <div class="ui button"><i class="align left icon"></i></div>
+      <div class="ui button"><i class="align center icon"></i></div>
+      <div class="ui button"><i class="align right icon"></i></div>
+      <div class="ui button"><i class="align justify icon"></i></div>
+    </div>
+    <div class="tiny icon ui buttons">
+      <div class="ui button"><i class="align left icon"></i></div>
+      <div class="ui button"><i class="align center icon"></i></div>
+      <div class="ui button"><i class="align right icon"></i></div>
+      <div class="ui button"><i class="align justify icon"></i></div>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui huge buttons">
+      <div class="ui button">One</div>
+      <div class="or"></div>
+      <div class="ui button">Two</div>
+    </div>
+    <div class="ui large buttons">
+      <div class="ui button">One</div>
+      <div class="or"></div>
+      <div class="ui button">Two</div>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui small buttons">
+      <div class="ui button">One</div>
+      <div class="or"></div>
+      <div class="ui button">Two</div>
+    </div>
+    <div class="ui tiny buttons">
+      <div class="ui button">One</div>
+      <div class="or"></div>
+      <div class="ui button">Two</div>
+    </div>
+  </div>

 </div>
--- a/server/documents/elements/input.html.eco
+++ b/server/documents/elements/input.html.eco
@ -112,8 +112,8 @@ type        : 'UI Element'
  </div>
  <div class="another example">
    <div class="ui action input">
-      <input type="text" placeholder="Username">
-      <div class="ui teal button"><i class="user icon"></i> Add users</div>
+      <input type="text" value="http://ww.short.url/c0opq">
+      <div class="ui teal right labeled icon button"><i class="copy icon"></i> Copy</div>
    </div>
  </div>
  <div class="another example">
--- a/server/documents/project/contributing.html.eco
+++ b/server/documents/project/contributing.html.eco
@ -1,6 +1,6 @@
  ---
 layout      : 'default'
-css         : 'contribute'
+css         : 'guide'

 title       : 'Contributing'
 description : 'It takes a village'
@ -14,6 +14,7 @@ type        : 'Semantic Project'
  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Introduction</a>
+      <a class="item">Bugs</a>
      <a class="item">Contributing</a>
      <a class="item">Specification</a>
    </div>
@ -42,6 +43,16 @@ type        : 'Semantic Project'

  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

+  <h2 class="ui dividing header">Squashing Bugs</h2>
+
+  <p>Please submit any bugs you encounter when using the library to our <a href="https://github.com/jlukic/Semantic-UI/issues?state=open">Github Issues Tracker</a>.</p>
+
+  <p>Be sure to include a set of steps to reproduce the issue and any related information, browser, OS etc. If we can't see the issue then it will make solving things much more difficult.</p>
+
+  <div class="ui warning message">When submiting a bug report, please <a href="http://jsfiddle.net/jlukic/Vbr9d/1/">Fork this JSFiddle</a> to create a test-case. It will have Semantic and normalize.css included for you automatically.</div>
+
+  <a class="ui button" href="https://github.com/jlukic/Semantic-UI/issues/new"><i class="github icon"></i> Submit a bug report</a>
+
  <h2 class="ui dividing header">Contribute Code</h2>

  <p>We are looking for a few good coders to help us push out important new features for a release version of Semantic. Here's an overview of current features in development</p>
@ -49,23 +60,29 @@ type        : 'Semantic Project'
  <h3 class="ui header">CSS Variables</h3>

  <p>We are working on porting Semantic to using CSS variables to allow for easier theming. We are currently planning on using a CSS Pre-processor to move useful values over to variables. The current plan is to <b>not use mix-ins or pre-processor specific code</b> besides variables, and to add vendor prefixing using Grunt.</p>
-  <a class="ui green labeled icon button" href="mailto:jacklukic@gmail.com?Subject=I%20would%20love%20to%20work%20on%20%3Cinsert%20feature%20name%3E&Body=Hey%2C%20I%20just%20wanted%20to%20introduce%20myself%0A%0A%3CHere%27s%20a%20link%20to%20info%20about%20me%20or%20my%20github%3E%0A%0A%3CHere%27s%20a%20bit%20about%20what%20i%20need%20to%20help%20contribute%3E%0A%0A%3CHere%27s%20how%20i%20think%20i%27ll%20get%20started%20on%20that%20feature%3E"><i class="doctor icon"></i> Help code this feature</a>
-  <a class="ui button" href="https://github.com/jlukic/Semantic-UI/issues/216">Share Ideas</a>
+  <a class="ui small teal labeled icon button" href="mailto:jacklukic@gmail.com?Subject=I%20would%20love%20to%20work%20on%20%3Cinsert%20feature%20name%3E&Body=Hey%2C%20I%20just%20wanted%20to%20introduce%20myself%0A%0A%3CHere%27s%20a%20link%20to%20info%20about%20me%20or%20my%20github%3E%0A%0A%3CHere%27s%20a%20bit%20about%20what%20i%20need%20to%20help%20contribute%3E%0A%0A%3CHere%27s%20how%20i%20think%20i%27ll%20get%20started%20on%20that%20feature%3E"><i class="doctor icon"></i> Help code this feature</a>
+  <a class="ui small button" href="https://github.com/jlukic/Semantic-UI/issues/216">Share Ideas</a>
+
+  <div class="ui section divider"></div>

  <h3 class="ui header">Example Layouts</h3>

  <p>We are looking to create example layouts with Semantic to help people make sites quicker, and to learn the intracicies of using Semantic UI. The plan is to eventually create a sister site <b>learnsemantic.com</b> which will contain useful features for learning to use Semantic.</p>

-  <a class="ui green labeled icon button" href="mailto:jacklukic@gmail.com?Subject=I%20would%20love%20to%20work%20on%20%3Cinsert%20feature%20name%3E&Body=Hey%2C%20I%20just%20wanted%20to%20introduce%20myself%0A%0A%3CHere%27s%20a%20link%20to%20info%20about%20me%20or%20my%20github%3E%0A%0A%3CHere%27s%20a%20bit%20about%20what%20i%20need%20to%20help%20contribute%3E%0A%0A%3CHere%27s%20how%20i%20think%20i%27ll%20get%20started%20on%20that%20feature%3E"><i class="doctor icon"></i> Help code this feature</a>
-  <a class="ui button" href="https://github.com/jlukic/Semantic-UI/issues/206">Share Ideas</a>
+  <a class="ui small teal labeled icon button" href="mailto:jacklukic@gmail.com?Subject=I%20would%20love%20to%20work%20on%20%3Cinsert%20feature%20name%3E&Body=Hey%2C%20I%20just%20wanted%20to%20introduce%20myself%0A%0A%3CHere%27s%20a%20link%20to%20info%20about%20me%20or%20my%20github%3E%0A%0A%3CHere%27s%20a%20bit%20about%20what%20i%20need%20to%20help%20contribute%3E%0A%0A%3CHere%27s%20how%20i%20think%20i%27ll%20get%20started%20on%20that%20feature%3E"><i class="doctor icon"></i> Help code this feature</a>
+  <a class="ui small button" href="https://github.com/jlukic/Semantic-UI/issues/206">Share Ideas</a>
+
+  <div class="ui section divider"></div>

  <h3 class="ui header">Build Tools</h3>

  <p>We need to create a customizer for Semantic so user's can choose which components they would like to include and create custom zips with their minified concatenated code.</p>
  <p>Most likely this means creating a standalone server that can take API requests for custom builds of semantic and return zip with minified and uncompressed source, or with a little ingenuity in-page javascript which uses JSZIP to do the same</p>

-  <a class="ui green labeled icon button" href="mailto:jacklukic@gmail.com?Subject=I%20would%20love%20to%20work%20on%20%3Cinsert%20feature%20name%3E&Body=Hey%2C%20I%20just%20wanted%20to%20introduce%20myself%0A%0A%3CHere%27s%20a%20link%20to%20info%20about%20me%20or%20my%20github%3E%0A%0A%3CHere%27s%20a%20bit%20about%20what%20i%20need%20to%20help%20contribute%3E%0A%0A%3CHere%27s%20how%20i%20think%20i%27ll%20get%20started%20on%20that%20feature%3E"><i class="doctor icon"></i> Help code this feature</a>
-  <a class="ui button" href="https://github.com/jlukic/Semantic-UI/issues/189">Share Ideas</a>
+  <a class="ui small teal labeled icon button" href="mailto:jacklukic@gmail.com?Subject=I%20would%20love%20to%20work%20on%20%3Cinsert%20feature%20name%3E&Body=Hey%2C%20I%20just%20wanted%20to%20introduce%20myself%0A%0A%3CHere%27s%20a%20link%20to%20info%20about%20me%20or%20my%20github%3E%0A%0A%3CHere%27s%20a%20bit%20about%20what%20i%20need%20to%20help%20contribute%3E%0A%0A%3CHere%27s%20how%20i%20think%20i%27ll%20get%20started%20on%20that%20feature%3E"><i class="doctor icon"></i> Help code this feature</a>
+  <a class="ui small button" href="https://github.com/jlukic/Semantic-UI/issues/189">Share Ideas</a>
+
+  <div class="ui section divider"></div>

  <h3 class="ui header">Test Coverage</h3>

@ -73,27 +90,15 @@ type        : 'Semantic Project'

  <p>We need help to increase our code coverage by writing Jasmine tests for <a href="/module.html">modules</a> and to write feature specs which can be used to write tests.</p>

-  <a class="ui green labeled icon button" href="mailto:jacklukic@gmail.com?Subject=I%20would%20love%20to%20work%20on%20%3Cinsert%20feature%20name%3E&Body=Hey%2C%20I%20just%20wanted%20to%20introduce%20myself%0A%0A%3CHere%27s%20a%20link%20to%20info%20about%20me%20or%20my%20github%3E%0A%0A%3CHere%27s%20a%20bit%20about%20what%20i%20need%20to%20help%20contribute%3E%0A%0A%3CHere%27s%20how%20i%20think%20i%27ll%20get%20started%20on%20that%20feature%3E"><i class="doctor icon"></i> Help code this feature</a>
-  <a class="ui button" href="https://github.com/jlukic/Semantic-UI/issues/244">Share Ideas</a>
+  <a class="ui small teal labeled icon button" href="mailto:jacklukic@gmail.com?Subject=I%20would%20love%20to%20work%20on%20%3Cinsert%20feature%20name%3E&Body=Hey%2C%20I%20just%20wanted%20to%20introduce%20myself%0A%0A%3CHere%27s%20a%20link%20to%20info%20about%20me%20or%20my%20github%3E%0A%0A%3CHere%27s%20a%20bit%20about%20what%20i%20need%20to%20help%20contribute%3E%0A%0A%3CHere%27s%20how%20i%20think%20i%27ll%20get%20started%20on%20that%20feature%3E"><i class="doctor icon"></i> Help code this feature</a>
+  <a class="ui small button" href="https://github.com/jlukic/Semantic-UI/issues/244">Share Ideas</a>

  <h2 class="ui dividing header">Contribute Ideas</h2>

-  <h3 class="ui header">Bugs & Issues</h3>
-
-  <p>Please submit any bugs you encounter when using the library to our <a href="https://github.com/jlukic/Semantic-UI/issues?state=open">Github Issues Tracker</a>.</p>
-
-  <p>Be sure to include a set of steps to reproduce the issue and any related information, browser, OS etc. If we can't see the issue then it will make solving things much more difficult.</p>
-
-  <div class="ui warning message">When submiting a bug report, please <a href="http://jsfiddle.net/jlukic/Vbr9d/1/">Fork this JSFiddle</a> to create a test-case. It will have Semantic and normalize.css included for you automatically.</div>
-
-  <h3 class="ui header">Expanding UI</h3>
-
  <p>Semantic is looking for people to help contribute new core UI components, and suggest extensions for the library.</p>

  <p>If you have suggestions for components missing from Semantic which you'd like to see in future versions please add them to our public UI Component board. The current list of upcoming components, and their current development status can be seen on the contributor UI board.</p>

-  <div class="ui message">Please mark any UI ideas submitted with the label <span class="ui black label">UI Suggestion</span class="ui black label"></div>
-
  <a class="ui button" href="https://github.com/jlukic/Semantic-UI/issues/new"><i class="lightbulb icon"></i> Add an idea</a>


@ -114,7 +119,7 @@ type        : 'Semantic Project'
  <a class="ui button" href="https://github.com/jlukic/Semantic-UI/issues?state=open">Open Issues</a>

  <div class="ui divider"></div>
-  <a class="ui large right floated labeled teal icon button" href="/project/development.html">
+  <a class="ui large right labeled teal icon button" href="/project/development.html">
    Next: Developing Semantic
    <i class="right arrow icon"></i>
  </a>
--- a/server/documents/project/development.html.eco
+++ b/server/documents/project/development.html.eco
@ -1,8 +1,8 @@
  ---
 layout      : 'default'
-css         : 'build'
+css         : 'guide'

-title       : 'Development'
+title       : 'Stack Set-up'
 description : 'A guide to developing locally'
 type        : 'Semantic Project'
 ---
@ -12,16 +12,16 @@ type        : 'Semantic Project'
 <div class="main container">
  <div class="peek">
    <div class="ui vertical pointing secondary menu">
-      <a class="active item">Running Locally</a>
+      <a class="active item">Installing Dependencies</a>
      <a class="item">Fixing Bugs</a>
    </div>
  </div>

-  <h2 class="ui dividing header">Running Locally</h2>
+  <h2 class="ui dividing header">Installing Dependencies</h2>

  <p>It may be useful to run the development docs locally when working on a forked version of semantic, as the docs themselves help in testing out changes to ui components.</p>

-  <h3 class="ui header">1) Install Node</h3>
+  <h3 class="ui header">1. Install Node</h3>
  <p>Semantic docs are written in DocPad which requires NodeJS. </p>

  <div class="ui warning message">Make sure npm does not require sudo to operate, this might cause permissions issues.</div>
@ -31,29 +31,20 @@ type        : 'Semantic Project'
    <li><a href="https://gist.github.com/isaacs/579814">Installing Node JS without sudo</a></li>
  </ul>

-  <h3 class="ui header">2) Install Dependencies</h3>
+  <h3 class="ui header">2. Fork Semantic</h3>

-  <div class="code" data-title="Installing DocPad" data-type="terminal">
-    // docpad is used to generate static sites like semantic docs
-    npm install -g docpad
-  </div>
+  <iframe src="http://ghbtns.com/github-btn.html?user=jlukic&repo=semantic=ui&type=fork&count=true&size=large"
+  allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>

-  <div class="code" data-title="Installing Grunt" data-type="terminal">
-    // eco is used for templating inside documentation
-    docpad install eco
-  </div>
+  <h3 class="ui header">3. Install Dependencies</h3>
+  <p>Running update inside the local directory will grab all packages in <code>package.json</code> in the root of the project.</p>

-  <div class="code" data-title="Installing Grunt" data-type="terminal">
-    // grunt is used to automated tasks like concatenating and minifying files
-    npm install -g grunt-cli
+  <div class="code" data-title="Installing dependencies" data-type="terminal">
+    npm update
  </div>

-  <h3 class="ui header">3) Fork Semantic</h3>
-
-  <iframe src="http://ghbtns.com/github-btn.html?user=jlukic&repo=semantic=ui&type=fork&count=true&size=large"
-  allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>

-  <h3 class="ui header">4) Start Your Server</h3>
+  <h3 class="ui header">4. Start Your Server</h3>

  <div class="code" data-title="Starting server locally" data-type="terminal">
    docpad run
@ -75,6 +66,23 @@ type        : 'Semantic Project'

  <p>The watch task is the default grunt task for Semantic, so you can start it quite simply.</p>

+  <h3 class="ui header">Running Tests</h3>
+  <p>Tests will automatically run with <code>grunt watch</code> if you have started karma</p>
+
+  <div class="code" data-title="Execute tests while developing" data-type="terminal">
+    karma start
+    grunt watch
+  </div>
+
+  <p>You can also run the test suite manually</p>
+  <div class="code" data-title="Execute tests while developing" data-type="terminal">
+    npm test
+    // or
+    grunt build
+    // or
+    karma run
+  </div>
+
  <h3 class="ui header">Packaging Elements</h3>
  <p>For convenience there is also a separate grunt command for building minified, packaged, and compressed versions of the library.</p>