Week 7: Enhancing Framework UI/UX

Forms, Buttons & Utility Classes

Outside of a basic grid & typography, most frameworks also include some basic styles for our common components like forms and buttons. It's also common to include some utility classes for things that you commonly use like media queries, clear floats, et al.

Your frameworks styling should have enough styling to look consistent across device and platform, but general enough to be used as a baseline for any site you build going forward.

Table of Contents

Forms
Buttons
- States
Utility Classes
General

Forms

Forms can be fairly complex, but setting up the styling for them doesn't have to be if you're using Sass.

Let's starting by creating a style rule selector that captures the most common form elements to apply a common baseline style.

styles/base/_forms.scss

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="checkbox"],
input[type="radio"],
textarea,
select {
  ...
}

Any styles we apply here will be applied across all of our form elements we've selected.

We'll break out some styles that are specific to each element out here shortly.

(Also notice we didn't style certain elements like input[type=button] or input[type=submit]; these behave and appear as buttons in the UI, so we include them in our _buttons.scss)

Let's first remove the default styling applied on WebKit-based mobile devices (iOS & Android)

styles/base/_forms.scss

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="checkbox"],
input[type="radio"],
textarea,
select {
  appearance: none;
}

We also need to give our forms a common style for different states like :focus and :active. These states are typically styled the same.

styles/base/_forms.scss

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="checkbox"],
input[type="radio"],
textarea,
select {
  appearance: none;

  &:focus,
  &:active {
    outline: 0;
  }
}

By giving those states an outline: 0, it removes the default blue/grey outline styling that browsers apply by default.

Most frameworks to apply their own common styling for these states using a simple border or box-shadow styling.

styles/base/_forms.scss

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="checkbox"],
input[type="radio"],
textarea,
select {
  appearance: none;

  &:focus,
  &:active {
    outline: 0;
    box-shadow: 0 0 3px rgba(64, 120, 192, 0.25);
  }
}

From here, we can break out individual elements to give them their own unique styles for our framework.

styles/base/_forms.scss

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"] {
  ...
}

input[type="checkbox"],
input[type="radio"]  {
  ...
}

input[type="checkbox"]  {
  ...
}

input[type="radio"]  {
  ...
}

textarea {
  ...
}

select {
  ...
}

Some common things to consider for your framework is giving your elements a default height or simple styling using border or box-shadow

There are also other common form elements you can also include in your framework as well, like label, legend, fieldset. Once you have a good set of styles for your base form, you may want to consider adding those to your project and seeing how you'd like to style them.

References:

Codepen: Form Styling Demo

Buttons

For our button styles, we want to create a general styling to serve as a good baseline to further create any polished button style we may need in the future.

Similar to our forms, we'll set up a base style rule that will target all of our button styles and then apply specific button type styles later.