Merge branch 'master' of github.com:Semantic-Org/Semantic-UI-Docs into next

jlukic · jlukic · commit 2e0bdc6cb9c4 · 2015-07-23T17:38:14.000-04:00
diff --git a/server/documents/hotfix.html.eco b/server/documents/hotfix.html.eco
@@ -10,12 +10,6 @@ type       : 'Library'
 <!-- TEST JS HERE !-->
 <script>
 $(document).ready(function() {
-    $('.button').popup({
-        on: 'hover',
-        onShow: function() {
-            console.log('show');
-        }
-    });
 });
 </script>
 
@@ -24,6 +18,6 @@ $(document).ready(function() {
 </style>
 
 <div class="ui container" style="padding-top: 2em;">
-    <div class="ui button first" data-content="One">One</div>
-    <div class="ui button second" data-content="Two">Two</div>
+
+</div>
 </body>
diff --git a/server/documents/introduction/advanced-usage.html.eco b/server/documents/introduction/advanced-usage.html.eco
@@ -16,6 +16,7 @@ type        : 'Introduction'
   <div class="no example">
     <h4>Importing Gulp Tasks</h4>
     <p>You don't have to use <a href="/introduction/build-tools.html">our gulp pipeline</a>, just import the task into your own <code>gulpfile</code></p>
+    <p>You can <a href="https://github.com/Semantic-Org/Example-External-Gulpfile" target="_blank">fork this example project</a> to see an example of how to import Semantic UI tasks into your project.</p>
     <div class="ignored code" data-type="JS" data-title="Custom gulpfile.js">
     var
       gulp  = require('gulp'),
@@ -28,6 +29,13 @@ type        : 'Introduction'
     </div>
   </div>
 
+  <h2 class="ui dividing header">Prototyping with Semantic UI</h2>
+  <div class="no example">
+    <h4>Sketch Files</h4>
+    <p>If you are looking to prototype layouts using <a href="http://bohemiancoding.com/sketch/" target="_blank">Sketch</a> with Semantic UI check out <a href="https://github.com/guacamoly/semantic-ui-kit-for-sketch" target="_blank">Semantic UI Sketch Files</a></p>
+    <img class="ui bordered rounded fluid image" src="https://github.com/guacamoly/semantic-ui-kit-for-sketch/raw/master/snapshot.jpg?raw=true">
+  </div>
+
   <h2 class="ui dividing header">Single Components</h2>
 
   <div class="no example">
diff --git a/server/documents/introduction/build-tools.html.eco b/server/documents/introduction/build-tools.html.eco
@@ -302,4 +302,9 @@ type        : 'Introduction'
     <p>You can learn more about <code>theme.config</code> by checking out the <a href="/usage/theming.html#using-packaged-themes">theming guide</a></p>
   </div>
 
+  <div class="no example">
+    <h4>Importing Gulp Tasks</h4>
+    <p>See our <a href="/introduction/advanced-usage.html">recipes section</a> for examples on how to import individual gulp tasks into your custom Gulpfile.</p>
+  </div>
+
 </div>
diff --git a/server/documents/introduction/getting-started.html.eco b/server/documents/introduction/getting-started.html.eco
@@ -56,18 +56,24 @@ type        : 'Main'
       </div>
     </div>
     <div class="ui basic tab vertical segment" data-tab="linux">
-      <h4>Install from Git without Sudo</h4>
+      <h4>Install via PPA</h4>
+      <p>Although <a href="http://www.ubuntuupdates.org/ppa/chris_lea_nodejs" target="_blank">Chris Lea's PPA</a> was once the best way to install node, it is now somewhat out of date.</p>
+      <p>The recommended path to install Semantic UI is using <a href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager" target="_blank">Joyent's package manager</a> guide.</p>
+      <h4>Ubuntu</h4>
       <div class="ignored code" data-type="bash">
-        mkdir ~/local
-        echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc
-        . ~/.bashrc
-        git clone git://github.com/joyent/node.git
-        cd node
-        ./configure --prefix=~/local
-        make install
-        git clone git://github.com/isaacs/npm.git
-        cd npm
-        make install
+        curl --silent --location https://deb.nodesource.com/setup_0.12 | sudo bash -
+        sudo apt-get install --yes nodejs
+      </div>
+      <h4>Debian</h4>
+      <div class="ignored code" data-type="bash">
+        apt-get install curl
+        curl --silent --location https://deb.nodesource.com/setup_0.12 | bash -
+        apt-get install --yes nodejs
+      </div>
+      <h4>Red Hat</h4>
+      <div class="ignored code" data-type="bash">
+      curl --silent --location https://rpm.nodesource.com/setup | bash -
+      yum -y install nodejs
       </div>
     </div>
     <div class="ui basic tab vertical segment" data-tab="win">
@@ -76,9 +82,21 @@ type        : 'Main'
     </div>
   </div>
 
+  <div class="no example">
+    <h4>Install Gulp</h4>
+    <p>Semantic UI uses <a href="http://www.gulpjs.com" target="_blank">Gulp</a> to provide command line tools for building themed versions of the library with just the components you need.</p>
+    <p>Gulp is an NPM module and must be installed globally</p>
+    <div class="ignored code" data-type="bash">
+    npm install -g gulp
+    </div>
+  </div>
+
   <div class="no example">
     <h4>Install Semantic UI</h4>
     <p>Semantic UI is available in an eponymous package on NPM</p>
+    <div class="ui ignored warning message">
+      If you experience issues with install hanging after setup, hold tight <a href="https://github.com/Semantic-Org/Semantic-UI/issues/2086#issuecomment-123771843">a fix is on the way</a> shortly
+    </div>
     <div class="ui secondary menu">
       <a class="active item" data-tab="video">
         Video
diff --git a/server/documents/introduction/glossary.html.eco b/server/documents/introduction/glossary.html.eco
@@ -16,31 +16,32 @@ type        : 'Introduction'
 
 <div class="no example">
   <h4>Types of Components</h4>
-  <p>The following table helps differentiate between different types of components in Semantic UI's documentation</p>
+  <p>Semantic UI classifies components into different definition types depending on its qualities. Each of these five types uses a unique definition format.</p>
   <table class="ui large very padded definition table">
     <tbody>
       <tr>
         <td class="three wide">Globals</td>
         <td>
           Globals are styles that are applied across a site. These include things like css resets, and sitewide font, link and sizing defaults.</p>
-          <p>Most importantly, globals include site-wide theming variables that other components can inherit and modify.</td>
+          <p>Most importantly, globals include site-wide <a href="/usage/theming.html">theming variables</a> that other components can inherit and modify.</td>
       </tr>
       </tr>
       <tr>
         <td>Element</td>
         <td>
-          UI elements are page elements with a single function. They can exist alone or in a plural form with elements sharing qualities.</td>
+          UI elements are page elements with a single function. They can exist alone or in a plural form with elements sharing qualities.</p>
+          <p>For example, a group of <a href="/elements/button.html">buttons</a> may use <code>ui red buttons</code> as a grouping with individual <code>ui button</code> children.</td>
       </tr>
       <tr>
         <td>Collection</td>
         <td>
-          <p>Collections are heterogenous groups of components which are usually found together. They describe a list of "usual suspects" which appear in a certain context. They may include and extend other ui elements for use in certain contexts—for example form may extend ui dropdown or input—as well as include their own content.</p>
+          <p>Collections are heterogenous groups of components which are usually found together. They describe a list of "usual suspects" which appear in a certain context. They may include and extend other ui elements for use in certain contexts—for example <a href="/collections/form.html">form</a> may extend <a href="/modules/dropdown.html">dropdown</a> or <a href="/elements/input.html">input</a>—as well as include their own content.</p>
         </td>
       </tr>
       <tr>
         <td>Views</td>
         <td>
-          <p>A view is a convention for presenting specific types of content that is usually consistent across a website. These include things like comments, user activity feeds, or cards.</p>
+          <p>A view is a convention for presenting specific types of content that is usually consistent across a website. These include things like <a href="/views/comment.html">comments</a>, <a href="/views/feed.html">activity feeds</a>, or <a href="/views/card.html">cards</a>.</p>
         </td>
       </tr>
       <tr>
@@ -59,9 +60,41 @@ type        : 'Introduction'
   </table>
 </div>
 
+<div class="no example">
+  <h4>Project Terminology</h4>
+  <p>Semantic UI classifies components into separate definition groupings.<p>
+
+  <table class="ui large very padded definition table">
+    <tbody>
+      <tr>
+        <td class="three wide">Component</td>
+        <td>
+          A component is a general term used to refer to any user interface element packaged for distribution.
+        </td>
+      </tr>
+      <tr>
+        <td>Definition</td>
+        <td>
+          <p>A definition is a set of css and javascript which describe a component's essential qualities.</p>
+          <p>Definition use variables to express arbitrary parts of a component's appearance so that they can be changed with themes.</p>
+        </td>
+      </tr>
+      <tr>
+        <td>ui</td>
+        <td>
+          <p><code>ui</code> is a special class name used to distinguish parts of components from components.</p>
+          <p>For example, a <a href="/elements/list.html">list</a> will receive the class <code>ui list</code> because it has a corresponding definition, however a list item, will receive just the class <code>item</code>.</p>
+          <p>The ui class name helps encapsulate css rules by making sure all 'parts of a component' are defined in context to a 'whole' component.</p>
+          <p>It also helps make scanning unknown code simpler. If you see <code>ui</code> you know you are looking at a component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
 <div class="no example">
   <h4>Definition Terminology</h4>
-  <p>When browsing Semantic UI definitions, you will see content grouped into different sections. These are parts of a definition which generally remain consistent between components<p>
+  <p>When browsing Semantic UI definitions, you will see content grouped into different sections. These parts of a definition are consistent across definitions, and are common patterns for describing components.<p>
 
   <table class="ui large very padded definition table">
     <tbody>
diff --git a/server/documents/modules/dropdown.html.eco b/server/documents/modules/dropdown.html.eco
@@ -1361,6 +1361,7 @@ themes      : ['Default', 'Material']
       <div class="evaluated code" data-type="javascript">
         $('.no.label.example .ui.dropdown')
           .dropdown({
+            debug: true,
             useLabels: false
           })
         ;
@@ -1403,7 +1404,7 @@ themes      : ['Default', 'Material']
       </div>
     </div>
 
-    <div class="restore example">
+    <div class="restore dropdown example">
       <h4 class="ui header">Restoring Defaults</h4>
       <p>You can restore a dropdown to its value set on page load</p>
       <div class="ui multiple selection dropdown">
diff --git a/server/documents/modules/modal.html.eco b/server/documents/modules/modal.html.eco
@@ -246,7 +246,7 @@ themes      : ['Default', 'Material']
           <div class="header">
             Profile Picture
           </div>
-          <div class="content">
+          <div class="image content">
             <div class="ui medium image">
               <img src="/images/avatar/large/chris.jpg">
             </div>
diff --git a/server/documents/modules/tab.html.eco b/server/documents/modules/tab.html.eco
@@ -364,35 +364,18 @@ themes      : ['Default']
       <h4>Using HTML5 State</h4>
       <p>For sites that are able to replicate change on the server, tab can automatically map changes in tab navigation to <a href="http://diveintohtml5.info/history.html" target="_blank">html5 state.</a>
       </p>
-      <div class="ui ignored info message">
-        Since these docs are statically hosted on GitHub Pages, html state is not supported. The following example will cause a "not found" error on page refresh.
+      <div class="ui ignored warning message">
+        Since these docs are statically hosted on GitHub Pages, html5 state tabs are not demonstratable from the docs. You will need to try this example in your own code.
       </div>
-      <div class="evaluated code" data-type="javascript">
-        $('.state.example .menu .item')
+      <div class="code" data-type="javascript">
+        $('.ui.menu .item')
           .tab({
-            context     : '.state.example',
-            history     : true,
             historyType : 'state',
             // base url for all other path changes
-            path        : '/modules/tab.html'
+            path        : '/my/base/url'
           })
         ;
       </div>
-
-      <div class="ui pointing secondary menu">
-        <a class="active item" data-tab="olive">Olive</a>
-        <a class="item" data-tab="apple">Apple</a>
-        <a class="item" data-tab="cucumber">Cucumber</a>
-      </div>
-      <div class="ui active tab segment" data-tab="olive">
-        Olive tab
-      </div>
-      <div class="ui tab segment" data-tab="apple">
-        Apple tab
-      </div>
-      <div class="ui tab segment" data-tab="cucumber">
-        Cucumber tab
-      </div>
     </div>
 
   </div>
