Ink is an interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and JavaScript to offer modern solutions for building layouts, display common interface elements and implement interactive features that are content-centric and user friendly for both your audience and your designers & developers.

Free Web UI Kit

Free Web UI Kit

Web User Interface Kit

Free Web UI Kit

Free Web UI Kit

Features

The Gallery component provides you an easy way to show images in a “carousel” format.

Besides being a responsive component, it also allows you to set other configurations such as:

  • Captions
  • Thumbnails
  • Images’ maximum width and height, in the full and thumbnail version
  • Type of Layout

The Modal component was designed to replace the common/native modal boxes that browser have, providing some features:

  • HTML formatted messages
  • Configuration of height and width of the modal
  • Remove the dismissing through the ‘x’/close button. Particularly useful if you want to define another button to do the dismissing

Table

The Table component ease the process of improving a regular table element with some features like:

  • Pagination
  • Sorting
  • Loading through AJAX (via an endpoint)

Sortable List

The Sortable List component transforms the rows of a list in draggable/droppable items inside of the list.

By doing that, allows the user to sort the order of the list.

Date Picker

As the name says, the Date Picker transforms a textbox into an element that, when in use, shows a calendar to help selecting a specific date.

Tabs

The Tabs component allows you to implement a tabbed UI, where each container is displayed as it’s related tabbed is selected.

Form Validator

The FormValidator component provides an easy way to validate forms before submitting them. It can:

  • Detect required fields
  • Validate some field types
  • Detect match with password and confirmation password
  • Use custom field types

Basic alert box design

Basic alerts are useful for simple interaction with the user, such as showing a state on a web application or giving a warning on a form.

To style some text as an alert, create a block element, such as a div, with the ink-alert class. This creates the outter shell of the alert, so to speak. To add some meaning, using color, add one of the following classes:

  • error for error messages
  • success for success messages
  • info for informative messages

Add a <button> element with the class closeand an appropriate icon (Ink uses the &times;character), to add a simple dismiss action to your alerts.

Alert Box Design

Alert Box Design

Horizontal menu

To build a horizontal menu with ink start with a block-level element and use the ink-navigation class. We prefer to use a <nav> tag to wrap our navigation items, but a <div> will do just fine.

The menu itself is built with a unordered list with the menu and horizontal classes. Adding color is as simple as adding a class to the menu list element. Available classes are greygreenblueredorange and black!

Horizontal Menu

Horizontal Menu

Getting started

Let’s get you started with Ink right away. Here’s what you need to know and do:

  1. Download latest build.
  2. Open my-page.html if you want to serve Ink from your host ormy-page-cdn.html if you want to serve Ink from our servers.
  3. Check the template we provide and remove whatever you don’t feel necessary for your project.
  4. Make sure you have ink.cssink-ie.css and ink.jsincluded somewhere in the <head>.
  5. Add your own stylesheets and scripts to carry all your project-specific changes.

see more – http://ink.sapo.pt/index.php

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/01/Alert-Box-Design.pnghttp://w3lessons.info/wp-content/uploads/2013/01/Alert-Box-Design-150x150.pngKarthikeyan KFreebiesWeb Designcall to action,Design,HTML5,image gallery,message box,responsive
Ink is an interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and JavaScript to offer modern solutions for building layouts, display common interface elements and implement interactive features that are content-centric and user friendly for both...