UI ELEMENTS
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:
<link rel="stylesheet" type="text/css" href="https://ink.freetls.fastly.net/x.x.x/">If you need SSL get the files from:
<link rel="stylesheet" type="text/css" href="https://ink.global.ssl.fastly.net/x.x.x/">x.x.x will be the version number and inside each version the CDN mimics the distribution bundle:
<link rel="stylesheet" type="text/css" href="https://ink.freetls.fastly.net/3.1.10/css/ink.css"> <!-- inks css file -->
<script type="text/javascript" src="https://ink.freetls.fastly.net/3.1.10/js/ink-all.js"></script> <!-- inks js 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:
Code
<!--[if lt IE 9 ]>
<link rel="stylesheet" href="ink-ie.min.css" type="text/css">
<![endif]-->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:
SRC/SASS
/config/ # the files where sass variables are defined, i.e. component class names, colors, font stacks, etc.
/contrib/ # third party code, like the Compass core and Font Awesome sass source.
/mixins/ # sass @mixins that we've written to automate some css generation tasks
/modules/ # modules structure definition, grid, navigation, forms, etc
/themes/ # theming code that implements our color schemes
ink-flex.scss # generates ink-flex.css which has our flexbox grid system and components. EXPERIMENTAL!
ink-ie.scss # generates ink-ie.css for Internet Explorer 7 and 8.
ink.scss # generates ink.css
quick-start.scss # generates quick-start.css. Contains the media queries for all of our breakpoints to get you started.If you don't need all the supplied modules you can just go into ink.scss, ink-flex.scss, ink-ie.scss, comment out any unnecessary modules and recompile the css:
ink.scss
// Import Compass Core
@import "contrib/compass/css3";
@import "contrib/compass/utilities";
@import "contrib/compass/typography";
// Import Font Awesome
@import "contrib/font-awesome/font-awesome";
// IMPORT CONFIG FILES (THESE CONTAIN VARIABLE DEFINITIONS)
@import "config/common";
@import "config/colors";
@import "config/alerts";
@import "config/buttons";
@import "config/classnames";
@import "config/forms";
@import "config/grid";
@import "config/labels";
@import "config/navigation";
@import "config/reset";
@import "config/tables";
@import "config/typography";
@import "config/images";
// IMPORT MIXINS FILES (THESE CONTAIN HELPER FUNCTIONS)
@import "mixins/alerts";
@import "mixins/buttons";
@import "mixins/grid";
@import "mixins/forms";
@import "mixins/nav.pills";
@import "mixins/nav.breadcrumbs";
@import "mixins/nav.pagination";
@import "mixins/nav.menu";
@import "mixins/nav.dropdown";
@import "mixins/spacing";
@import "mixins/typography";
@import "mixins/utils";
// IMPORT MODULE DEFINITION FILES
@import "modules/reset";
@import "modules/alerts";
@import "modules/badges";
@import "modules/buttons";
@import "modules/forms";
@import "modules/grid";
@import "modules/fonts";
@import "modules/labels";
@import "modules/nav.core";
@import "modules/nav.breadcrumbs";
@import "modules/nav.dropdown";
@import "modules/nav.pagination";
@import "modules/nav.pills";
@import "modules/nav.menu";
@import "modules/tables";
@import "modules/typography";
@import "modules/images";
// IMPORT THEMING FILES
@import "themes/alerts";
@import "themes/badges";
@import "themes/buttons";
@import "themes/labels";
@import "themes/nav.breadcrumbs";
@import "themes/nav.dropdown";
@import "themes/nav.menu";
@import "themes/nav.pagination";
@import "themes/nav.pills";
@import "themes/tables";
// IMPORT JS COMPONENTS STYLING
@import "modules/js/drawer";
@import "modules/js/carousel";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:
Code
@import ink.scss;
// override link colors
$link-color : blue;
$link-visited-color : purple;
$link-active-color : red;
$link-hover-color : blue;
$link-focus-color : blue;If you use this approach, when a future version is released, you'll just have to update inks code and everything should work.