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.
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:
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.
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)
<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*/
}
<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*/
}
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 */
}
Using display:inline-block
/* -- 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;
}
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.
<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.
<div class="field field-label-above">
<div class="field-label">text: </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
<div class="field field-label-inline clearfix">
<div class="field-label">text: </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
<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)
<div class="field field-label-above">
<div class="field-label">text: </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
<div class="field field-label-inline clearfix">
<div class="field-label">text: </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
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