Reading Time: 3 minutes

So a good while back I released this CSS utility / NPM Package called typography-baseline. It was a handy way to kickstart complex web projects because it set base typographic styles.

Then I needed something for tables. And then I needed something for forms, too.

So, well, you guessed it. Now there are three baselines. So let me introduce you to the Form Baseline.

Introducing the Form Baseline

Here’s the codepen of it in action:

See the Pen Form Baseline by Paceaux (@paceaux) on CodePen.

What it’s good for…

Starting your forms

I found this incredibly handy for building some very basic editing tools in single-page applications. If you’re trying to build an app that uses forms, but you don’t want to get bogged down with the minutia of making forms pretty, then this is a great way to get started.

The nice thing is that it’s just the basics of form controls and fields. You still have plenty that you could do to make your forms snazzier.

Covering your form semantics

Just like its friends the Typography and Table baseline, this uses every HTML form control and element, along with many of the various patterns and attributes that come along. This is your chance to see all the different form controls in one place.

“low design” designs

Out of all the baselines, this is probably the most design intensive. But even in that spirit, it’s still very minimal. You’ll find that it focuses on sizing, borders, padding, and some interactive states.

It’s Reasonably Unopinionated

• Focuses on text, spacing, and padding so as to not disrupt layout too much
• Styles with the lowest reasonable specificity so it can integrate on a project midstream (specificity stays between 0,2,0 and 0,0,1)
• Uses the same neutral color palette from the Typography Baseline so it blends well with an existing color scheme
• Written in good ol’ fashioned CSS; you don’t have to upset your LESS/SAASS/STYLUS/PostCSS build
• Uses CSS Variables so that overwriting is about changing variables, not raising specificity

Just like you’ll see in the other baselines, there’s a few opinions you should know:

• em for font-size and a unitless line-height
• rem for any left/right spacing

And there’s some stuff that I personally think make forms nicer:

• borders on fields and fieldsets
• focus states that change text and border color
• disabled changing background color

It’s independent of its friends Typography Baseline and Table Baseline

This is, again, the thing that sets this apart from other CSS frameworks and libraries. This is a baseline and doesn’t assume you want to bring in dependencies just to style an input. You don’t need the Typography Baseline or Table Baseline, but it’ll inherit from the Typography Baseline if you use it.

The form baseline uses CSS variables and their ability to have a default value. This means it sets up its own set of variables that could use variables set by the Typography Baseline, if it’s there. If not, it’s got the original version there.

Just like how the Table Baseline sets variables on the table element, this sets variables on the form element.

Take note how this sets text-sizes that come from the Typography Baseline.

Try it out

form {
    /*=====
        #Text #Size
    =====*/
	--formBiggestTextSize: var(--biggerTextSize, 1.2em);
	--formBaseTextSize: var(--baseTextSize, 1em);
	--formSmallestTextSize: var(--smallTextSize, .8em);

    /*=====
        #Title #Size
    =====*/
    --formBiggestTitleSize: var(--baseTitleSize, 1.5em);
    --formBaseTitleSize: var(--formBiggestTextSize);
    --formSmallestTitleSize: var(--formBaseTextSize);

    --formControlSize: var(--formBaseTextSize);
    --formLabelSize: var(--formBaseTextSize);
    --formTitleSize: var(--formBaseTitleSize);
}

It introduces a scalable way to think about interactions

Probably the most notable thing to call out here is the variable names and how they are used with the UI

It sets up interactive bits into controls (input, select, textarea) and control groups (fieldsets, usually)

    /*=====
        #Spacing
    =====*/
    --controlVertPadding: .375em;
    --controlHorzPadding: .75rem;
    --controlPadding: var(--controlVertPadding) var(--controlHorzPadding);
    --controlGroupPadding: .618em .618rem;

    
    /*=====
        #Colors
    =====*/
    --controlColor:  var(--colorNeutralDark, rgb(165,165,165));
    --controlGroupColor: var(--colorNeutralDark, rgb(110,110,110));
    --controlBackgroundColor: rgb(255, 255, 255);
    --controlGroupBackgroundColor: transparent;
    --controlBorderColor: var(--controlColor);

It consolidates hover and focus into the idea of interest

    /*=====
        #Colors #Hover #Focus
    =====*/
    --controlColorInterest: var(--colorNeutralDarker);
    --controlBackgroundColorInterest: var(--controlBackgroundColor);
    --controlBorderColorInterest: var(--controlColorInterest);
    

It places controls into the states of active and deactivated

    /*=====
        #Colors #Active
    =====*/
    --controlColorActive: var(--colorNeutralDarker);
    --controlBackgroundColorActive: var(--controlBackgroundColor);
    --controlBorderColorActive: var(--controlBorderColorActive);
      
    /*=====
        #Colors #Deactivated
    =====*/
    --controlColorDeactivated: var(--controlColor);
    --controlBackgroundColorDeactivated: var(--colorNeutralLighter);
    --controlBorderColorDeactivated: var(--controlBackgroundColorDeactivated);

It defines dynamic styles by what they communicate to the end user

    /*=====
        #Colors #Inform
    =====*/
    --controlColorAlert: var(--colorWarmest, rgb(168, 62, 0));
    --controlColorAttention: var(--colorWarmer, rgb(168, 118, 0));

Try it out

Fork it on Github, play with it on Codepen, or add it to your project with npm i form-baseline.css. I’ve used this with great success on client projects.