Component

Form with basic CSS

This is the same as the Form component but with very basic CSS added.

 

Better classes

The classes on a form has been changed to:

{%
  set classes = [
    'form',
    'form--' ~ element['#form_id']|clean_class
  ]
%}

Which gives you the following classes:

.form {}
.forn--user-login-form {}

 

Extra template suggestions

Added a more specific template suggestion. One based upon the ID of the form.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'form' -->
<!-- FILE NAME SUGGESTIONS:
   x form--user-login-form.html.twig
   * form.html.twig
-->

In above example:

  • user-login-form is the ID of the form

 

Extra functions

Create the possibility to have form-specific preprocess functions.

So inside form--user-login-form.theme you could now have this function:

<?php

/**
 * Implements template_preprocess_hook().
 */
function compony_preprocess_form__user_login_form(&$variables, $hook) {
  // Do custom preprocessing here, 
  // only for the user-login-form. 
}

(Docs: Extending hooks yourself)

Form theming in Drupal can be very painful, therefor we are taking a robust approach to making the life of frontend fast by laying out some groundrules:

  1. Form-items always have to live in fieldsets.
  2. We don't support #markup type form-elements, as it is impossible to predict what HTML will be rendered in there.
  3. We don't support the #prefix and #suffix on form-fields defined in the backend, as it is impossible to predict what HTML will be rendered in there.

Complying with these rules are the absolute minimum for a frontender to be able to set up a design system. It's not because it's possible in Drupal's Form system, that it's a possibility for a frontender to theme.

form
Drupal Core
Using Sass
Responsive
Accessible
HTML
CSS
Flat design
35 downloads
horizontal beam No open issue