2 Molecules

Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.

For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.

Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.

http://bradfrostweb.com/blog/post/atomic-web-design/#molecules

2.3 Forms

Combinations of form elements.

2.3.1 Label above

Add .label-above on the label to make it appear above insted of next to the input field.

Text Input *

<label for="text" class="label-above">Text Input <abbr title="Required">*</abbr></label>
<input id="text" type="text" placeholder="Text Input">

2.3.2 Form with heading

Form elements with a heading insted of label.

Har du fasttelefon?

Yes No

<h2 class="form-title">Har du fasttelefon?</h1>
<input id="radio4" name="radio1" type="radio" class="radio-btn" value="yes"><label for="radio4" class="radio-btn-label">Yes</label>
<input id="radio5" name="radio1" type="radio" class="radio-btn" value="no"><label for="radio5" class="radio-btn-label">No</label>