/** * Ink * * A set of tools for quick development of web interfaces. * * @package Ink * @author Sapo Ink Team * @license http://opensource.org/licenses/MIT MIT * @link http://ink.sapo.pt * @version 3.0.5 */ /** * Sets the grids maximum width * @var $grid-max-width (pixels|ems|percentage) */ /*! * Sets the grids breakpoint * * To add a new break point you'll need to add an element to the list. * * Here's an example: ( class-name-prefix, minimum-width, maximum-width, gutter-width, no-media-query). * * media: media type. * class-name-prefix: this is the prefix used in tons of inks classes i.e.: large-100, small-40, etc. * minimum-width: (pixels|null) the minimum width for the breakpoint * maximum-width: (pixels|null) the maximum width for the breakpoint * gutter-width: (ems) the width for the gutters (space between grid columns) for the breakpoint * no-media-query: (true|false) if you need to support IE8 set this to true on a single breakpoint. * Since IE8 does not support the @media statement leaving one of the breakpoints * outside a @media query let's you use the grid in IE8. * */ /* for xlarge screens */ @media screen and (min-width: 1261px) { /* your css for xlarge screens goes here ... */ } /* for large screens */ @media screen and (min-width: 961px) and (max-width: 1260px) { /* your css for large screens goes here ... */ } /* for medium screens */ @media screen and (min-width: 641px) and (max-width: 960px) { /* your css for medium screens goes here ... */ } /* for small screens */ @media screen and (min-width: 321px) and (max-width: 640px) { /* your css for small screens goes here ... */ } /* for tiny screens */ @media screen and (max-width: 320px) { /* your css for tiny screens goes here ... */ }