diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index c63f679..1b9cc7d 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2372,9 +2372,11 @@ function template_preprocess_install_page(&$variables) {
  *   - elements: An associative array containing properties of the region.
  */
 function template_preprocess_region(&$variables) {
+  $elements = $variables['elements'];
+
   // Create the $content variable that templates expect.
-  $variables['content'] = $variables['elements']['#children'];
-  $variables['region'] = $variables['elements']['#region'];
+  $variables['content'] = $elements['#children'];
+  $variables['region'] = $elements['#region'];
 
   $variables['attributes']['class'][] = 'region';
   $variables['attributes']['class'][] = drupal_html_class('region-' . $variables['region']);
@@ -2414,19 +2416,22 @@ function template_preprocess_field(&$variables, $hook) {
     $variables['items'][$delta] = $element[$delta];
     $delta++;
   }
+  if ( isset($element['#items']) && is_object($element['#items']) ){
+    if( $element['#items']->getFieldDefinition()->getCardinality() != "1"){
+      $variables['multiple'] = TRUE;
+    }
+  }
 
   // Add default CSS classes. Since there can be many fields rendered on a page,
   // save some overhead by calling strtr() directly instead of
   // drupal_html_class().
-  $variables['entity_type_css'] = strtr($element['#entity_type'], '_', '-');
-  $variables['field_name_css'] = strtr($element['#field_name'], '_', '-');
-  $variables['field_type_css'] = strtr($element['#field_type'], '_', '-');
+  $variables['field_name'] = strtr($element['#field_name'], '_', '-');
+  $variables['field_type'] = strtr($element['#field_type'], '_', '-');
+  $variables['field_label'] = strtr($element['#label_display'], '_', '-');
   $variables['attributes']['class'] = array(
-    'field',
-    'field-' . $variables['entity_type_css'] . '--' . $variables['field_name_css'],
-    'field-name-' . $variables['field_name_css'],
-    'field-type-' . $variables['field_type_css'],
-    'field-label-' . $element['#label_display'],
+    'field-name--' . $variables['field_name'],
+    'field-type--' . $variables['field_type'],
+    'field-label--' . $element['#label_display'],
   );
   // Add a "clearfix" class to the wrapper since we float the label and the
   // field items in field.module.css if the label is inline.
diff --git a/core/modules/options/lib/Drupal/options/Tests/OptionsFieldUITest.php b/core/modules/options/lib/Drupal/options/Tests/OptionsFieldUITest.php
index dd6d13e..0bd1721 100644
--- a/core/modules/options/lib/Drupal/options/Tests/OptionsFieldUITest.php
+++ b/core/modules/options/lib/Drupal/options/Tests/OptionsFieldUITest.php
@@ -340,7 +340,7 @@ function testNodeDisplay() {
         $output = '1';
       }
 
-      $elements = $this->xpath('//div[text()="' . $output . '"]');
+      $elements = $this->xpath('//div[text()=:output]', array(':output' => $output));
       $this->assertEqual(count($elements), 1, 'Correct options found.');
     }
   }
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index f397a5a..56dfdd4 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -613,16 +613,16 @@ table tr.error {
 }
 
 /* Field display */
-.field .field-label {
+.field__label {
   font-weight: bold;
 }
-.field-label-inline .field-label,
-.field-label-inline .field-items {
+.field-label--inline .field__label,
+.field-label--inline .field__items {
   float:left; /*LTR*/
   padding-right: 0.5em;
 }
-[dir="rtl"] .field-label-inline .field-label,
-[dir="rtl"] .field-label-inline .field-items {
+[dir="rtl"] .field-label--inline .field__label,
+[dir="rtl"] .field-label--inline .field__items {
   float: right;
   padding-left: 0.5em;
 }
diff --git a/core/modules/system/templates/field.html.twig b/core/modules/system/templates/field.html.twig
index a0d527a..d4a00c8 100644
--- a/core/modules/system/templates/field.html.twig
+++ b/core/modules/system/templates/field.html.twig
@@ -29,13 +29,40 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes }}>
-  {% if not label_hidden %}
-    <div class="field-label"{{ title_attributes }}>{{ label }}:&nbsp;</div>
+{% if multiple %}
+  {# multiple value field  #}
+  {% if label_hidden %}
+    <div class="field field--multiple field__items {{ attributes.class }}" {{ content_attributes }}>
+      {% for delta, item in items %}
+        <div class="field__item"{{ item_attributes[delta] }}>{{ item }}</div>
+      {% endfor %}
+      </div>
+    </div>
+  {% else %}
+  {# multiple value with label #}
+    <div class="field field--multiple {{ attributes.class }}"{{ attributes }}>
+      <div class="field__label"{{ title_attributes }}>{{ label }}</div>
+      <div class="field__items"{{ content_attributes }}>
+        {% for delta, item in items %}
+          <div class="field__item"{{ item_attributes[delta] }}>{{ item }}</div>
+        {% endfor %}
+      </div>
+    </div>
   {% endif %}
-  <div class="field-items"{{ content_attributes }}>
-    {% for delta, item in items %}
-      <div class="field-item"{{ item_attributes[delta] }}>{{ item }}</div>
-    {% endfor %}
-  </div>
-</div>
+  {# end of multiple field  #}
+{% else %}
+  {# single value field #}
+  {% for delta, item in items %}
+    {% if label_hidden %}
+      {# single value no label#}
+      <div class="field field--single field__item {{ attributes.class }}"{{ attributes }}{{ content_attributes }}{{ item_attributes[delta] }}>{{ item }}</div>
+    {% else %}
+      {# single value with label#}
+      <div class="field field--single {{ attributes.class }}"{{ attributes }}>
+        <div class="field__label"{{ title_attributes }}>{{ label }}</div>
+        <div class="field__item" {{ content_attributes }} {{ item_attributes[delta] }}>{{ item }}</div>
+      </div>
+    {% endif %}
+  {% endfor %}
+  {# end single value field #}
+{% endif %}
diff --git a/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php b/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php
index d07ab4a..5d20b3c 100644
--- a/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php
+++ b/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php
@@ -349,12 +349,12 @@ function testTermInterface() {
     $this->assertText($edit['description[0][value]'], 'The randomly generated term description is present.');
 
     // Did this page request display a 'term-listing-heading'?
-    $this->assertTrue($this->xpath('//div[contains(@class, "field-taxonomy-term--description")]'), 'Term page displayed the term description element.');
+    $this->assertTrue($this->xpath('//div[contains(@class,"taxonomy-term")] //div[contains(@class, "field-name--description")]'), 'Term page displayed the term description element.');
     // Check that it does NOT show a description when description is blank.
     $term->setDescription(NULL);
     $term->save();
     $this->drupalGet('taxonomy/term/' . $term->id());
-    $this->assertFalse($this->xpath('//div[contains(@class, "field-taxonomy-term--description")]'), 'Term page did not display the term description when description was blank.');
+    $this->assertFalse($this->xpath('//div[contains(@class,"taxonomy-term")] //div[contains(@class, "field-name--description")]'), 'Term page did not display the term description when description was blank.');
 
     // Check that the description value is processed.
     $value = $this->randomName();
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 663d60c..0aace8e 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -120,7 +120,7 @@ ul.contextual-links,
 ul.links,
 ul.primary,
 .item-list .pager,
-div.field-type-taxonomy-term-reference,
+.field-type--taxonomy-term-reference,
 div.messages,
 div.meta,
 p.comment-time,
@@ -702,46 +702,46 @@ h1#page-title {
   color: #68696b;
   margin-bottom: -5px;
 }
-.submitted .field-name-field-user-picture img {
+.submitted .field-name--field-user-picture img {
   float: left; /* LTR */
   margin: 1px 20px 0 0; /* LTR */
 }
-[dir="rtl"] .submitted .field-name-field-user-picture img {
+[dir="rtl"] .submitted .field-name--field-user-picture img {
   float: right;
   margin-left: 20px;
   margin-right: 0;
 }
-.field-type-taxonomy-term-reference {
+.field-type--taxonomy-term-reference {
   margin: 0 0 1.2em;
 }
-.field-type-taxonomy-term-reference .field-label {
+.field-type--taxonomy-term-reference .field__label {
   font-weight: normal;
   margin: 0;
   padding-right: 5px; /* LTR */
 }
-[dir="rtl"] .field-type-taxonomy-term-reference .field-label {
+[dir="rtl"] .field--type-taxonomy-term-reference .field__label {
   padding-left: 5px;
   padding-right: 0;
 }
-.field-type-taxonomy-term-reference .field-label,
-.field-type-taxonomy-term-reference ul.links {
+.field-type--taxonomy-term-reference .field__label,
+.field-type--taxonomy-term-reference ul.links {
   font-size: 0.8em;
 }
-.view-mode-teaser .field-type-taxonomy-term-reference .field-label,
-.view-mode-teaser .field-type-taxonomy-term-reference ul.links {
+.view-mode-teaser .field-type--taxonomy-term-reference .field__label,
+.view-mode-teaser .field-type--taxonomy-term-reference ul.links {
   font-size: 0.821em;
 }
-.field-type-taxonomy-term-reference ul.links {
+.field-type--taxonomy-term-reference ul.links {
   padding: 0;
   margin: 0;
   list-style: none;
 }
-.field-type-taxonomy-term-reference ul.links li {
+.field-type--taxonomy-term-reference ul.links li {
   float: left; /* LTR */
   padding: 0 1em 0 0; /* LTR */
   white-space: nowrap;
 }
-[dir="rtl"] .field-type-taxonomy-term-reference ul.links li {
+[dir="rtl"] .field-type--taxonomy-term-reference ul.links li {
   padding: 0 0 0 1em;
   float: right;
 }
@@ -753,8 +753,8 @@ h1#page-title {
   margin-right: 236px;
   margin-left: 0;
 }
-.field-type-image img,
-.field-name-field-user-picture img {
+.field-type--image img,
+.field-name--field-user-picture img {
   margin: 0 0 1em;
 }
 ul.links {
@@ -775,10 +775,10 @@ ul.links {
 .comment h2.title {
   margin-bottom: 1em;
 }
-.comment .field-name-field-user-picture img {
+.comment .field-name--field-user-picture img {
   margin-left: 0; /* LTR */
 }
-[dir="rtl"] .comment .field-name-field-user-picture img {
+[dir="rtl"] .comment .field-name--field-user-picture img {
   margin-right: 0;
 }
 .comment {
@@ -1222,7 +1222,7 @@ div.messages {
 
 /* -------------- User Profile   -------------- */
 
-.profile .field-name-field-user-picture {
+.profile .field-name--field-user-picture {
   float: none;
 }