Button similarity
When buttons of different types all sit next to each other.
Then
they all look the identical and are aligned.
- Check looks
- Check hover
- Check focus
Buttons without spaces
When buttons of different types all sit next to each other without
spaces between.
Then they all look the identical and are aligned.
- Check looks
- Check hover
- Check focus
class="primary"
class="negative"
class="standard"
Buttons next to text
When buttons are next to text.
Then the text all sits on the same
line.
- Check looks
- Check hover
- Check focus
foo
foo
foo
foo
foo
foo
foo
foo foo
foo
foo
foo
foo
foo
Buttons next to inputs
When buttons are next to text inputs.
Then the line stays flat.
- Check looks
- Check hover
- Check focus
File input button
When the file input button is near normal buttons.
Then they look
similar.
- Check looks
- Check hover
- Check focus
Labels wrapping and next to form fields
When a form field is next to label.
Then it aligns similarly to
when it wraps the form field.
oxo
oxo
oxo
Labels next to form fields
When labels with different form fields sit together
Then they all a vertically aligned similarly.
Labels wrapping form fields
When labels with different content sit together
Then they all a vertically aligned similarly.
Labels styled as buttons
When labels styled as buttons with different content sit together
Then they all a vertically aligned almost the same.
Scaled controls
When controls are scaled with font-size only
Then they all a vertically aligned similarly.