Free UI Kit for your Web Applications & Development
Web User Interface Kit
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:
- 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
The Table component ease the process of improving a regular table element with some features like:
- Loading through AJAX (via an endpoint)
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.
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.
The Tabs component allows you to implement a tabbed UI, where each container is displayed as it’s related tabbed is selected.
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:
errorfor error messages
successfor success messages
infofor informative messages
<button> element with the class
closeand an appropriate icon (Ink uses the
×character), to add a simple dismiss action to your alerts.
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
horizontal classes. Adding color is as simple as adding a class to the menu list element. Available classes are
Let’s get you started with Ink right away. Here’s what you need to know and do:
- Download latest build.
my-page.htmlif you want to serve Ink from your host or
my-page-cdn.htmlif you want to serve Ink from our servers.
- Check the template we provide and remove whatever you don’t feel necessary for your project.
- Make sure you have
ink.jsincluded somewhere in the
- Add your own stylesheets and scripts to carry all your project-specific changes.
see more – http://ink.sapo.pt/index.php