feat(header): rename to heading

examples/attached.html

@@ -36,7 +36,7 @@
 
 <div class="ui container">
 
-  <h2 class="ui header">Attached Content</h2>
+  <h2 class="ui heading">Attached Content</h2>
   <div class="ui three column grid">
     <div class="column">
       <div class="top attached ui segment">
@@ -219,9 +219,9 @@ <h2 class="ui header">Attached Content</h2>
 
 <div class="ui text container">
 
-  <h2 class="ui header">Header Groups</h2>
+  <h2 class="ui heading">Header Groups</h2>
 
-  <h4 class="ui top attached block header">
+  <h4 class="ui top attached block heading">
     Top Block Header
   </h4>
   <div class="ui bottom attached segment">
@@ -233,30 +233,30 @@ <h4 class="ui top attached block header">
   <div class="ui top attached segment">
     Segment
   </div>
-  <h4 class="ui bottom attached block header">
+  <h4 class="ui bottom attached block heading">
     Bottom Block Header
   </h4>
 
   <div class="ui section divider"></div>
 
-  <h4 class="ui top attached block header">
+  <h4 class="ui top attached block heading">
     Top Block Header
   </h4>
   <div class="ui attached segment">
     Segment
   </div>
-  <h4 class="ui attached block header">
+  <h4 class="ui attached block heading">
     Middle Block Header
   </h4>
   <div class="ui attached segment">
     Segment
   </div>
-  <h4 class="ui bottom attached block header">
+  <h4 class="ui bottom attached block heading">
     Bottom Block Header
   </h4>
 
 
-  <h2 class="ui header">Mixed Attached Content</h2>
+  <h2 class="ui heading">Mixed Attached Content</h2>
 
   <div class="ui section divider"></div>
 

examples/bootstrap.html

@@ -29,21 +29,21 @@
 <div class="ui grid container">
   <div class="row">
     <div class="column">
-      <h1 class="ui header">Bootstrap Migration</h1>
+      <h1 class="ui heading">Bootstrap Migration</h1>
     </div>
   </div>
   <div class="row">
     <div class="column">
       <div class="ui message">
-        <h1 class="ui header">Hello, world!</h1>
+        <h1 class="ui heading">Hello, world!</h1>
         <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
         <a class="ui blue button">Learn more &raquo;</a>
       </div>
     </div>
   </div>
   <div class="row">
     <div class="column">
-      <h1 class="ui header">Buttons</h1>
+      <h1 class="ui heading">Buttons</h1>
       <a class="ui button" tabindex="0">
         Default
       </a>
@@ -63,14 +63,14 @@ <h1 class="ui header">Buttons</h1>
   </div>
   <div class="row">
     <div class="column">
-      <h1 class="ui header">Thumbnails</h1>
+      <h1 class="ui heading">Thumbnails</h1>
       <div class="ui divider"></div>
       <img class="ui small image" src="assets/images/wireframe/image.png">
     </div>
   </div>
   <div class="row">
     <div class="column">
-      <h1 class="ui header">Dropdown</h1>
+      <h1 class="ui heading">Dropdown</h1>
       <div class="ui divider"></div>
       <div class="ui selection dropdown">
         <input type="hidden" name="selection">
@@ -130,7 +130,7 @@ <h1 class="ui header">Dropdown</h1>
   </div>
   <div class="row">
     <div class="column">
-      <h1 class="ui header">Badges</h1>
+      <h1 class="ui heading">Badges</h1>
       <div class="ui divider"></div>
       <div class="ui vertical menu">
         <div class="item">
@@ -148,7 +148,7 @@ <h1 class="ui header">Badges</h1>
 
   <div class="row">
     <div class="column">
-      <h1 class="ui header">Tables</h1>
+      <h1 class="ui heading">Tables</h1>
       <div class="ui two column grid">
         <div class="column">
           <table class="ui table">
@@ -308,7 +308,7 @@ <h1 class="ui header">Tables</h1>
   </div>
   <div class="row">
     <div class="column">
-      <h1 class="ui header">Alerts</h1>
+      <h1 class="ui heading">Alerts</h1>
       <div class="ui divider"></div>
       <div class="ui positive message">Well done! You successfully read this important alert message.</div>
       <div class="ui info message">Heads up! This alert needs your attention, but it's not super important.</div>
@@ -408,15 +408,15 @@ <h1 class="ui header">Panels</h1>
           <div class="ui bottom attached segment">Panel content</div>
         </div>
         <div class="column">
-          <h4 class="ui top attached inverted header">Header</h4>
+          <h4 class="ui top attached inverted heading">Header</h4>
           <div class="ui bottom attached segment">Panel content</div>
         </div>
         <div class="column">
-          <h4 class="ui top attached block header">Header</h4>
+          <h4 class="ui top attached block heading">Header</h4>
           <div class="ui bottom attached segment">Panel content</div>
         </div>
         <div class="column">
-          <h4 class="ui top attached header">Header</h4>
+          <h4 class="ui top attached heading">Header</h4>
           <div class="ui bottom attached segment">Panel content</div>
         </div>
       </div>

examples/fixed.html

@@ -75,7 +75,7 @@
   </div>
 
   <div class="ui main text container">
-    <h1 class="ui header">Fomantic UI Fixed Template</h1>
+    <h1 class="ui heading">Fomantic UI Fixed Template</h1>
     <p>This is a basic fixed menu template using fixed size containers.</p>
     <p>A text container is used for the main container, which is useful for single column layouts</p>
     <img class="wireframe" src="assets/images/wireframe/media-paragraph.png">
@@ -91,7 +91,7 @@ <h1 class="ui header">Fomantic UI Fixed Template</h1>
     <div class="ui center aligned container">
       <div class="ui stackable inverted divided grid">
         <div class="three wide column">
-          <h4 class="ui inverted header">Group 1</h4>
+          <h4 class="ui inverted heading">Group 1</h4>
           <div class="ui inverted link list">
             <a href="#" class="item">Link One</a>
             <a href="#" class="item">Link Two</a>
@@ -100,7 +100,7 @@ <h4 class="ui inverted header">Group 1</h4>
           </div>
         </div>
         <div class="three wide column">
-          <h4 class="ui inverted header">Group 2</h4>
+          <h4 class="ui inverted heading">Group 2</h4>
           <div class="ui inverted link list">
             <a href="#" class="item">Link One</a>
             <a href="#" class="item">Link Two</a>
@@ -109,7 +109,7 @@ <h4 class="ui inverted header">Group 2</h4>
           </div>
         </div>
         <div class="three wide column">
-          <h4 class="ui inverted header">Group 3</h4>
+          <h4 class="ui inverted heading">Group 3</h4>
           <div class="ui inverted link list">
             <a href="#" class="item">Link One</a>
             <a href="#" class="item">Link Two</a>
@@ -118,7 +118,7 @@ <h4 class="ui inverted header">Group 3</h4>
           </div>
         </div>
         <div class="seven wide column">
-          <h4 class="ui inverted header">Footer Header</h4>
+          <h4 class="ui inverted heading">Footer Header</h4>
           <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
         </div>
       </div>

examples/grid.html

@@ -20,7 +20,7 @@
 <body>
 
   <div class="ui text container">
-      <h1 class="ui dividing header">Using Grids</h1>
+      <h1 class="ui dividing heading">Using Grids</h1>
 
       <h3 class="first">Container</h3>
       <p>A container is a fixed width element that wraps your site's content. It remains a constant size and uses <b>margin</b> to center. Containers are the simplest way to center page content inside a grid.</code>
@@ -64,7 +64,7 @@ <h3 class="first">Text Container</h3>
 
   <div class="ui text container">
 
-      <h1 class="ui dividing header">Grid Content</h1>
+      <h1 class="ui dividing heading">Grid Content</h1>
 
       <h3 class="first">Column Flow</h3>
       <p>A grid does not necessarily need to specify rows. If you include <code>columns</code> as direct child of <code>ui grid</code> content will automatically flow to the next row when all the grid columns are taken in the current row</b>.</p>
@@ -182,7 +182,7 @@ <h3>Special Variations</h3>
         </div>
       </div>
 
-      <h1 class="ui dividing header">Adjusting Grids</h1>
+      <h1 class="ui dividing heading">Adjusting Grids</h1>
 
 
       <h3 class="first">Centering Content</h3>

examples/sticky.html

@@ -116,7 +116,7 @@
 <body>
 
   <div class="ui main text container">
-    <h1 class="ui header">Sticky Example</h1>
+    <h1 class="ui heading">Sticky Example</h1>
     <p>This example shows how to use lazy loaded images, a sticky menu, and a simple text container</p>
   </div>
 

src/definitions/collections/menu.less

@@ -191,9 +191,9 @@
 .ui.menu .header.item,
 .ui.vertical.menu .header.item {
     margin: 0;
-    background: @headerBackground;
-    text-transform: @headerTextTransform;
-    font-weight: @headerWeight;
+    background: @headingBackground;
+    text-transform: @headingTextTransform;
+    font-weight: @headingWeight;
 }
 
 & when (@variationMenuVertical) {

src/definitions/collections/message.less

@@ -47,15 +47,15 @@
 
 /* Header */
 .ui.message .header {
-    display: @headerDisplay;
-    font-family: @headerFont;
-    font-weight: @headerFontWeight;
-    margin: @headerMargin;
+    display: @headingDisplay;
+    font-family: @headingFont;
+    font-weight: @headingFontWeight;
+    margin: @headingMargin;
 }
 
 /* Default font size */
 .ui.message .header:not(.ui) {
-    font-size: @headerFontSize;
+    font-size: @headingFontSize;
 }
 
 /* Paragraph */
@@ -70,7 +70,7 @@
     margin-bottom: 0;
 }
 .ui.message .header + p {
-    margin-top: @headerParagraphDistance;
+    margin-top: @headingParagraphDistance;
 }
 
 /* List */

src/definitions/collections/table.less

@@ -77,20 +77,20 @@
 
 /* Headers */
 .ui.table > thead {
-    box-shadow: @headerBoxShadow;
+    box-shadow: @headingBoxShadow;
 }
 .ui.table > thead > tr > th {
     cursor: auto;
-    background: @headerBackground;
-    text-align: @headerAlign;
-    color: @headerColor;
-    padding: @headerVerticalPadding @headerHorizontalPadding;
-    vertical-align: @headerVerticalAlign;
-    font-style: @headerFontStyle;
-    font-weight: @headerFontWeight;
-    text-transform: @headerTextTransform;
-    border-bottom: @headerBorder;
-    border-left: @headerDivider;
+    background: @headingBackground;
+    text-align: @headingAlign;
+    color: @headingColor;
+    padding: @headingVerticalPadding @headingHorizontalPadding;
+    vertical-align: @headingVerticalAlign;
+    font-style: @headingFontStyle;
+    font-weight: @headingFontWeight;
+    text-transform: @headingTextTransform;
+    border-bottom: @headingBorder;
+    border-left: @headingDivider;
 }
 
 .ui.table > thead > tr > th:first-child {
@@ -487,8 +487,8 @@
 
     /* Camouflage scrollbars, we need them only to gain the same width as tbody */
     .ui.scrolling.table > thead {
-        background: @headerBackground;
-        color: @headerBackground;
+        background: @headingBackground;
+        color: @headingBackground;
         border-radius: @borderRadius @borderRadius 0 0;
     }
     .ui.scrolling.table > tfoot {
@@ -656,8 +656,8 @@
         border-collapse: collapse;
     }
     .ui.structured.table > thead > tr > th {
-        border-left: @headerDivider;
-        border-right: @headerDivider;
+        border-left: @headingDivider;
+        border-right: @headingDivider;
     }
     & when (@variationTableSortable) {
         .ui.structured.sortable.table > thead > tr > th {