Groundwork Test: Buttons
This page generates button elements using classes and extends. Things are good when:
Elements appear as they should regardless of whether classes or extends are used.
Tags
Classes
Placeholders
<button class="">
.button.
.extend-button.
<button class=" active">
.button..active
.extend-button..active
<button class=" disabled">
.button..disabled
.extend-button..disabled
<button class=" small">
.button..small
.extend-button..small
<button class=" large">
.button..large
.extend-button..large
<button class=" square">
.button..square
.extend-button..square
<button class=" round">
.button..round
.extend-button..round
<button class=" block">
.button..block
.extend-button..block
<button class="info">
.button.info
.extend-button.info
<button class="info active">
.button.info.active
.extend-button.info.active
<button class="info disabled">
.button.info.disabled
.extend-button.info.disabled
<button class="info small">
.button.info.small
.extend-button.info.small
<button class="info large">
.button.info.large
.extend-button.info.large
<button class="info square">
.button.info.square
.extend-button.info.square
<button class="info round">
.button.info.round
.extend-button.info.round
<button class="info block">
.button.info.block
.extend-button.info.block
<button class="alert">
.button.alert
.extend-button.alert
<button class="alert active">
.button.alert.active
.extend-button.alert.active
<button class="alert disabled">
.button.alert.disabled
.extend-button.alert.disabled
<button class="alert small">
.button.alert.small
.extend-button.alert.small
<button class="alert large">
.button.alert.large
.extend-button.alert.large
<button class="alert square">
.button.alert.square
.extend-button.alert.square
<button class="alert round">
.button.alert.round
.extend-button.alert.round
<button class="alert block">
.button.alert.block
.extend-button.alert.block
<button class="warning">
.button.warning
.extend-button.warning
<button class="warning active">
.button.warning.active
.extend-button.warning.active
<button class="warning disabled">
.button.warning.disabled
.extend-button.warning.disabled
<button class="warning small">
.button.warning.small
.extend-button.warning.small
<button class="warning large">
.button.warning.large
.extend-button.warning.large
<button class="warning square">
.button.warning.square
.extend-button.warning.square
<button class="warning round">
.button.warning.round
.extend-button.warning.round
<button class="warning block">
.button.warning.block
.extend-button.warning.block
<button class="error">
.button.error
.extend-button.error
<button class="error active">
.button.error.active
.extend-button.error.active
<button class="error disabled">
.button.error.disabled
.extend-button.error.disabled
<button class="error small">
.button.error.small
.extend-button.error.small
<button class="error large">
.button.error.large
.extend-button.error.large
<button class="error square">
.button.error.square
.extend-button.error.square
<button class="error round">
.button.error.round
.extend-button.error.round
<button class="error block">
.button.error.block
.extend-button.error.block
<button class="success">
.button.success
.extend-button.success
<button class="success active">
.button.success.active
.extend-button.success.active
<button class="success disabled">
.button.success.disabled
.extend-button.success.disabled
<button class="success small">
.button.success.small
.extend-button.success.small
<button class="success large">
.button.success.large
.extend-button.success.large
<button class="success square">
.button.success.square
.extend-button.success.square
<button class="success round">
.button.success.round
.extend-button.success.round
<button class="success block">
.button.success.block
.extend-button.success.block
<button class="green">
.button.green
.extend-button.green
<button class="green active">
.button.green.active
.extend-button.green.active
<button class="green disabled">
.button.green.disabled
.extend-button.green.disabled
<button class="green small">
.button.green.small
.extend-button.green.small
<button class="green large">
.button.green.large
.extend-button.green.large
<button class="green square">
.button.green.square
.extend-button.green.square
<button class="green round">
.button.green.round
.extend-button.green.round
<button class="green block">
.button.green.block
.extend-button.green.block
<button class="blue">
.button.blue
.extend-button.blue
<button class="blue active">
.button.blue.active
.extend-button.blue.active
<button class="blue disabled">
.button.blue.disabled
.extend-button.blue.disabled
<button class="blue small">
.button.blue.small
.extend-button.blue.small
<button class="blue large">
.button.blue.large
.extend-button.blue.large
<button class="blue square">
.button.blue.square
.extend-button.blue.square
<button class="blue round">
.button.blue.round
.extend-button.blue.round
<button class="blue block">
.button.blue.block
.extend-button.blue.block
<button class="purple">
.button.purple
.extend-button.purple
<button class="purple active">
.button.purple.active
.extend-button.purple.active
<button class="purple disabled">
.button.purple.disabled
.extend-button.purple.disabled
<button class="purple small">
.button.purple.small
.extend-button.purple.small
<button class="purple large">
.button.purple.large
.extend-button.purple.large
<button class="purple square">
.button.purple.square
.extend-button.purple.square
<button class="purple round">
.button.purple.round
.extend-button.purple.round
<button class="purple block">
.button.purple.block
.extend-button.purple.block
<button class="yellow">
.button.yellow
.extend-button.yellow
<button class="yellow active">
.button.yellow.active
.extend-button.yellow.active
<button class="yellow disabled">
.button.yellow.disabled
.extend-button.yellow.disabled
<button class="yellow small">
.button.yellow.small
.extend-button.yellow.small
<button class="yellow large">
.button.yellow.large
.extend-button.yellow.large
<button class="yellow square">
.button.yellow.square
.extend-button.yellow.square
<button class="yellow round">
.button.yellow.round
.extend-button.yellow.round
<button class="yellow block">
.button.yellow.block
.extend-button.yellow.block
<button class="orange">
.button.orange
.extend-button.orange
<button class="orange active">
.button.orange.active
.extend-button.orange.active
<button class="orange disabled">
.button.orange.disabled
.extend-button.orange.disabled
<button class="orange small">
.button.orange.small
.extend-button.orange.small
<button class="orange large">
.button.orange.large
.extend-button.orange.large
<button class="orange square">
.button.orange.square
.extend-button.orange.square
<button class="orange round">
.button.orange.round
.extend-button.orange.round
<button class="orange block">
.button.orange.block
.extend-button.orange.block
<button class="red">
.button.red
.extend-button.red
<button class="red active">
.button.red.active
.extend-button.red.active
<button class="red disabled">
.button.red.disabled
.extend-button.red.disabled
<button class="red small">
.button.red.small
.extend-button.red.small
<button class="red large">
.button.red.large
.extend-button.red.large
<button class="red square">
.button.red.square
.extend-button.red.square
<button class="red round">
.button.red.round
.extend-button.red.round
<button class="red block">
.button.red.block
.extend-button.red.block
<button class="asphalt">
.button.asphalt
.extend-button.asphalt
<button class="asphalt active">
.button.asphalt.active
.extend-button.asphalt.active
<button class="asphalt disabled">
.button.asphalt.disabled
.extend-button.asphalt.disabled
<button class="asphalt small">
.button.asphalt.small
.extend-button.asphalt.small
<button class="asphalt large">
.button.asphalt.large
.extend-button.asphalt.large
<button class="asphalt square">
.button.asphalt.square
.extend-button.asphalt.square
<button class="asphalt round">
.button.asphalt.round
.extend-button.asphalt.round
<button class="asphalt block">
.button.asphalt.block
.extend-button.asphalt.block