Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sciactive/pform
The PForm CSS design.
https://github.com/sciactive/pform
Last synced: about 2 months ago
JSON representation
The PForm CSS design.
- Host: GitHub
- URL: https://github.com/sciactive/pform
- Owner: sciactive
- License: apache-2.0
- Created: 2012-04-17T22:33:29.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T10:26:22.000Z (almost 2 years ago)
- Last Synced: 2024-09-24T09:49:12.050Z (3 months ago)
- Language: HTML
- Homepage: http://sciactive.com/pform/
- Size: 739 KB
- Stars: 21
- Watchers: 7
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PForm - Pixel Perfect Forms
[](https://www.npmjs.com/package/pform) [](https://packagist.org/packages/sciactive/pform) [](https://packagist.org/packages/sciactive/pform) [](https://github.com/sciactive/pform/issues)
PForm is a pixel perfect CSS form layout library.
See http://sciactive.com/pform/ for examples.
## Installation
You can install PForm with NPM, Composer or Bower.
```sh
npm install pform
```
```sh
composer require sciactive/pform
```
```sh
bower install https://github.com/sciactive/pform.git
```
## Getting Started
PForm comes with the following files:
* `pform.css` - The main stylesheet.
* `pform-bootstrap.css` - Use this if you also use Bootstrap.
* `pform-ie-lt-8.css` - Use this to support Internet Explorer 6 and 7.
* `pform-ie-lt-6.css` - Use this to support Internet Explorer 5.01 and 5.5.
So here's how you'd include them all:
```html
```
Notice the conditional comments to serve older versions of IE the right files. If you have to support older versions of IE, PForm can do it.
Now you can use PForm like this:
```html
Login
Username
Password
Remember Me
Lasts for 2 weeks.
```
Here's the same form, built with a fieldset:
```html
Login
Username
Password
Remember Me
Lasts for 2 weeks.
```
## Features
### Layouts
PForm has two different layout options, Inline (default) and Block. To use block layout for an entire form, add the `pf-layout-block` class to the `pf-form` element. To use block layout for an individual element, add the `pf-layout-block` class to a `pf-element` element.
### Headings
```html
Sign Up Now
You will receive 200 bonus points just for signing up!
```
### Required Asterisk
```html
*
```
You can also mark the element as completed (with JavaScript validation) by adding the `pf-completed` class, like so:
```html
*
```
The best place I've found to put these is right after a label's text, like this:
```html
Username *
```
You can put the `pf-completed` class on the `pf-element` element instead, to mark any required asterisks in that element as completed.
### Field Groups
Sometimes you will need to group fields so they don't fall left below the label. You can do this by wrapping them in a `pf-group` element:
```html
Favorite Food
Hot Dogs
Hamburgers
Cheeseburgers
Sushi
Pizza
...
```
*Remember that you can use the `pf-group` class on a span instead. This lets you put a group inside a label element and have it validate.*
### Fieldset Groups
Fieldset groups must use the `pf-group` class:
```html
Household
Household Memebers
Family members living in your house.
```
### Label Alignment
Labels can be aligned left (default) or right. To align them, use the `pf-labels-left` and `pf-labels-right` classes. You can put these classes on a `pf-form` element, `pf-group` fieldset, `pf-element` element, or `pf-label` element. You can override an ancestor's alignment class too.
### Full Width Elements
Elements can be extended to the form's width using the `pf-full-width` class:
```html
Comments
```
### Verification Forms
You can apply a form like layout to verification pages by simply providing no inputs:
```html
Verify this Information
Name
Jake Sully
Location
This will not be displayed to visitors.
Pandora.
Species
N/A
```