So you want to start using Ink? You've come to the right place.
Ink was made, as any framework, to relieve web developers and designers, from the tedious everyday tasks of handling different browsers and their particular quirks, provide commonly used UI elements and provide a simple default look and feel that can easily adapt to any screen size.
Another objective was to create a solid HTML/CSS/JS codebase, that would cover most common user interface needs, and make it easy enough to use so that anyone on our teams, and hopefully yours, can switch between projects without doing lots of markup and CSS archaeology.
We took into consideration existing browsers CSS rendering capabilities and the fact that we felt that it's a lot more intuitive to divide space in percentages, rather than pre-defined columns. Instead of having to count abstract base grid column units to get, let's say a 1/3 width column, you can simply say that you need a 33% width column. This also enabled us to come up with a completely fluid, screen size aware, grid system.
We also chose to use the "new" border-box box model to build our grid system. This enables us to keep layouts flexible with less code and allowing for optional gutters between grid divisions without the need for additional markup.
To achieve this we've set 3 default screen sizes: large (for screens wider than 960px), medium (for screen widths between 960px and 650px) and small (for screen widths below 650px).
In order to make Ink compatible with as many browsers as possible we've taken the following approach:
border-box box model get the full fluid layouts and media query goodness.border-box box model, get a grid with fixed widths, in a specific CSS file. IE conditional comments are required to use it.If you don't use our base templates (which we strongly recommend you do), then you'll need this:
Code
<!--[if lte IE 7 ]> <link rel="stylesheet" href="./css/ink-ie7.css" type="text/css" media="screen" title="no title" charset="utf-8"> <![endif]-->
Here's the whole thing summed up in a nifty table:
| Layout support | IE7 | IE8 | IE9> | Firefox | Chrome | Safari | Opera | iOS Safari |
Android Browser |
|---|---|---|---|---|---|---|---|---|---|
| Fixed width | |||||||||
| Flexible width | |||||||||
| Flexible and multiple screens |
For a detailed explanation on Ink's grid, check out the Layout page.
Download a fresh copy of Ink's latest version, you'll get a zip package containing all kinds of treats. Read the following file tree carefully to make sure you understand where everything is and what each folder and file set's purpose is.
ink/ ├── cookbook/ (recipes for common layout types using Ink) ├── css/ │ ├── ink-ie7-min.js (minified css for IE7) │ ├── ink-ie7.js (css for IE7) │ ├── ink-min.css (main css, minified) │ ├── ink.css (main css) │ └── your.css (a simple template to help you getting started) ├── documentation/ (you guessed it. It's a copy of this site) ├── font/ (font files for Ubuntu fonts and FontAwesome) ├── js/ (Ink's javascript components and some third party js files are here) │ ├── ink-all.js (Ink's javascript full bundle (Core + UI Components) ) │ ├── ink-all.min.js (Ink's javascript full bundle minified (Core + UI Components) ) │ ├── ink-ui.js (Ink's javascript UI bundle ) │ ├── ink-ui.min.js (Ink's javascript UI bundle minified ) │ ├── ink.js (Ink's javascript Core bundle ) │ ├── ink.min.js (Ink's javascript Core bundle minified ) │ ├── … │ ├── ink.modal.js (Ink's UI Modal component) │ ├── ink.imagequery.js (Ink's UI ImageQuery component) │ ├── ink.progressbar.js (Ink's UI ProgressBar component) │ ├── … │ └── ink.treeview.js (Ink's UI TreeView component) ├── less/ │ ├── config/ (configuration files for Ink modules) │ │ ├── __alerts.less │ │ ├── … │ │ └── __widgets.less │ ├── modules/ (Ink modules styling) │ │ ├── alerts.less │ │ ├── … │ │ └── utilities.less │ ├── ink-ie.less (generates ink-ie7.css) │ ├── ink.less (@imports all modules, config files and generates ink.css) │ └── site.less (generates css for the documentation) └── presskit/ (contains .psd and .eps versions of Ink's logo)
Along with all the files described above, the bundle you just downloaded contains an empty-page.html file in the ./cookbook/ folder. There is also a quick-start.css file in the ./css/ folder with media queries for default screen sizes. Read more about these, in the customization section, below.
In the ./cookbook/ folder you'll also find some HTML files with common layout solutions. Take a look at those to get familiar with the way Ink works. Or even use them to start your project.
Now that you've got acquainted with Ink's basics, give the rest of the documentation a read and start your new project! we strongly recommend you go through the documentation, which we made as detailed and simple as possible for both seasoned professionals and absolute beginners to be able to pick Ink up and learn it in depth. You can always use the website or, if it's more convenient for you or you happen to be offline, check the ./documentation/ folder, inside your Ink bundle.
Although we built Ink to be used out of the box, its true power resides in how you can pour your creativity into it and make it work for any website or webapp you need to build.
There are three ways you can customize Ink:
Ink has quite a lot of configurable options, from colors, to text, to widths. These are all organized, as LESS variables, in the ./less/config/ folder in your Ink bundle. The filenames are very clear, making it easier to find a certain variable you need to alter.
Just edit the variable values, save the file, and then compile ink.less, which in turn, will include the configuration files and output ink.css for you to use.
For example, say you want your pages to have a width which is 95% of the viewport, instead of the 1200 px default. Just edit the __grid.less file and change the @site-width variable to that value, like this:
Code
@site-width: 95%;
Attention if you re-download Ink to the same top folder, the config files will be written over, so make sure you keep your Ink instances separate by project.
Read below to find out more about LESS and how Ink uses it.
The second method for customizing Ink, which allows for deeper customization is adding your own CSS (which can be compiled from your own LESS files, or any other pre-processor), to Ink. Here's the workflow we suggest, to get the most out of this method:
<head> after ink.cssIn essence, if you define your main content area as taking up 75% of the space with a left sidebar taking up the remaining 25%, don't just use the appropriate .large-25 and .large-75 classes, but also use your own .sidebar and .content classes.
Code
<div class="large-75 content>Your content here</div> <div class="large-25 sidebar">Your sidebar stuff here</div>
Note You'll read about the large classes in the Layout section.
Another method of using custom CSS is to simply add a class or id to your <body> element and then resort to CSS inheritance to customize Ink's own classes without delving into ink.css. Like this, you keep the original Ink CSS with added customizations on top, which you can turn on and off my simply adding or removing a single class/id.
Code HTML Example using an ID on the <body>
<body id="mySite"> <!-- Identify your custom CSS with an ID on the body -->
<div class="ink-grid"> <!-- Use Ink classes to build everything -->
...
</div>
</body>
Code CSS example for customizing .ink-grid using your custom ID
body#mySite div.ink-grid {
width: 95%;
}
Tip Try to keep your CSS specificity high, to make sure you avoid colisions.
Both methods described above will allow you to build your own customizations in a separate CSS file, while keeping Ink CSS 'clean'.
We provide you with the quick-start.css file (in the ./css/ folder), which is media-query ready, so just use that (evidently, you can rename it to whatever you like), and link it in the <head> of your document.
So, if you're using the templates included with Ink (we suggest you at least start with empty-page.html, in the ./cookbook/ folder), look for the following line:
<link rel="stylesheet" href="./css/ink.css">
And add your own link:
<link rel="stylesheet" href="./css/ink.css"> <link rel="stylesheet" href="./css/quick-start.css"> <!--We suggest you rename this to match your project-->
If you want, you can alter ink.css directly or, if you prefer, change everything in the ./less/modules/ LESS files. If you look in there, you'll see Ink in all its glory.
The reason we don't recommend this method is that you will not be able to benefit from our updates and bug fixes. If you use the second method, described above, and just style your own custom semantic classes, then you can download any future version of Ink and just overwrite the original files, while retaining your custom LESS and custom CSS files and you'll be able to benefit from whatever new developments Ink has to offer.
We chose {LESS} as the tool to help making the task of writing all the css a lot easier, and in the process have created a ton of helpful mixins that we use regularly, and hopefully will also help you getting your projects done a little easier.
Ink is highly customizable. You can change base colors, dimensions and even class names, however to tap into all this you'll need {LESS}, so we strongly encourage you to check out the {LESS} site and documentation.
In order to make Ink as easy to use as possible we've opted to make our CSS class names as similar as possible to a human language, in our case, English. Class names describe component types and visual/behaviour characteristics. This can be a bit verbose but we feel that it makes the code highly readable and easy to learn and rememeber.
To avoid name collisions and get higher css specificity, all components have a "root" class, on which children classes depend like .ink-navigation or .ink-form.
Code
<nav class="ink-navigation">
<ul class="menu horizontal blue">
...
</ul>
</nav>
You've guessed it. It's a blue horizontal menu!