-
Notifications
You must be signed in to change notification settings - Fork 220
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
9 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,15 @@ | ||
##Gridforms | ||
## Gridforms | ||
An effort to make beautiful forms for web applications that make data entry less painful. Gridforms is a front-end library which handles the boilerplate necessary to build grid based forms. | ||
|
||
This is my first ever open source project so please [email](mailto:[email protected]) me if you spot any errors (which you're guaranteed to find). I am only now realizing how hard it is to write even simple documentation, your help in improving it will be greatly appreciated. | ||
|
||
###Examples | ||
### Examples | ||
- [Gridforms Homepage](http://kumailht.com/gridforms) | ||
- [Example Bank Account Application Form](http://kumailht.com/gridforms/example.html) | ||
|
||
###Basic Usage | ||
### Basic Usage | ||
|
||
####1. Import Gridforms | ||
#### 1. Import Gridforms | ||
|
||
There are two ways you can import the Gridforms styles: | ||
|
||
|
@@ -23,7 +23,7 @@ There are two ways you can import the Gridforms styles: | |
@import gridforms.sass | ||
``` | ||
|
||
####2. Markup your Gridform | ||
#### 2. Markup your Gridform | ||
```html | ||
<form class="grid-form"> | ||
<fieldset> | ||
|
@@ -50,7 +50,7 @@ Start by giving your `<form>` element a `grid-form` class to turn it into a Grid | |
|
||
Optionally use a `fieldset` with a `legend` to divide your form into sections. | ||
|
||
###Advanced Usage | ||
### Advanced Usage | ||
**Use the `grid-form` mixin to customize and override default styles:** | ||
```sass | ||
.my-custom-grid-form | ||
|
@@ -73,10 +73,10 @@ $field-focus-color: darken(#FFFDED, 5%) | |
+grid-form($field-padding: 12px) | ||
``` | ||
|
||
###Compatibility | ||
### Compatibility | ||
Include Scott Jehl's [Respond.js](https://github.com/scottjehl/Respond) if you want the form to be responsive in ie8. | ||
|
||
###Printing | ||
### Printing | ||
GridForms will use a `@media print` query in the CSS to ensure that the printed GridForms look as nice on paper as they do on the screen. You can use this to generate an empty form for someone to fill out on paper or you can replace the `form` `input` tags with actual content (including multi-line content) and have the form and content printed out. Everything will just scale nicely. | ||
|
||
You don't need to do anything special to print your GridForms, you can just print from your browser using `File > Print` like normal. | ||
|
@@ -85,7 +85,7 @@ However, if you are generating a PDF dynamically, such as using **[wkhtmltopdf]( | |
|
||
Similarly, if you are using **[wicked_pdf](https://github.com/mileszs/wicked_pdf)** to generate PDFs from your Rails application, you'll need to ensure `print_media_type: true` is set as a configuration option. | ||
|
||
###Todo | ||
### Todo | ||
|
||
- Test forms with all possible field types | ||
- Reset unknown styles so forms look the same wherever they're used | ||
|