Skip to content

Commit

Permalink
Better styling for big monitors, rewrote some docs, version bump.
Browse files Browse the repository at this point in the history
  • Loading branch information
@hperrin
hperrin committed Nov 8, 2017
1 parent e5a66d6 commit 47bad48
Show file tree
Hide file tree
Showing 16 changed files with 1,980 additions and 7,510 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
node_modules/
vendor/
178 changes: 89 additions & 89 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# <img alt="logo" src="https://raw.githubusercontent.com/sciactive/2be-extras/master/logo/product-icon-40-bw.png" align="top" /> PForm
# PForm - Pixel Perfect Forms

[![Latest Stable Version](https://img.shields.io/packagist/v/sciactive/pform.svg?style=flat)](https://packagist.org/packages/sciactive/pform) [![License](https://img.shields.io/packagist/l/sciactive/pform.svg?style=flat)](https://packagist.org/packages/sciactive/pform) [![Total Downloads](https://img.shields.io/packagist/dt/sciactive/pform.svg?style=flat)](https://packagist.org/packages/sciactive/pform) [![Open Issues](https://img.shields.io/github/issues/sciactive/pform.svg?style=flat)](https://github.com/sciactive/pform/issues)
[![Latest NPM Version](https://img.shields.io/npm/v/pform.svg?style=flat)](https://www.npmjs.com/package/pform) [![Latest Packagist Version](https://img.shields.io/packagist/v/sciactive/pform.svg?style=flat)](https://packagist.org/packages/sciactive/pform) [![License](https://img.shields.io/packagist/l/sciactive/pform.svg?style=flat)](https://packagist.org/packages/sciactive/pform) [![Open Issues](https://img.shields.io/github/issues/sciactive/pform.svg?style=flat)](https://github.com/sciactive/pform/issues)

PForm is a pixel perfect CSS form layout library.

Expand All @@ -12,9 +12,13 @@ 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
```

Expand All @@ -41,59 +45,59 @@ So here's how you'd include them all:
<![endif]-->
```

Notice the conditional comments to serve IE the right files.
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
<form class="pf-form" action="#" method="post">
<div class="pf-element pf-heading">
<h3>Login</h3>
</div>
<div class="pf-element pf-heading">
<h3>Login</h3>
</div>
<div class="pf-element">
<label><span class="pf-label">Username</span>
<input class="pf-field" type="text" name="username" /></label>
</div>
<div class="pf-element">
<label><span class="pf-label">Password</span>
<input class="pf-field" type="password" name="password" /></label>
</div>
<div class="pf-element">
<label><span class="pf-label">Remember Me</span>
<span class="pf-note">Lasts for 2 weeks.</span>
<input class="pf-field" type="checkbox" name="remember" /></label>
</div>
<div class="pf-element pf-buttons">
<input class="pf-button" type="submit" name="submit" value="Submit" />
<input class="pf-button" type="reset" name="reset" value="Reset" />
</div>
</form>
```

Here's the same form, built with a fieldset:

```html
<form class="pf-form" action="#" method="post">
<fieldset>
<legend>Login</legend>
<div class="pf-element">
<label><span class="pf-label">Username</span>
<input class="pf-field" type="text" name="username" /></label>
<label><span class="pf-label">Username</span>
<input class="pf-field" type="text" name="username" /></label>
</div>
<div class="pf-element">
<label><span class="pf-label">Password</span>
<input class="pf-field" type="password" name="password" /></label>
<label><span class="pf-label">Password</span>
<input class="pf-field" type="password" name="password" /></label>
</div>
<div class="pf-element">
<label><span class="pf-label">Remember Me</span>
<span class="pf-note">Lasts for 2 weeks.</span>
<input class="pf-field" type="checkbox" name="remember" /></label>
<label><span class="pf-label">Remember Me</span>
<span class="pf-note">Lasts for 2 weeks.</span>
<input class="pf-field" type="checkbox" name="remember" /></label>
</div>
<div class="pf-element pf-buttons">
<input class="pf-button" type="submit" name="submit" value="Submit" />
<input class="pf-button" type="reset" name="reset" value="Reset" />
<input class="pf-button" type="submit" name="submit" value="Submit" />
<input class="pf-button" type="reset" name="reset" value="Reset" />
</div>
</form>
```

Here's the same form, built with a fieldset:

```html
<form class="pf-form" action="#" method="post">
<fieldset>
<legend>Login</legend>
<div class="pf-element">
<label><span class="pf-label">Username</span>
<input class="pf-field" type="text" name="username" /></label>
</div>
<div class="pf-element">
<label><span class="pf-label">Password</span>
<input class="pf-field" type="password" name="password" /></label>
</div>
<div class="pf-element">
<label><span class="pf-label">Remember Me</span>
<span class="pf-note">Lasts for 2 weeks.</span>
<input class="pf-field" type="checkbox" name="remember" /></label>
</div>
<div class="pf-element pf-buttons">
<input class="pf-button" type="submit" name="submit" value="Submit" />
<input class="pf-button" type="reset" name="reset" value="Reset" />
</div>
</fieldset>
</fieldset>
</form>
```

Expand All @@ -105,19 +109,15 @@ PForm has two different layout options, Inline (default) and Block. To use block

### Headings

Headings can use any heading element. Actually, they can use any element you want:

```html
<div class="pf-element pf-heading">
<h3>Sign Up Now</h3>
<p>You will receive 200 bonus points just for signing up!</p>
<h3>Sign Up Now</h3>
<p>You will receive 200 bonus points just for signing up!</p>
</div>
```

### Required Asterisk

You can include an asterisk to mark something as required with the following:

```html
<span class="pf-required">*</span>
```
Expand All @@ -142,15 +142,15 @@ Sometimes you will need to group fields so they don't fall left below the label.

```html
<div class="pf-element">
<span class="pf-label">Favorite Food</span>
<div class="pf-group">
<label><input class="pf-field" type="radio" name="radiotest" /> Hot Dogs</label><br />
<label><input class="pf-field" type="radio" name="radiotest" /> Hamburgers</label><br />
<label><input class="pf-field" type="radio" name="radiotest" /> Cheeseburgers</label><br />
<label><input class="pf-field" type="radio" name="radiotest" /> Sushi</label><br />
<label><input class="pf-field" type="radio" name="radiotest" /> Pizza</label><br />
...
</div>
<span class="pf-label">Favorite Food</span>
<div class="pf-group">
<label><input class="pf-field" type="radio" name="radiotest" /> Hot Dogs</label><br />
<label><input class="pf-field" type="radio" name="radiotest" /> Hamburgers</label><br />
<label><input class="pf-field" type="radio" name="radiotest" /> Cheeseburgers</label><br />
<label><input class="pf-field" type="radio" name="radiotest" /> Sushi</label><br />
<label><input class="pf-field" type="radio" name="radiotest" /> Pizza</label><br />
...
</div>
</div>
```

Expand All @@ -162,12 +162,12 @@ Fieldset groups must use the `pf-group` class:

```html
<fieldset class="pf-group">
<legend>Household</legend>
<div class="pf-element">
<label><span class="pf-label">Household Memebers</span>
<span class="pf-note">Family members living in your house.</span>
<input class="pf-field" type="text" name="household" /></label>
</div>
<legend>Household</legend>
<div class="pf-element">
<label><span class="pf-label">Household Memebers</span>
<span class="pf-note">Family members living in your house.</span>
<input class="pf-field" type="text" name="household" /></label>
</div>
</fieldset>
```

Expand All @@ -181,12 +181,12 @@ Elements can be extended to the form's width using the `pf-full-width` class:

```html
<div class="pf-element pf-full-width">
<label>
<span class="pf-label">Comments</span>
<span class="pf-group">
<span class="pf-field"><textarea style="width: 100%;" name="comments" rows="5" cols="30"></textarea></span>
</span>
</label>
<label>
<span class="pf-label">Comments</span>
<span class="pf-group">
<span class="pf-field"><textarea style="width: 100%;" name="comments" rows="5" cols="30"></textarea></span>
</span>
</label>
</div>
```

Expand All @@ -196,25 +196,25 @@ You can apply a form like layout to verification pages by simply providing no in

```html
<form class="pf-form" action="#" method="post">
<fieldset>
<legend>Verify this Information</legend>
<div class="pf-element">
<span class="pf-label">Name</span>
<span class="pf-field">Jake Sully</span>
</div>
<div class="pf-element">
<span class="pf-label">Location</span>
<span class="pf-note">This will not be displayed to visitors.</span>
<span class="pf-field">Pandora.</span>
</div>
<div class="pf-element">
<span class="pf-label">Species</span>
<span class="pf-field">N/A</span>
</div>
<div class="pf-element pf-buttons">
<button class="pf-button" type="submit" name="submit">Correct</button>
<button class="pf-button" type="button" name="changes">Make Changes</button>
</div>
</fieldset>
<fieldset>
<legend>Verify this Information</legend>
<div class="pf-element">
<span class="pf-label">Name</span>
<span class="pf-field">Jake Sully</span>
</div>
<div class="pf-element">
<span class="pf-label">Location</span>
<span class="pf-note">This will not be displayed to visitors.</span>
<span class="pf-field">Pandora.</span>
</div>
<div class="pf-element">
<span class="pf-label">Species</span>
<span class="pf-field">N/A</span>
</div>
<div class="pf-element pf-buttons">
<button class="pf-button" type="submit" name="submit">Correct</button>
<button class="pf-button" type="button" name="changes">Make Changes</button>
</div>
</fieldset>
</form>
```
26 changes: 13 additions & 13 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{
"name": "pform",
"version": "3.2.2",
"main": "css/pform.css",
"ignore": [
"*.html",
"composer.json",
"includes"
],
"keywords": [
"form layout",
"html",
"css"
]
"name": "pform",
"version": "3.3.0",
"main": "css/pform.css",
"ignore": [
"*.html",
"composer.json",
"includes"
],
"keywords": [
"form layout",
"html",
"css"
]
}
54 changes: 27 additions & 27 deletions composer.json
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
{
"name": "sciactive/pform",
"description": "Pixel perfect CSS form layouts.",
"version": "3.2.2",
"type": "library",
"keywords": [
"form layout",
"html",
"css"
],
"homepage": "http://sciactive.com/pform/",
"time": "2017-06-16",
"license": "Apache-2.0",
"authors": [
{
"name": "Hunter Perrin",
"email": "[email protected]",
"homepage": "https://github.com/hperrin",
"role": "Developer"
}
],
"support": {
"issues": "https://github.com/sciactive/pform/issues",
"wiki": "https://github.com/sciactive/pform/wiki",
"source": "https://github.com/sciactive/pform"
},
"archive": {
"exclude": ["*.html", "bower.json", "includes"]
"name": "sciactive/pform",
"description": "Pixel perfect CSS form layouts.",
"version": "3.3.0",
"type": "library",
"keywords": [
"form layout",
"html",
"css"
],
"homepage": "http://sciactive.com/pform/",
"time": "2017-11-08",
"license": "Apache-2.0",
"authors": [
{
"name": "Hunter Perrin",
"email": "[email protected]",
"homepage": "https://github.com/hperrin",
"role": "Developer"
}
],
"support": {
"issues": "https://github.com/sciactive/pform/issues",
"wiki": "https://github.com/sciactive/pform/wiki",
"source": "https://github.com/sciactive/pform"
},
"archive": {
"exclude": ["*.html", "bower.json", "includes"]
}
}
Loading

0 comments on commit 47bad48

Please sign in to comment.