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

Author: jlukic

docpad.coffee

@@ -29,7 +29,11 @@ docpadConfig = {
 			# Here are some old site urls that you would like to redirect from
 			oldUrls: [],
 
+<<<<<<< HEAD
 			version: "2.2.10",
+=======
+			version: "2.2.8",
+>>>>>>> 2484310f15aa385c7bb5e7e668af728132955b76
 
 			branch: "master",
 

server/documents/behaviors/form.html.eco

@@ -282,6 +282,51 @@ type        : 'UI Behavior'
       </form>
     </div>
 
+    <div class="prompt example">
+      <h4 class="ui header">
+        Validating Programmatically
+        <div class="ui teal label">Updated in 2.2.8</div>
+      </h4>
+      <p>Form validation provides additional behaviors to programmatically trigger validation for either the form or an individual field, and check validation on the form or individual fields.</p>
+      <p>Please see the <a href="#behaviors">behaviors section</a> for an explanation on syntax.</p>
+      <table class="ui celled sortable basic table segment">
+        <tbody>
+          <tr>
+            <td class="four wide"><b>validate form</b></td>
+            <td>Validates entire form and displays errors if necessary</td>
+          </tr>
+          <tr>
+            <td class="four wide"><b>is valid</b></td>
+            <td>Returns whether a form is valid</td>
+          </tr>
+          <tr>
+            <td class="four wide"><b>is valid(fieldName)</b></td>
+            <td>Returns whether a field in a form is valid (does not update UI)</td>
+          </tr>
+          <tr>
+            <td class="four wide"><b>validate field(fieldName)</b></td>
+            <td>Validates a particular field and displays errors if necessary</td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="ignored code">
+      $('.ui.form')
+        .form({
+          fields: [
+           email: 'empty',
+           name: 'empty'
+          ]
+        })
+      ;
+      if( $('.ui.form').form('is valid', 'email')) {
+        // email is valid
+      }
+      if( $('.ui.form').form('is valid') {
+        // form is valid (both email and name)
+      }
+      </div>
+    </div>
+
     <h2 class="ui dividing header">Rules</h2>
 
     <div class="no example">
@@ -838,7 +883,7 @@ type        : 'UI Behavior'
           </div>
           <div class="field">
             <label>E-mail</label>
-            <input name="email" type="text" value="jack@foo">
+            <input name="email" type="text" value="jack">
           </div>
         </div>
         <div class="two fields">
@@ -1696,7 +1741,7 @@ type        : 'UI Behavior'
   </div>
 
   <div class="ui tab" data-tab="settings">
-    <h2 class="ui dividing header">Behavior</h2>
+    <h2 class="ui dividing header">Behaviors</h2>
 
     All the following behaviors can be called using the syntax
 
@@ -1713,13 +1758,17 @@ type        : 'UI Behavior'
         <td>is valid</td>
         <td>Returns true/false whether a form passes its validation rules</td>
       </tr>
+      <tr>
+        <td>is valid(fieldName)</td>
+        <td>Returns true/false whether a field passes its validation rules</td>
+      </tr>
       <tr>
         <td>validate form</td>
-        <td>Validates form and calls onSuccess or onFailure</td>
+        <td>Validates form, updates UI, and calls onSuccess or onFailure</td>
       </tr>
       <tr>
-        <td>get change event</td>
-        <td>gets browser property change event</td>
+        <td>validate field(fieldName)</td>
+        <td>Validates field, updates UI, and calls onSuccess or onFailure</td>
       </tr>
       <tr>
         <td>get field(id)</td>

server/documents/behaviors/visibility.html.eco

@@ -267,6 +267,28 @@ type        : 'UI Behavior'
           </tr>
         </thead>
         <tbody>
+          <tr>
+            <td>
+              onOnScreen
+            </td>
+            <td>
+              Any part of element is in current scroll viewport
+            </td>
+            <td>
+              <div class="code" data-type="javascript">screen.bottom >= element.top && screen.bottom <= element.bottom</div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              onOffScreen
+            </td>
+            <td>
+              No part of element is in current scroll viewport
+            </td>
+            <td>
+              <div class="code" data-type="javascript">screen.bottom <= element.top || screen.top >= element.bottom</div>
+            </td>
+          </tr>
           <tr>
             <td>
               onTopVisible
@@ -556,7 +578,7 @@ type        : 'UI Behavior'
       </div>
     </div>
 
-    <div class="visibility example">
+    <div class="visibility shown example">
       <h4 class="ui header">Lazy Loading Images</h4>
       <p>Visibility includes several shortcuts for setting up common visibility events. Using the setting <code>type: 'image'</code> will automatically attach events to an images <code>topVisible</code> to load the contents of <code>data-src</code> as <code>src</code>.</p>
 

server/documents/collections/menu.html.eco

@@ -717,16 +717,6 @@ themes      : ['Default', 'Chubby', 'GitHub', 'Material']
   </div>
 
 
-  <div class="example">
-    <h4 class="ui header">Down</h4>
-    <p>A menu item can be pressed in</p>
-    <div class="ui compact menu">
-      <div class="down item">
-        Link
-      </div>
-    </div>
-  </div>
-
   <div class="example">
     <h4 class="ui header">Active</h4>
     <p>A menu item can be active</p>

server/documents/elements/container.html.eco

@@ -66,19 +66,12 @@ themes      : ['Default']
             <td>Fluid</td>
             <td>Fluid</td>
           </tr>
-      <!--     <tr>
+          <tr>
             <td>Variable</td>
             <td><code>$largestMobileScreen</code></td>
             <td><code>$mobileBreakpoint</code></td>
             <td><code>$smallMonitorBreakpoint</code></td>
             <td><code>$largeMonitorBreakpoint</code></td>
-          </tr> -->
-          <tr>
-            <td class="single line">Responsive Visibility</td>
-            <td><code>mobile only</code></td>
-            <td><code>tablet only</code></td>
-            <td><code>small monitor only</code></td>
-            <td><code>large monitor only</code></td>
           </tr>
           <tr>
             <td>Device Width</td>
@@ -89,6 +82,10 @@ themes      : ['Default']
           </tr>
         </tbody>
       </table>
+      <h3 class="ui header">Responsive Visibility</h3>
+      <p>Since variations in Semantic UI are only assigned in the scope of components, there are no "free floating" responsive class names, however some components include responsive variations to help ease responsive design. <a href=href="/collections/grid.html#device-visibility">Grid</a> for example, includes responsive classes for hiding or showing <code>column</code>, <code>row</code> based on device type.</p>
+
+      <a href="/collections/grid.html#device-visibility" class="ui secondary button">See grid responsive variations <i class="right chevron icon"></i></a>
 
       <h3 class="ui header">Determining Maximum Widths</h3>