Sublime-ink

Sublimet Text 2 snippets for SAPO Ink v2 UI framework.

This package contains Sublime Text 2 snippets to make the creation of layouts using SAPOs Ink UI framework simple, easy and fast.

Installation

###Using the Sublime Package Control

• Open up your command palette ctrl+shift+p and type in: Package Control: add Repository
• paste the URL to this github repo in the next box (https://github.com/pedrocorreia/sublime-ink)
• Re-Open your command palette and type: Package Control: Install Package and search for Ink Helper
• ????
• Profit!

###Manual installation

• Download the full repo.
• unpack it to your sublime text 2 /Packages folder
• ???
• Profit!

The Ink Grid

Ink provides a HTML/CSS layout grid framework that allows you to build flexible pages that can be used with several screen sizes. 1

Grid elements

• Grid container element - igrid + tab
• Grid column element - icol + tab
• Grid column group element - icolgrp + tab

Even space divisions

• 1 grid column - i1col + tab
• 2 even grid columns - i2cols + tab
• 3 even grid columns - i3cols + tab
• 4 even grid columns - i4cols + tab
• 5 even grid columns - i5cols + tab

Uneven space divisions

• 20% / 80% grid columns - i2080 + tab
• 25% / 75% grid columns - i2575 + tab
• 30% / 70% grid columns - i3070 + tab
• 33% / 66% grid columns - i3366 + tab
• 40% / 60% grid columns - i4060 + tab
• 50% / 50% grid columns - i5050 + tab
• 60% / 40% grid columns - i6040 + tab
• 66% / 33% grid columns - i6633 + tab
• 70% / 30% grid columns - i7030 + tab
• 75% / 25% grid columns - i7525 + tab
• 80% / 20% grid columns - i8020 + tab

Navigation elements

Ink provides common navigation elements in a easy to implement and customize way.

Navigation

• Horizontal menu bar - ihmenu + tab
• Vertical menu bar - ihmenu + tab
• Pill buttons - ipills + tab
• Tabs - itabs + tab

1: Most grid snippets provide tab stops to complete the snippet like, how to behave with smaller screens.

---

Usage

You can use the Sublime Text 2 command palette and type ink to get a complete list of available snippets, or start memorizing and using the tab triggers listed in the command palette and here in front of each snippets description.