The form layout is used to divide a form into different parts containing fieldsets, legends and input fields. This does not mean that every form needs to be split this way, not every form has fieldset or legends.
This makes heavy use of l-grid, mainly for splitting up the form-grid with its
input fields. This layout is only applied to <form>. Whenever an input is
used, even if they are placed full width, underneath each other the l-grid
still must be applied to keep consistency in slicing a layout form.
<form class="l-form">
l-form
<fieldset class="l-form__fieldset">
l-form__fieldset
<legend class="l-form__subtitle">l-form__subtitle</legend>
<div class="l-form__grid">
l-form__grid
</div>
</fieldset>
<fieldset class="l-form__fieldset">
l-form__fieldset
<legend class="l-form__subtitle">l-form__subtitle</legend>
<div class="l-form__grid">
l-form__grid
</div>
</fieldset>
<footer class="l-form__footer">
l-form__footer
</footer>
</form>
The l-form__grid makes heavy use of l-grid and l-grid--with-margins to split up its contents of input fields in seperate parts. This makes sure that the form layout is responsive as well.
<form class="l-form">
l-form
<div class="l-form__grid">
<div class="l-grid l-grid--with-margins">
<div class="l-grid__col-6-12">input</div>
<div class="l-grid__col-6-12">input</div>
<div class="l-grid__col-12-12">select</div>
<div class="l-grid__col-3-12">input</div>
<div class="l-grid__col-4-12">input</div>
<div class="l-grid__col-5-12">input</div>
</div>
</div>
<div class="l-form__grid">
<div class="l-grid l-grid--with-margins">
<div class="l-grid__col-4-12">input</div>
<div class="l-grid__col-4-12">input</div>
<div class="l-grid__col-4-12">select</div>
<div class="l-grid__col-12-12">input</div>
</div>
</div>
<footer class="l-form__footer">
l-form__footer
</footer>
</form>