ink css,Ink: An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyp...

#Welcome to Ink

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.

Current Version: 3.0.2

You can read our full documentation, examples and recipes in http://ink.sapo.pt

Getting started

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

Download the latest release.

Check the recipes we provide in the dist/cookbook folder and choose one to start from or use quick-start.html as a blank slate.

Make sure you have ink.css, ink-ie.css and ink.js included somewhere in the

.

Add your own css and scripts to carry all your project-specific changes. You can use quick-start.css from the dist/css folder. It allready contains the same media queries as Ink.

Keep coming back to the documentation to help you along the way.

That's it! You'll see how easy it is once you pick it up.

##Repository

###Branches

master.

* This branch is very likely to contain code that is not fully functional or documented. Support requests for problems with this branch will have the lowest priority so, use at your own risk.

###Structure

Since version 2.3.0 we've moved things around in order keep source code from distibution code separated:

JS

dist/js

CSS

dist/css

Sass source

src/sass

Js source

src/js

We've also unified our build system using Grunt and Bower. So, building from source is now a lot easier.

##Building from source

###Required tools

If you want to build from our source code, you'll need to install a few things:

OS X

Install Homebrew:

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

Install Node.js:

brew install node

Install Grunt:

npm install -g grunt-cli

Install Bower:

npm install -g bower

Install Compass:

sudo gem update --system && sudo gem install compass

Move into Inks folder and install remaining build tools:

npm install

Ubuntu

Install Node.js

sudo apt-get install python-software-properties python g++ make

sudo add-apt-repository ppa:chris-lea/node.js

sudo apt-get update

sudo apt-get install nodejs

Install Grunt:

sudo npm install -g grunt-cli

Install Bower:

sudo npm install -g bower

Install Ruby:

sudo apt-get install ruby rubygems

Install Compass:

sudo gem install compass

Move into Inks folder and install remaining build tools:

npm install

Windows

If you don't need to rebuild Javascript code you can just use Scout which is a nice, free and cross platform Sass/Compass compiler.

Building on Windows is a lot tricker so we won't get into details on how to install all the required tools. Instead here's a list of usefull pages you'll need to read while trying this endeavour:

Building

Grunt exposes these build tasks:

grunt - Gets third party dependencies, deletes previously built js and css, recompiles and minifies the css, rebuilds and minifies the js bundle files.

grunt test - Runs Inks js test suite.

grunt css - Deletes previously built css, recompiles and minifies the css.

grunt js - Deletes previously built js, builds and minifies the js bundle files.

grunt watch - Watches for changes in either css or js files and calls grunt js and grunt css

grunt watch:css - Watches for changes in Sass files and calls grunt css

grunt watch:js - Watches for changes in JS files and calls grunt js

Documentation

The documentation is no longer distributed with Inks releases. We've completely rewritten or documentation and are now running our site on Github pages using Jekyll.

If you wish to contribute to the documentation you can find it in the gh-pages branch of this repository:

git checkout -b origin/gh-pages gh-pages

Ink is built with help from these wonderfull projects:

CSS Generation

Typography and Icons

Browser feature detection

Build system

Versions

Projects using Ink

You can check out a list of projects we find around the web that are using Ink in some form here.