Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: furiouscollective/gridforms
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 1.0.8
Choose a base ref
...
head repository: furiouscollective/gridforms
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
  • 19 commits
  • 8 files changed
  • 8 contributors

Commits on Apr 16, 2016

  1. Copy the full SHA
    d3a95c2 View commit details

Commits on Apr 18, 2016

  1. Merge pull request #51 from staabm/patch-1

    Perf optimize equalizeFieldHeights
    kumailht committed Apr 18, 2016
    Copy the full SHA
    87cf5c6 View commit details

Commits on Apr 26, 2016

  1. Copy the full SHA
    9974f48 View commit details

Commits on Apr 27, 2016

  1. Merge pull request #55 from staabm/patch-1

    added html5 input type=number support
    kumailht committed Apr 27, 2016
    Copy the full SHA
    d5bea25 View commit details

Commits on May 18, 2016

  1. Fixed empty mixin

    nuschk committed May 18, 2016
    Copy the full SHA
    c587aa5 View commit details

Commits on May 19, 2016

  1. Bumped version

    nuschk committed May 19, 2016
    Copy the full SHA
    115219b View commit details
  2. Copy the full SHA
    d72b08a View commit details

Commits on May 22, 2016

  1. Merge pull request #57 from flatfox-ag/master

    Remove unused reset mixin
    kumailht committed May 22, 2016
    Copy the full SHA
    76e1980 View commit details
  2. Update package.json

    kumailht committed May 22, 2016
    Copy the full SHA
    8ad262d View commit details

Commits on Jul 12, 2016

  1. Hover CSS is taking precedence over focus #58

    Fix to ensure the focus effect takes precedence over the hover effect.
    solsticesurfer committed Jul 12, 2016
    Copy the full SHA
    98b3d8b View commit details
  2. Hover CSS is taking precedence over focus #58

    Fix to ensure the focus effect takes precedence over the hover effect.
    solsticesurfer committed Jul 12, 2016
    Copy the full SHA
    878825a View commit details

Commits on Jul 13, 2016

  1. Merge pull request #59 from solsticesurfer/master

    Hover CSS is taking precedence over focus  #58
    kumailht authored Jul 13, 2016
    Copy the full SHA
    3530f09 View commit details

Commits on Nov 9, 2016

  1. Do not equalize field height when screen size is lesser than 700px

    After the forms are being condensed in mobile view, it should stop
    equalising the height of the fields as it has only 1 field per row.
    ericcch committed Nov 9, 2016
    Copy the full SHA
    1f1259c View commit details
  2. Merge pull request #61 from ericcch/Fix-mobile-view-auto-height

    Do not equalize field height when screen size is lesser than 700px
    kumailht authored Nov 9, 2016
    Copy the full SHA
    41274ae View commit details

Commits on Mar 21, 2017

  1. Fix Markdown headers

    limonte authored Mar 21, 2017
    Copy the full SHA
    909ff4a View commit details

Commits on Mar 22, 2017

  1. Merge pull request #63 from limonte/patch-1

    Fix Markdown headers
    kumailht authored Mar 22, 2017
    Copy the full SHA
    a1e4b23 View commit details

Commits on Aug 24, 2017

  1. Fix #52: Remove deprecated jQuery .selector

    The functionality still worked by removing the .selector
    from that.el.focusableFields.
    sumpygump committed Aug 24, 2017
    Copy the full SHA
    f9f8b1a View commit details
  2. Merge pull request #65 from sumpygump/deprecate-selector

    Fix #52: Remove deprecated jQuery .selector
    kumailht authored Aug 24, 2017
    Copy the full SHA
    44450c7 View commit details

Commits on Mar 10, 2019

  1. Copy the full SHA
    34e33d2 View commit details
Showing with 53 additions and 65 deletions.
  1. +11 −14 README.md
  2. +2 −2 bower.json
  3. +1 −1 gridforms/gridforms.css
  4. +1 −1 gridforms/gridforms.css.map
  5. +13 −13 gridforms/gridforms.js
  6. +4 −5 gridforms/gridforms.sass
  7. +13 −24 index.html
  8. +8 −5 package.json
25 changes: 11 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
##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:contact@kumailht.com) 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
- [Gridforms Homepage](https://formkeep.com/gridforms)

###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 +20,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 +47,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 +70,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,12 +82,12 @@ 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
- Gracefully handle label overflow
- Introduce a sass file to style error/help messages
- Introduce another sass file that can style the various field types (debatable)

If you have ideas on how to improve Gridforms or if you want to contribute to this repo, shoot me an email at [contact@kumailht.com](mailto:contact@kumailht.com).
If you have ideas on how to improve Gridforms or if you want to contribute to this repo, shoot us an email at [support@formkeep.com](mailto:support@formkeep.com).
4 changes: 2 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "gridforms",
"homepage": "kumailht.com/gridforms",
"homepage": "formkeep.com/gridforms",
"authors": [
"Kumail Hunaid <contact@kumailht.com>"
"FormKeep <support@formkeep.com>"
],
"description": "Data entry can be beautiful",
"main": ["./gridforms/gridforms.css", "./gridforms/gridforms.js"],
2 changes: 1 addition & 1 deletion gridforms/gridforms.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion gridforms/gridforms.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

26 changes: 13 additions & 13 deletions gridforms/gridforms.js
Original file line number Diff line number Diff line change
@@ -43,10 +43,10 @@ jQuery(function($) {
events: function() {
var that = this;
that.el.fieldsContainers.click(function(event) {
var focusableFields = that.el.focusableFields.selector;
var focusableFields = that.el.focusableFields;

if (!$(event.target).is(focusableFields)) {
$(this).find('input[type="text"],input[type="tel"],input[type="email"], textarea, select').first().focus();
$(this).find('input[type="text"],input[type="number"],input[type="tel"],input[type="email"], textarea, select').first().focus();
}
});
that.el.focusableFields.focus(function() {
@@ -66,31 +66,31 @@ jQuery(function($) {
var fieldsRows = this.el.fieldsRows;
var fieldsContainers = this.el.fieldsContainers;

// Make sure that the fields aren't stacked
if (!this.areFieldsStacked()) {
// Make sure that the fields aren't stacked and window width is more than 700px
if (!this.areFieldsStacked() && $(window).width() > 700) {
fieldsRows.filter(":visible").each(function() {
// Get the height of the row (thus the tallest element's height)
var fieldRow = $(this);
var rowHeight = fieldRow.css('height');


// Singleton textarea rows should determine their row height
var rowInputs = fieldRow.children();
var textAreas = rowInputs.children("textarea");
if (rowInputs.length === 1 && textAreas.length === 1) return;
if (rowInputs.length === 1 && rowInputs.children("textarea").length === 1) return;

// Get the height of the row (thus the tallest element's height)
var rowHeight = fieldRow.css('height');

// Set the height for each field in the row...
fieldRow.find(fieldsContainers).css('height', rowHeight);
});
}
},
areFieldsStacked: function() {
// Get the first row
// which does not only contain one field
// Get the first row
// which does not only contain one field
var firstRow = this.el.fieldsRows
.not('[data-row-span="1"]')
.first();

// Get to the total width
// Get to the total width
// of each field witin the row
var totalWidth = 0;
firstRow.children().each(function() {
9 changes: 4 additions & 5 deletions gridforms/gridforms.sass
Original file line number Diff line number Diff line change
@@ -44,8 +44,6 @@
&:after
clear: both

=_reset


=grid-form($max-columns: 12, $font-size-large: 18px, $legend-color: lighten(#333, 5%), $field-padding: 8px, $label-font-size: 10px, $grid-border-color: #333, $label-color: #333, $field-focus-color: darken(#FFFDED, 5%))

@@ -119,13 +117,14 @@
cursor: text
&:last-child
border-right: none
&:hover
background: lighten($field-focus-color, 5%)
cursor: text
&.focus
background: $field-focus-color
label
color: darken($label-color, 5%)
&:hover
background: lighten($field-focus-color, 5%)
cursor: text


// Overide styles when printing to ensure good looking output.
@media print
Loading