key

Version:

A tiny little keycode library

23 lines • 7.38 kB

JSON

{ "name": "frag", "version": "1.1.1", "description": "Frag is a fluid, responsive, friendly, simple grid system for CSS written in LESS.", "homepage": "https://github.com/rowanmanning/frag", "repository": { "type": "git", "url": "git://github.com/rowanmanning/frag.git" }, "bugs": "https://github.com/rowanmanning/frag/issues", "author": { "name": "Rowan Manning", "url": "http://rowanmanning.co.uk/" }, "main": [ "./build/frag.css", "lib/frag.less" ], "dependencies": {}, "readme": "\nFrag\n====\n\nFrag is a fluid, responsive, friendly, simple grid system for\nCSS written in LESS.\n\n\nBrowser Support\n---------------\n\nFrag has been tested so far in Firefox 12, Chrome, Safari 5.1,\nInternet Explorer 6–9, Mobile Safari (iPhone and iPad).\n\n\nInstalling\n----------\n\nYou can use Frag in your project by installing it through\n[Bower][bower] with `bower install frag` (or by adding it as a\nproject dependency).\n\nYou can also use frag without a package manager just by\nincluding `build/frag.css` in your code. If you already use\nLESS for your project or site then you can `@import`\n`lib/frag.less` directly. This allows you to customize the grid\nspacing and break-points.\n\n\nUsing Frag\n----------\n\nUsing the grid system is just a case of adding classes to your\nmarkup. The best way to learn this is by studying\n`test/frag.html`. This file uses all of the features of frag.\n\n### Grid ###\n\nAll frag columns must be surrounded by an element with a class of\n`grid`:\n\n <div class=\"grid\">  </div>\n\n### Columns ###\n\nTo create columns, simple add classes of `col-<n>` to your\nelements, where `<n>` is the number of columns (up to 12) that\nyou wish the element to span.\n\n <div class=\"grid\">\n <div class=\"col-6\">  </div>\n <div class=\"col-6\">  </div>\n </div>\n\n### Clearing ###\n\nWhen a grid spans multiple rows, you'll need to clear columns in\norder to prevent strange display issues. You need to add a class\nof `col-clear` to the first element in each row (ignoring the\nfirst row as it has nothing to clear).\n\n <div class=\"grid\">\n <div class=\"col-6\">  </div>\n <div class=\"col-6\">  </div>\n <div class=\"col-6 col-clear\">  </div>\n <div class=\"col-6\">  </div>\n </div>\n\nIf you're one of the unlucky ones who need to support Internet\nExplorer 6 and/or 7, then you need to add some extra markup to\nprevent inequal column heights from breaking the layout. It\nsucks, I know.\n\n <div class=\"grid\">\n <div class=\"col-6\">  </div>\n <div class=\"col-6\">  </div>\n <br class=\"ie-clear\"/>\n <div class=\"col-6 col-clear\">  </div>\n <div class=\"col-6\">  </div>\n </div>\n\n### Going Responsive ###\n\nFrag supports multiple break-points, and you are able to specify\ncolumn widths for tablet and mobile. To do this, supplement your\nregular `col-<n>` class with `col-<break>-<n>` where `<break>` is\neither \"tablet\" or \"mobile\". The example below will make all\ncolumns display at full width on mobile.\n\n <div class=\"grid\">\n <div class=\"col-6 col-mobile-12\">  </div>\n <div class=\"col-6 col-mobile-12\">  </div>\n <div class=\"col-6 col-mobile-12 col-clear\">  </div>\n <div class=\"col-6 col-mobile-12\">  </div>\n </div>\n\nThe mobile and tablet break-points also have their own clear\nclasses – `col-tablet-clear` and `col-mobile-clear`. These allow\nyou to use very different layouts for different devices.\n\nThe tablet and mobile break-points make some changes to the base\ngrid without you having to specify anything. The tablet\nbreak-point doubles the width of `col-<1–3>`, and sets all other\ncolumn sizes to 12. The mobile break-point sets everything to 12\nby default.\n\n### Nesting ###\n\nIf you need to nest grids (you probably will) then that's fine,\nit works exactly as you'd expect it to. The only catch here is\nthat nested grids work differently in IE 6+7 – all nested grid\ncolumns become full-width columns.\n\nJust in case it's not clear, here's the markup:\n\n <div class=\"grid\">\n <div class=\"col-6\">\n <div class=\"grid\">\n <div class=\"col-3\">  </div>\n <div class=\"col-3\">  </div>\n <div class=\"col-3\">  </div>\n <div class=\"col-3\">  </div>\n </div>\n </div>\n <div class=\"col-6\">\n \n </div>\n </div>\n\nColumns which contain nested grids will retain their gutter by\ndefault. It's possible to remove the gutter on a column by using the `col-gutterless` class:\n\n <div class=\"grid\">\n <div class=\"col-6 col-gutterless\">\n <div class=\"grid\">\n <div class=\"col-6\">  </div>\n <div class=\"col-6\">  </div>\n </div>\n </div>\n <div class=\"col-6\">\n \n </div>\n </div>\n\nGutter removal will not work in Internet Explorer 6 and 7; these\nbrowsers gracefully fall back to columns with gutters.\n\n### Hiding ###\n\nFrag allows you to hide certain columns based on the current\ndevice. This can be useful if a particular column is not valuable\nfor mobile or tablet users, e.g. Advertisements or content that\nwould not be useful in a mobile context.\n\nTo use this feature, use the `col-hide`, `col-tablet-hide` and\n`col-mobile-hide` classes:\n\n <div class=\"grid\">\n <div class=\"col-12\">\n Visible at all screen sizes\n </div>\n <div class=\"col-12 col-tablet-hide col-mobile-hide\">\n Visible at desktop size only\n </div>\n <div class=\"col-12 col-hide col-mobile-hide\">\n Visible at tablet size only\n </div>\n <div class=\"col-12 col-hide col-tablet-hide\">\n Visible at mobile size only\n </div>\n <div class=\"col-12 col-mobile-hide\">\n Visible at desktop and tablet sizes only\n </div>\n <div class=\"col-12 col-hide\">\n Visible at tablet and mobile sizes only\n </div>\n </div>\n\n\nBuilding Frag\n-------------\n\nIn order to compile the Frag LESS source into CSS you'll need to\ninstall [Node.js][node], [npm][npm] and the LESS command line\nutility:\n\n npm install -g less\n\nThen you can run the following from within the project directory\nto compile the CSS:\n\n lessc lib/frag.less > build/frag.css\n\n\nLicense\n-------\n\nCopyright 2012, Rowan Manning \nDual licensed under the [MIT][mit] or [GPL Version 2][gpl2]\nlicenses.\n\n\n[bower]: http://twitter.github.com/bower/\n[node]: http://nodejs.org/\n[npm]: http://npmjs.org/\n[gpl2]: http://opensource.org/licenses/gpl-2.0.php\n[mit]: http://opensource.org/licenses/mit-license.php\n", "readmeFilename": "README.md", "_id": "frag@1.1.1" }