53 lines
1.8 KiB
CSS
53 lines
1.8 KiB
CSS
/**
|
|
* 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 ... */
|
|
}
|