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.

Specifications

Machine name

form

Built upon

Drupal Core

Perks

Using Sass
Responsive
Accessible

Building blocks

HTML
CSS

Inspired by

Flat design

Stats

Public component
89 downloads
No open issue

Contributors