Ink gives you a way to implement responsive common user interface elements quickly and simply.
Our CSS code was built to create a completely fluid and responsive tool set that allows you to get your web projects from start to finish with great ease and control. As you'll find out, as you read our documentation and get familiar with ink, we've taken an approach where verbosity in our css class names creates high code legibility and a quick learning curve.
The Grid is the foundation of many of the other components, so we advise you to start by reading it.
If you don't want or need to host Inks code you can use our CDN (generously provided by Fastly). All of our releases are available:
If you need SSL get the files from:
x.x.x will be the version number and inside each version the CDN mimics the distribution bundle:
From version 3.0.0 onward we're dropping support for Internet Explorer 7. Here's our current browser support table:
|Feature||Chrome||Chrome mobile||Firefox||Firefox mobile||Safari||Safari iOS||Opera||Opera mobile||IE|
|Basic grid and components||8* >|
|Flexbox grid and components||21.0 >||33.0 >||18.0 >||18.0 >||6.1||7||12.10 >||12.10 >||10 >|
* IE8 does not support
@media queries so, it requires a dedicated stylesheet, wrapped in a IE conditional comment, and uses the
large breakpoint as its grid prefix:
In version 3.0.0 we introduced an alternative stylesheet that uses the Flexible box (flexbox) layout mode to do the heavy lifting in Ink. Although this allows us to add a lot of features that further enhance control over our user interfaces, be aware that the Flexible box layout mode is still at the Candidate Recommendation stage of the specification and currently has many different implementations across browsers.
The good news is that we'll handle the complexity of dealing with all of these differences and let you take a plunge into the one of the most exciting features available on the web.
The Grid makes most use of flexbox features, but across our documentation, whenever flexbox is an alternative, we'll have a chapter documenting its use.
If you want to know more about Inks flexbox features head over to the flexbox page of our documentation.
Inks CSS is generated with Compass and is modular in its structure. If you want to edit and recompile the sass code, you can use our build system, but you'll need to install a couple of tools:
If you're working on a Windows machine there is Scout, a gui compiler that is free.
Inside our downloadable zip file you'll find the
src/sass folder that contains the code that generates Inks CSS:
If you don't need all the supplied modules you can just go into
ink-ie.scss, comment out any unnecessary modules and recompile the css:
And of course, you can go into our source code and tweak it to your liking. Just bear in mind that upgrading to a future version of Ink will be a lot harder, as you'll have to port your changes by hand.
Another way to customize, and this is our recommendation, is to import
ink.scss into your own SASS file, and override our variables in that file:
If you use this approach, when a future version is released, you'll just have to update inks code and everything should work.