Posts Tagged ‘Grid’

Grid Forms is a JavaScript-CSS framework that aims to ease data entry.

It allows us to create printed-like forms that are perfectly placed on a grid and occupy less space.

Grid Forms

The framework comes with ready-to-use styles and they can also be customized with Sass.

Created forms are responsive and use a simple HTML structure.

Skel.js is a tiny JavaScript framework (~6kb gzipped and minified) that simplifies building responsive layouts very much.

It has a JavaScript-powered and 12-column grid system that can handle any type of complex layouts + has easy-to-understand rules.

Managing breakpoints is just about adding the width ranges in the options of the skel.js‘ main function.

Skel.js

There is a plugin system for extending it further (a UI plugin is mentioned to be released soon).

Also, many helpful options exist like the ability to applying reset.css or normalize.css and defining the box model instantly.

When displaying the data inside a grid, Excel-like interfaces are probably the most standard way to do it.

ParamQuery, a jQuery plugin, enables us to present the data in a similar way with lots of options.

The records can be sorted or paginated, columns can be resized, hidden and it is possible to edit data inside cells with inline-editing.

ParamQuery jQuery Grid

There is support for infinite scrolling which is nice when loading lots of records.

It is capable of loading the data from any format like HTML, Array, XML, JSON, etc. and can be used with any scripting language.

Also, its look and feel can be changed with ease (theming support) and a powerful API exists for interacting further.

 

Creating wireframes in the beginning of any design process can help creating an output without any surprises.

Sneakpeekit is a website providing high-quality PDF sketch sheets for web designers.

Web Design Sketch Sheets

The sheets are compatible with the most popular grid systems like Less Framework 4, 978 grid system, 1140 css grid, The Semantic grid system, Bootstrap from Twitter, etc.

And, they are not only for the desktop browsers but there are versions for tablets and mobile as well.

Recline.js is an open source library for easily creating data-focused applications with only JavaScript and HTML.

It is built on top of jQuery, Backbone.js and Underscore.js and provides components + structure to data-heavy applications with a pack of models (dataset, record/row, field) and views (grid, map, graph, etc.).

Recline.js

The library has many functions for handling datasets including loading, querying and manipulating them.

Recline.js has built-in support for loading data from CSV files, Google Docs, ElasticSearch, CouchDB and more.

And, it can present data beautifully in grids, maps, timelines or any other way you prefer (it can be extended quickly).