What does Pure change on a plain HTML form?

Load Pure’s ready-made stylesheet and choose a form layout. For an email and password form, a stacked layout puts a label above each field. Your HTML still connects the label to its field and your app decides what happens on submission.

A class is a name that tells the stylesheet which visual rules to apply. You can bring in the whole stylesheet or pick only the modules your page needs.

How do you change the style without replacing the form?

Put your own stylesheet after Pure and add a rule for the forms you want to change. Keep the original fields and labels. If you use Pure’s responsive grid classes, load its separate responsive grid stylesheet and check which widths get which layout.

For a settings page, the narrow view can put controls one under another. On a wider screen you can put two groups beside each other. Confirm the page still works when a label is long.

What should you keep when you update or remove Pure?

Pure is BSD-3-Clause licensed. Keep the version you use and the stylesheet with your own changes. Version 3 removed Internet Explorer support and changed some grid behavior, so check any browser and grid you still depend on before updating.

If you switch libraries, keep the labels and submission logic and replace the old styling classes. Check which rules depended on Pure before removing its file.

How can you plan a form styling check without sending anything?

Draw an email form on paper at phone and desktop widths. Use made-up text and leave submission disconnected.

Draw the fields and labels
Keep the label visible and put the field below it. Mark what the field should look like when someone reaches it with Tab.
Choose the layout
Sketch a stacked form on the phone. If you want two groups beside each other on desktop, mark the responsive grid stylesheet as a separate file to confirm.
Change one visual rule
Choose a different button color in your own stylesheet. The button label, field order and planned action should stay the same.