<div class="container max-width-sm padding-y-lg">
 <form>
  <fieldset class="margin-bottom-md">
   <legend class="form-legend">Form Legend</legend>

   <div class="margin-bottom-sm">
    <div class="grid gap-sm">
     <div class="col-6@md">
      <label class="form-label margin-bottom-xxs" for="input-name">Name:</label>
      <input class="form-control width-100%" type="text" name="input-name" id="input-name" required>
     </div>

     <div class="col-6@md">
      <label class="form-label margin-bottom-xxs" for="input-email">Email:</label>
      <input class="form-control width-100%" type="email" name="input-email" id="input-email" placeholder="email@myemail.com">
     </div>
    </div>
   </div>

   <div class="margin-bottom-sm">
    <label class="form-label margin-bottom-xxs" for="input-invalid">Invalid:</label>
    <input class="form-control width-100%" type="text" name="input-invalid" id="input-invalid" aria-invalid="true" value="invalid data">
   </div>

   <div>
    <label class="form-label margin-bottom-xxs" for="textarea">Textarea:</label>
    <textarea class="form-control width-100%" name="textarea" id="textarea"></textarea>
   </div>
  </fieldset>

  <div class="text-right">
   <button class="btn btn--primary">Submit</button>
  </div>
 </form>
</div>
// --------------------------------

// Forms | ­čÉ×CodyFrame https://codyhouse.co/ds/get-started

// --------------------------------

.form-control { // basic form element style
  --form-control-padding-y: var(--space-xxs); // padding top/bottom
  --form-control-padding-x: var(--space-xs); // padding left/right
  --form-control-radius: 0.25em; // border radius
  --form-control-font-size: 1em; // font size
  line-height: 1.2;
  background-color: var(--color-bg);
  border: 2px solid var(--color-contrast-low);
  transition: .2s;

  &::placeholder {
    opacity: 1;
    color: var(--color-contrast-medium);
  }

  &:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px alpha(var(--color-primary), 0.2);
  }
}

.form-control--error,
.form-control[aria-invalid="true"] {
  border-color: var(--color-error);

  &:focus {
    box-shadow: 0 0 0 2px alpha(var(--color-error), 0.2);
  }
}

.form-control--disabled,
.form-control[disabled], 
.form-control[readonly] {
  cursor: not-allowed;
}

.form-legend {
  font-size: var(--text-md);
}

.form-label {
  font-size: var(--text-sm);
}
View Compiled

External CSS

  1. https://assets.codepen.io/148866/codyframe-2-7-6-all-but-forms.css
  2. https://codepen.io/codyhouse/pen/oNxLjqp

External JavaScript

This Pen doesn't use any external JavaScript resources.