Formularios

Los formularios son muy importantes en una aplicación y el siguiente es el estandar A para darle estilos, prubalos en responsive también :)

La UI de formularios A no incluye un grilla o forma de distribuir los elementos, debes agregarle o crearle una.
La UI de formularios A no incluye estilos para <input type="submit"> debes usar una clase de botón para esto.

Ejemplo

<form>
    <label class="label_A">Nombre</label>
    <input type="text" class="input_A" placeholder="Escribe tu nombre" name="name">
    <label class="label_A">Email</label>
    <input type="text" class="input_A" placeholder="Escribe tu email" name="email">
    <label class="label_A">Sexo</label>
    <span class="radio_A u-inlineCenter">
        <input id="radio1" type="radio" name="sexo" checked>
        <label for="radio1" class="radio_A-label"></label>
        <label for="radio1" class="radio_A-text">Masculino</label>
    </span>
    <span class="radio_A u-inlineCenter">
        <input id="radio2" type="radio" name="sexo">
        <label for="radio2" class="radio_A-label"></label>
        <label for="radio2" class="radio_A-text">Femenino</label>
    </span>
</form>

input_A

<input type="text" class="input_A" placeholder="input de texto A">

.input_A {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #eff2e7;
  border: 1px solid #808080;
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #8d8d8d;
  font-size: 21px;
  height: 50px;
  outline: 0;
  padding: 0 15px;
  width: 100%;
}
.input_A.is-small {
  height: 34px;
  font-size: 15px;
}
.input_A::-webkit-inner-spin-button,
.input_A::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}
.input_A-triangle {
  position: relative;
}
.input_A-triangle:before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 45px;
  border-left: 1px solid #8d8d8d;
  content: "";
}
.input_A-triangle:after {
  position: absolute;
  top: 20px;
  right: 15px;
  border-left: 10px solid transparent;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  content: "";
  border-top-color: #16210b;
}

label_A

<label class="label_A">label_A Es la descripción de un input_A</label>

.label_A {
  display: block;
  font-size: 21px;
  margin-bottom: 10px;
}
.radio_A,
.checkbox_A {
  margin-right: 10px;
}
.radio_A > label,
.checkbox_A > label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.radio_A input[type="checkbox"],
.checkbox_A input[type="checkbox"],
.radio_A input[type="radio"],
.checkbox_A input[type="radio"] {
  display: none;
}
.radio_A input[type="checkbox"]:checked + .radio_A-label,
.checkbox_A input[type="checkbox"]:checked + .radio_A-label,
.radio_A input[type="radio"]:checked + .radio_A-label,
.checkbox_A input[type="radio"]:checked + .radio_A-label,
.radio_A input[type="checkbox"]:checked + .checkbox_A-label,
.checkbox_A input[type="checkbox"]:checked + .checkbox_A-label,
.radio_A input[type="radio"]:checked + .checkbox_A-label,
.checkbox_A input[type="radio"]:checked + .checkbox_A-label {
  color: #7dcd40;
  font-size: 30px;
  line-height: 17px;
  text-align: center;
  position: relative;
}
.radio_A-text,
.checkbox_A-text {
  margin-right: 20px;
  margin-left: 5px;
}
.radio_A-label,
.checkbox_A-label {
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14.2px;
  margin-right: 5px;
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.radio_A-label:before,
.checkbox_A-label:before {
  background-color: #eff2e7;
  border: 1px solid #000;
  content: "";
  display: block;
  height: 22px;
  width: 22px;
  vertical-align: middle;
}

radio_A

<span class="radio_A u-inlineCenter">
    <input id="radio1" type="radio" name="radio" checked>
    <label for="radio1" class="radio_A-label"></label>
    <label for="radio1" class="radio_A-text">Opción 1</label>
</span>
<span class="radio_A u-inlineCenter">
    <input id="radio2" type="radio" name="radio">
    <label for="radio2" class="radio_A-label"></label>
    <label for="radio2" class="radio_A-text">Opción 2</label>
</span>

.radio_A {
  font-size: 13px;
}
.radio_A-label:before {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.radio_A input[type="radio"]:checked + .radio_A-label:after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 6px;
  left: 6px;
  background: #7dcd40;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

checkbox_A

<span class="checkbox_A u-inlineCenter">
    <input id="checkbox1" type="checkbox" name="radio" checked>
    <label for="checkbox1" class="checkbox_A-label"></label>
    <label for="checkbox1" class="checkbox_A-text">Opción 1</label>
</span>
<span class="checkbox_A u-inlineCenter">
    <input id="checkbox2" type="checkbox" name="radio">
    <label for="checkbox2" class="checkbox_A-label"></label>
    <label for="checkbox2" class="checkbox_A-text">Opción 2</label>
</span>

.checkbox_A-label:before {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.checkbox_A input[type="checkbox"]:checked + .checkbox_A-label:before {
  content: "\2713";
}

select_A

<div class="input_A-container input_A-triangle">
    <select class="select_A" data-stripe="exp_month" required="">
        <option value="" disabled="">Mes</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
</div>

.select_A {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #eff2e7;
  border: 1px solid #808080;
  color: #dddddc;
  font-size: 21px;
  height: 50px;
  outline: 0;
  padding: 0 15px;
  width: 100%;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
@media only screen and (max-width: 767px) {
  .input_A,
  .select_A {
    height: 35px;
    font-size: 16px;
  }
  .input_A-triangle:after {
    top: 15px;
    border-left: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 5px solid transparent;
    content: "";
    border-top-color: #16210b;
  }
  .input_A-triangle:before {
    right: 30px;
  }
  .label_A {
    font-size: 14px;
  }
  .sprite-cvc {
    zoom: 0.8;
  }
}
body {
  font-family: "Arial";
}
.input_A {
  margin-bottom: 20px;
}