An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping
MIT License
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.
Ink is part of SAPO's Open Source Software initiative.
You can read our full documentation, examples and recipes in http://ink.sapo.pt
Let's get you started with Ink right away. Here's what you need to know and do:
dist/cookbook
folder and choose one to start from or use quick-start.html
as a blank slate.ink.css
, ink-ie.css
and ink.js
included somewhere in the <head>
.quick-start.css
from the dist/css
folder. It already contains the same media queries as Ink.* 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.
Since version 2.3.0 we've moved things around in order keep source code from distribution code separated:
dist/js
dist/css
src/sass
src/js
We've also unified our build system using Grunt and Bower. So, building from source is now a lot easier.
If you want to build from our source code, you'll need to install a few things:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node
npm install -g grunt-cli
npm install -g bower
sudo gem update --system && sudo gem install compass
npm install
sudo npm install -g grunt-cli
sudo npm install -g bower
sudo apt-get install ruby rubygems
sudo gem install compass
npm install
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 trickier so we won't get into details on how to install all the required tools. Instead here's a list of useful pages you'll need to read while trying this endeavour:
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
The documentation is no longer distributed with Ink releases. We've completely rewritten or documentation and are now running our site on Github pages using Jekyll.
You can read it at http://ink.sapo.pt Get its source, contribute or report an issue here: https://github.com/sapo/Ink-doc
CSS Generation
Typography and Icons
Browser feature detection
Build system
You can check out a list of projects we find around the web that are using Ink in some form here.