Drupal 8 Fields Default Markup & Structure

A solution for Drupal8 fields in the theme layer.
comments should be added to the issue - the reason i didnt write it inside of the issueque is that it would be to complex to read
Feedback & pullrequest are more than welcome ;)
mortendk @mortendk

issue: Field default markup - removing the divitis on drupal.org
As a guideline i have used the Principles: Waypoints to guide us as simple rules.

4 patterns instead of 1

Drupals fields exist in 4 different basic variations, that Drupal 7 tries to print out in the same structure, that is the reason for the divitis & 3 div's thats wrapping a single item. Thats a huge pain for everybody that works in the frontend, cause of the cruft that we have today. We are wrapping the data in the same structure even when that the output is different, and should be different patterns:

  1. Single value
  2. Single value with Label
  3. Multiple values
  4. Multiple values with Label

Keeping the exact same markup pattern, make sense from an academic point of view, but is not practial in the real world .its easy for overcome the issues that can occour when the patterns change with css.
By having a better markup pattern, the label more information to work with & its possible to get rid of the float:left & clearfix issues, insteadd inline-block or inline can be used prober.

Markup Patterns

FYI: In all of the examples i have removed the names of the fields, im only concerned about the core elements (label, item, wrapper) im using the names were using in Drupal right now (drupal7)

Single field-item


  <div class="field-single field-item"> Data </div>

<div class="field-single">
  <div class="field-label">label</div>
  <div class="field-item">data</div>
</div>

.field-item is the data wrapper
.field-single is always added to the outer wrapper.
if theres a label, the field-item is following the fields data. All depending the labels the field-item can be targeted in different ways:

 
/* --- Field Item */
.field-item{  
  /* default for all field-item */
}

.field-single .field-item{ 
  /* single .field-item overwrite */
}

.field-single.field-item{  
  /* single .field-item with no label overwrite */
}

.field-single .field-item, 
.field-single.field-item{  
  /* both of single field-item overwrite */
}

/* --- Field Item */
.field-label{
  /* all field-label */
}

.field-single .field-label{
  /* single field label*/
}

Multiple value fields


<div class="field-multiple field-items">
  <div class="field-item">one </div>
  <div class="field-item">two</div>
</div>

<div class="field-multiple">
  <div class="field-label">label</div>
  <div class="field-items">
    <div class="field-item">data one </div>
    <div class="field-item">data two</div>
  </div>
</div>

.field-multiple is always added to the outer wrapper.
.field-items is used as wrapper for the multiple .field-item.
If theres a label, .field-items is following the field-items . All depending the labels the field-item can be targeted in different ways:


/* --- Field Item --------------------------*/
.field-item{  
  /* default for all field-item */
}

.field-multiple .field-item{
  /* multiple field-item's with a label */
}

.field-multiple.field-items{
  /* multiple field-item's with no label */
}

.field-multiple .field-item, 
.field-multiple.field-items,
.field-items .field-item{
  /* multiple field-item */
}

/* --- Field Label */

.field-label{
  /* all field-label */
}

.field-multiple .field-label{
  /* single field label*/
}

Label status

The .field-label-[status] is added to the out wrapper


<div class="field-single/field-multiple field-label-above">
  <div class="field-label">label</div>
  ....
</div>

.field-label-hidden{ 
  /* label is set to hidden from the ui & is not printed out */

}

.field-label-above{ 
  /* label set to above from the ui */
}

.field-label-inline{ 
  /* label set to be inline from the ui */
}

Field Display test 1:2

Using display:inline-block

label inline
Data
label inline
Data
label above
Data
label above
Data
label inline
data
data
data
data
label inline inline items
data
data
data
data
label above
data
data
data
data
label above inline items
data
data
data
data

/*  -- base  ---*/
.field-label{
  font-weight: bold;
}
.field-label:after{ 
 content: " :";
}
.field-item{ font-style: italic;}

/* inline field labels */
.field-label-inline .field-label{
  vertical-align: top; 
  display:inline-block;
  color:black;
}

.field-label-above .field-label{
  color:brown;
}

/*------------ items ------------------------/*
/* inline label single field  2 variations to overwrite dont overwrite the field items*/
.field-single.field-label-inline .field-item{
  display: inline-block;
  color:red;
}
.field-label-inline > .field-item{ }

.field-label-inline .field-items{
  display: inline-block;
}
/* field item variations single */
.field-items .field-item{
  color:blue;
}
/* field item variations multiple */
.field-label-above .field-items .field-item{
  color:green;
}

/* field items inline  */
.test-item-inline .field-items .field-item{
  display: inline-block;
}

Field Display test: fLoats

label inline
Data
label inline
Data
label above
Data
label above
Data
label inline
data
data
data
data
label inline inline items
data
data
data
data
label above
data
data
data
data
label above inline items
data
data
data
data

Drupal7

Drupals pattern is always expecting it to be a multiple field with a label, that created the divitis, thats not nessesary.
Drupals markup make sense when a field always have multiple values.
.clearfix is added as a hardcoded class - which makes the layout of a field less flexible.

single value no label


<div class="field field-name-field-text field-type-text field-label-hidden">
  <div class="field-items">
    <div class="field-item even">data</div>
  </div>
</div>

.field-items .field-item{ } targets both multiple & single .field-item
Heavy cruft (divitis) 3 wrappers where only one is needed.


single value above


<div class="field  field-label-above">
  <div class="field-label">text:&nbsp;</div>
  <div class="field-items">
    <div class="field-item even">data</div>
  </div>
</div>

.field-label have no idea of single vs multiple values, harder to use display:inline-block
div.field-items is cruft
.field-items .field-item, theres no difference between a single value field & multivalue field

single value inline


<div class="field field-label-inline clearfix">
  <div class="field-label">text:&nbsp;</div>
  <div class="field-items">
    <div class="field-item even">data</div>
  </div>
</div>

.cleafix hardcoded, makes the field less flexible
.field-label have no idea of the single vs multiple values
div.field-items is cruft
.field-items .field-item, theres no difference between a single value .field-item

Mulitiple no label


<div class="field field-label-hidden">
  <div class="field-items">
    <div class="field-item even">data</div>
    <div class="field-item odd">data2</div>
    <div class="field-item even">data3</div>
  </div>
</div>

div.field-items is cruft (combine it with .field)

multi + label


<div class="field field-label-above">
  <div class="field-label">text:&nbsp;</div>
  <div class="field-items">
    <div class="field-item even">data</div>
    <div class="field-item odd">data2</div>
    <div class="field-item even">data3</div>
  </div>
</div>

field-label dont know if its a single or multiple field

Multi label inline


<div class="field field-label-inline clearfix">
  <div class="field-label">text:&nbsp;</div>
  <div class="field-items">
    <div class="field-item even">data</div>
    <div class="field-item odd">data2</div>
    <div class="field-item even">data3</div>
  </div>
</div>

.clearfix added
.field-label dont know about the fields multiple single

Pro

  1. Remove cruft & Divitis
  2. .field-label is aware of the items
  3. possible to use display:inline-block, instad of float:left

Cons

  1. Markup pattern changes
  2. item.html.twig can be more complicated
  3. css can be a little bit more compliced (for a noob)

Reading the waypoint to guide os for Drupal8 theming (Principles: Waypoints to guide us) its clear that fields must be changed, the cons are fixable & it will solve a huge issue that Drupal haves & makes frontenders hate it

/mortendk