diff --git a/.csslintrc b/.csslintrc index 8aee385..1b0d060 100644 --- a/.csslintrc +++ b/.csslintrc @@ -1,5 +1,9 @@ { "unique-headings": false, "box-model": false, - "font-sizes": false + "font-sizes": false, + "compatible-vendor-prefixes": false, + "unqualified-attributes": false, + "outline-none": false, + "box-sizing": false } \ No newline at end of file diff --git a/.gitignore b/.gitignore index 9a1d2a5..aa204cb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ -.sass-cache/* +.sass-cache node_modules \ No newline at end of file diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..e69de29 diff --git a/Gruntfile.js b/Gruntfile.js index 6bb0afd..5b8280c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -6,7 +6,7 @@ module.exports = function(grunt) { sass: { dist: { files: { - 'css/Ribs.css': 'scss/Ribs.scss', + 'build/css/Ribs.css': 'src/scss/Ribs.scss', } } }, @@ -16,22 +16,25 @@ module.exports = function(grunt) { import: false, csslintrc: '.csslintrc' }, - src: ['css/Ribs.css'] + src: ['build/css/Ribs.css'] + }, + brutal: { + src: ['build/css/Ribs.css'] } }, cssmin: { compress: { options: { - banner: '/* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("dd-mm-yyyy") %> */' + banner: '/* <%= pkg.name %> <%= pkg.version %> - https://github.com/nickpack/Ribs - <%= grunt.template.today("dd-mm-yyyy") %> */' }, files: { - 'css/Ribs.min.css': 'css/Ribs.css' + 'build/css/Ribs.min.css': 'build/css/Ribs.css' } }, }, watch: { - files: 'scss/**/*', - tasks: ['sass', 'csslint', 'cssmin'] + files: 'src/scss/**/*', + tasks: ['sass', 'csslint:scssoutput', 'cssmin'] } }); @@ -40,7 +43,7 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.registerTask('test', ['sass', 'csslint']); + grunt.registerTask('test', ['sass', 'csslint:scssoutput']); grunt.registerTask('minify', ['cssmin']); grunt.registerTask('default', ['sass', 'cssmin']); diff --git a/README.md b/README.md index 2e9adec..9df9823 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,25 @@ -Ribs +Ribs v1.0.7 ============= > Ribs is the evolution of Skeleton, the original author seems to have disappeared and/or lost interest in the project, and my colleagues and I use this an awful lot. -## Whats different here? +## What's different here? My fork has one significant difference over the original project, that is a full SCSS conversion to make use of more modern technologies and to expose a lot more customisation options quickly and easily. -As time goes by I will gradually extend the available options and build a packaging tool that allows you to select all of your customisations in a graphical way, thinking something along the lines of jQuery themeroller, just a bit more lightweight. +As time goes by, and with enough interest I will gradually extend the available options and build a packaging tool that allows you to select all of your customisations in a graphical way - thinking something along the lines of jQuery themeroller, just a bit more lightweight. + +### Some Key Differences +* Maintained! +* Configurable grid +* Default colours, borders, fonts, margins, padding etc are all configurable variables +* Normalized elements, rather than the old school CSS resets +* Sensible Table styles +* Taking advantage of sass, the majority of selector repetition is removed in favour of mixins that generate the selectors +* Many issues flagged by CSSLint refactored to resolve them +* The original CSS has been split out into individual files and heavily refactored to tidy it up +* Golden ratio default line heights +* A selection of useful mixins +* Push and pull column classes +* Bower installable ## Installing Either clone this repository and drop in manually, or install from bower: @@ -16,25 +30,30 @@ bower install --save ribs ## Build status The project is set up to build and run csslint on Travis: -Master: [![Build Status](https://travis-ci.org/nickpack/Ribs.png)](https://travis-ci.org/nickpack/Ribs) -Development: [![Build Status](https://travis-ci.org/nickpack/Ribs.png?branch=develop)](https://travis-ci.org/nickpack/Ribs) + +* Master: [![Build Status](https://travis-ci.org/nickpack/Ribs.png)](https://travis-ci.org/nickpack/Ribs) +* Development: [![Build Status](https://travis-ci.org/nickpack/Ribs.png?branch=develop)](https://travis-ci.org/nickpack/Ribs) ## Building I've added grunt configuration to the repository for those of you that use it. There are 4 main tasks added: * default - Runs Sass to create the stylesheet from the source files, places the output in ./css then creates a minified version of the file and places it into the same directory -* test - This runs CSSLint over the output CSS file (Note that there are a few bits in skeleton that I need to fix!) +* test - This runs CSSLint over the output CSS file (Note that there are a few bits in the original skeleton css that I still need to fix!) * minify - This literally just runs cssmin, useful if you've edited Ribs.css directly * watch - This will monitor the scss directory for changes and automatically rebuild the css and minified css (Effectively the same as sass --watch but with added minification) ### To get started with the grunt tools -You need to npm install grunt-cli to start with, otherwise you wont have a runner! +You need to install grunt-cli globally (`npm install -g grunt-cli`) to start with, otherwise you wont have a runner! Then following that, from the root dir of this project, run `npm install` which will set up all of the required dependencies. You should be good to go. ## Changelog +* Oct 10, 2013 - (v1.0.7) Documented the differences between the original skeleton project and Ribs, Updated normalize to 2.1.3 +* Aug 7, 2013 - (v1.0.6) Some additional variables, grid push and pull +* Jul 17, 2013 - (v1.0.5) Some additional variables, some base table styling +* Jul 14, 2013 - (v1.0.4) Removed reset and replaced it with normalize * May 30, 2013 - (v1.0.3) Added 1.5 * font size line heights to headings and paragraphs * May 28, 2013 - Rename project to Ribs * May 17, 2013 - (v1.0.2) Travis CI build configuration, and minor refactor to remove as many of the warnings from CSSLint as was feasible to do - MAY CAUSE REGRESSIONS. @@ -53,7 +72,7 @@ You should be good to go. ## Licence Copyright (c) 2013 Nick Pack Based on the original skeleton project which is Copyright 2011 Dave Gamache -Licensed under the MIT license. +Licensed under the MIT license. [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/nickpack/Ribs/trend.png)](https://bitdeli.com/free "Bitdeli Badge") diff --git a/build/css/Ribs.css b/build/css/Ribs.css new file mode 100644 index 0000000..125d866 --- /dev/null +++ b/build/css/Ribs.css @@ -0,0 +1,1125 @@ +/* +* Ribs +* Skeleton is Copyright 2011, Dave Gamache +* +* Ribs is the evolution of Skeleton by Nick Pack +* Free to use under the MIT license. +* http://github.com/nickpack/Ribs +*/ +/* normalize.css v2.1.2 | MIT License | git.io/normalize */ +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined in IE 8/9. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; } + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ +audio, +canvas, +video { + display: inline-block; } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; } + +/* ========================================================================== + Base + ========================================================================== */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* ========================================================================== + Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background: transparent; } + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ +a:focus { + outline: thin dotted; } + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, +a:hover { + outline: 0; } + +/* ========================================================================== + Typography + ========================================================================== */ +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ +b, +strong { + font-weight: bold; } + +/** + * Address styling not present in Safari 5 and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; } + +/** + * Improve readability of pre-formatted text in all browsers. + */ +pre { + white-space: pre-wrap; } + +/** + * Set consistent quote types. + */ +q { + quotes: "\201C" "\201D" "\2018" "\2019"; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* ========================================================================== + Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9. + */ +img { + border: 0; } + +/** + * Correct overflow displayed oddly in IE 9. + */ +svg:not(:root) { + overflow: hidden; } + +/* ========================================================================== + Figures + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari 5. + */ +figure { + margin: 0; } + +/* ========================================================================== + Forms + ========================================================================== */ +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ +button, +input, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +button, +input { + line-height: normal; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ +button, +select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; } + +/** + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; } + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ +textarea { + overflow: auto; + /* 1 */ + vertical-align: top; + /* 2 */ } + +/* ========================================================================== + Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +body { + background: #fff; + font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #444; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } + +hr { + border: solid #dddddd; + border-width: 1px 0 0; + clear: both; + margin: 10px 0 30px; + height: 0; } + +.container { + position: relative; + margin: 0 auto; + padding: 0; } + .container .alpha { + margin-left: 0; } + .container .omega { + margin-right: 0; } + +.column, .columns { + float: left; + margin-left: 10px; + margin-right: 10px; } + +.alpha-omega { + margin-right: 0; + margin-left: 0; } + +.row { + margin-bottom: 20px; } + +.container { + width: 960px; } + .container .one { + width: 40px; } + .container .two { + width: 100px; } + .container .three { + width: 160px; } + .container .four { + width: 220px; } + .container .five { + width: 280px; } + .container .six { + width: 340px; } + .container .seven { + width: 400px; } + .container .eight { + width: 460px; } + .container .nine { + width: 520px; } + .container .ten { + width: 580px; } + .container .eleven { + width: 640px; } + .container .twelve { + width: 700px; } + .container .thirteen { + width: 760px; } + .container .fourteen { + width: 820px; } + .container .fifteen { + width: 880px; } + .container .sixteen { + width: 940px; } + .container .one-third { + width: 300px; } + .container .two-thirds { + width: 620px; } + .container .one-half { + width: 460px; } + .container .one-quarter { + width: 220px; } + .container .three-quarters { + width: 700px; } + .container .offset-by-one { + padding-left: 60px; } + .container .offset-by-two { + padding-left: 120px; } + .container .offset-by-three { + padding-left: 180px; } + .container .offset-by-four { + padding-left: 240px; } + .container .offset-by-five { + padding-left: 300px; } + .container .offset-by-six { + padding-left: 360px; } + .container .offset-by-seven { + padding-left: 420px; } + .container .offset-by-eight { + padding-left: 480px; } + .container .offset-by-nine { + padding-left: 540px; } + .container .offset-by-ten { + padding-left: 600px; } + .container .offset-by-eleven { + padding-left: 660px; } + .container .offset-by-twelve { + padding-left: 720px; } + .container .offset-by-thirteen { + padding-left: 780px; } + .container .offset-by-fourteen { + padding-left: 840px; } + .container .offset-by-fifteen { + padding-left: 900px; } + .container .pull-by-one { + left: -60px; } + .container .pull-by-two { + left: -120px; } + .container .pull-by-three { + left: -180px; } + .container .pull-by-four { + left: -240px; } + .container .pull-by-five { + left: -300px; } + .container .pull-by-six { + left: -360px; } + .container .pull-by-seven { + left: -420px; } + .container .pull-by-eight { + left: -480px; } + .container .pull-by-nine { + left: -540px; } + .container .pull-by-ten { + left: -600px; } + .container .pull-by-eleven { + left: -660px; } + .container .pull-by-twelve { + left: -720px; } + .container .pull-by-thirteen { + left: -780px; } + .container .pull-by-fourteen { + left: -840px; } + .container .pull-by-fifteen { + left: -900px; } + .container .push-by-one { + left: 60px; } + .container .push-by-two { + left: 120px; } + .container .push-by-three { + left: 180px; } + .container .push-by-four { + left: 240px; } + .container .push-by-five { + left: 300px; } + .container .push-by-six { + left: 360px; } + .container .push-by-seven { + left: 420px; } + .container .push-by-eight { + left: 480px; } + .container .push-by-nine { + left: 540px; } + .container .push-by-ten { + left: 600px; } + .container .push-by-eleven { + left: 660px; } + .container .push-by-twelve { + left: 720px; } + .container .push-by-thirteen { + left: 780px; } + .container .push-by-fourteen { + left: 840px; } + .container .push-by-fifteen { + left: 900px; } + +@media only screen and (max-width: 959px) { + .container { + width: 768px; } + .container .one { + width: 28px; } + .container .two { + width: 76px; } + .container .three { + width: 124px; } + .container .four { + width: 172px; } + .container .five { + width: 220px; } + .container .six { + width: 268px; } + .container .seven { + width: 316px; } + .container .eight { + width: 364px; } + .container .nine { + width: 412px; } + .container .ten { + width: 460px; } + .container .eleven { + width: 508px; } + .container .twelve { + width: 556px; } + .container .thirteen { + width: 604px; } + .container .fourteen { + width: 652px; } + .container .fifteen { + width: 700px; } + .container .sixteen { + width: 748px; } + .container .one-third { + width: 236px; } + .container .two-thirds { + width: 492px; } + .container .one-half { + width: 364px; } + .container .one-quarter { + width: 172px; } + .container .three-quarters { + width: 556px; } + .container .offset-by-one { + padding-left: 48px; } + .container .offset-by-two { + padding-left: 96px; } + .container .offset-by-three { + padding-left: 144px; } + .container .offset-by-four { + padding-left: 192px; } + .container .offset-by-five { + padding-left: 240px; } + .container .offset-by-six { + padding-left: 288px; } + .container .offset-by-seven { + padding-left: 336px; } + .container .offset-by-eight { + padding-left: 384px; } + .container .offset-by-nine { + padding-left: 432px; } + .container .offset-by-ten { + padding-left: 480px; } + .container .offset-by-eleven { + padding-left: 528px; } + .container .offset-by-twelve { + padding-left: 576px; } + .container .offset-by-thirteen { + padding-left: 624px; } + .container .offset-by-fourteen { + padding-left: 672px; } + .container .offset-by-fifteen { + padding-left: 720px; } + .container .pull-by-one { + left: -48px; } + .container .pull-by-two { + left: -96px; } + .container .pull-by-three { + left: -144px; } + .container .pull-by-four { + left: -192px; } + .container .pull-by-five { + left: -240px; } + .container .pull-by-six { + left: -288px; } + .container .pull-by-seven { + left: -336px; } + .container .pull-by-eight { + left: -384px; } + .container .pull-by-nine { + left: -432px; } + .container .pull-by-ten { + left: -480px; } + .container .pull-by-eleven { + left: -528px; } + .container .pull-by-twelve { + left: -576px; } + .container .pull-by-thirteen { + left: -624px; } + .container .pull-by-fourteen { + left: -672px; } + .container .pull-by-fifteen { + left: -720px; } + .container .push-by-one { + left: 48px; } + .container .push-by-two { + left: 96px; } + .container .push-by-three { + left: 144px; } + .container .push-by-four { + left: 192px; } + .container .push-by-five { + left: 240px; } + .container .push-by-six { + left: 288px; } + .container .push-by-seven { + left: 336px; } + .container .push-by-eight { + left: 384px; } + .container .push-by-nine { + left: 432px; } + .container .push-by-ten { + left: 480px; } + .container .push-by-eleven { + left: 528px; } + .container .push-by-twelve { + left: 576px; } + .container .push-by-thirteen { + left: 624px; } + .container .push-by-fourteen { + left: 672px; } + .container .push-by-fifteen { + left: 720px; } + + .container { + width: 768px; } + .container .alpha { + margin-right: 10px; } + .container .omega { + margin-left: 10px; } } +@media only screen and (max-width: 767px) { + .container { + width: 90%; } + .container .one, .container .two, .container .three, .container .four, .container .five, .container .six, .container .seven, .container .eight, .container .nine, .container .ten, .container .eleven, .container .twelve, .container .thirteen, .container .fourteen, .container .fifteen, .container .sixteen, .container .one-third, .container .two-thirds, .container .one-half, .container .one-quarter, .container .three-quarters { + width: 100%; } + .container .column, .container .columns { + margin: 0; } + .container .offset-by-one, + .container .offset-by-two, + .container .offset-by-three, + .container .offset-by-four, + .container .offset-by-five, + .container .offset-by-six, + .container .offset-by-seven, + .container .offset-by-eight, + .container .offset-by-nine, + .container .offset-by-ten, + .container .offset-by-eleven, + .container .offset-by-twelve, + .container .offset-by-thirteen, + .container .offset-by-fourteen, + .container .offset-by-fifteen { + padding-left: 0; } } +.container:after { + content: "\0020"; + display: block; + height: 0; + clear: both; + visibility: hidden; } + +.clearfix:before, +.clearfix:after, +.row:before, +.row:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } + +.row:after, +.clearfix:after { + clear: both; } + +.row, .clearfix { + zoom: 1; } + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + font-weight: inherit; } + +h1 { + color: #181818; + font-family: "Georgia", "Times New Roman", serif; + font-weight: normal; + font-size: 46px; + line-height: 69px; + margin: 0 0 14px 0; } + +h2 { + color: #181818; + font-family: "Georgia", "Times New Roman", serif; + font-weight: normal; + font-size: 35px; + line-height: 52.5px; + margin: 0 0 10px 0; } + +h3 { + color: #181818; + font-family: "Georgia", "Times New Roman", serif; + font-weight: normal; + font-size: 28px; + line-height: 42px; + margin: 0 0 8px 0; } + +h4 { + color: #181818; + font-family: "Georgia", "Times New Roman", serif; + font-weight: normal; + font-size: 21px; + line-height: 31.5px; + margin: 0 0 4px 0; } + +h5 { + color: #181818; + font-family: "Georgia", "Times New Roman", serif; + font-weight: normal; + font-size: 17px; + line-height: 25.5px; } + +h6 { + color: #181818; + font-family: "Georgia", "Times New Roman", serif; + font-weight: normal; + font-size: 14px; + line-height: 21px; } + +.subheader { + color: #777777; } + +p { + margin: 0 0 20px 0; + line-height: 21px; } + +p img { + margin: 0; } + +.lead { + font-size: 21px; + line-height: 31.5px; + color: #777777; } + +em { + font-style: italic; } + +strong { + font-weight: bold; + color: #333333; } + +small { + font-size: 80%; } + +blockquote, blockquote p { + font-size: 17px; + line-height: 24px; + color: #777777; + font-style: italic; } + +blockquote { + margin: 0 0 20px; + padding: 9px 20px 0 19px; + border-left: 1px solid #dddddd; } + +blockquote cite { + display: block; + font-size: 12px; + color: #555555; } + +blockquote cite:before { + content: "\2014 \0020"; } + +blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { + color: #555555; } + +a, a:visited { + color: #333333; + text-decoration: underline; } + +a:hover, a:focus { + color: black; + text-decoration: none; + outline: 0; } + +p a, p a:visited { + line-height: inherit; } + +ul, ol { + margin: 0 0 20px 0; } + +ul { + list-style: none outside; } + +ol { + list-style: decimal; } + +ol, ul.square, ul.circle, ul.disc { + margin: 0 0 0 10px; } + +ul.square { + list-style: square outside; } + +ul.circle { + list-style: circle outside; } + +ul.disc { + list-style: disc outside; } + +ul ul, ul ol, +ol ol, ol ul { + margin: 4px 0 5px 30px; + font-size: 90%; } + +li { + line-height: 18px; + margin: 0 0 12px 0; } + +.large li { + line-height: 21px; } + +li p { + line-height: 21px; } + +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + background-color: #cccccc; + background-color: rgba(153, 153, 153, 0.2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-repeat: repeat-x; + border: 1px solid #aaaaaa; + border-top: 1px solid #cccccc; + border-left: 1px solid #cccccc; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + color: #444444; + display: inline-block; + font-size: 11px; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px rgba(255, 255, 255, 0.75); + cursor: pointer; + margin: 0 0 20px 0; + line-height: normal; + padding: 8px 10px; + font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } + +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover { + background-color: #cccccc; + background-color: rgba(153, 153, 153, 0.3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3))); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-repeat: repeat-x; + color: #222222; + border: 1px solid #888888; + border-top: 1px solid #aaaaaa; + border-left: 1px solid #aaaaaa; } + +.button:active, +button:active, +input[type="submit"]:active, +input[type="reset"]:active, +input[type="button"]:active { + background-color: #cccccc; + background-color: rgba(153, 153, 153, 0.2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-repeat: repeat-x; + border: 1px solid #666666; } + +.button .full-width, +button.full-width, +input[type="submit"].full-width, +input[type="reset"].full-width, +input[type="button"].full-width { + width: 100%; + padding-left: 0; + padding-right: 0; + text-align: center; } + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +form { + margin: 0 0 20px 0; } + +fieldset { + margin: 0 0 20px 0; } + +input[type="search"], +input[type="url"] { + -webkit-appearance: textfield; + -moz-appearance: textfield; } + +input[type="text"], +input[type="password"], +input[type="email"], +input[type="search"], +input[type="url"], +input[type="number"], +input[type="tel"], +textarea, +select { + border: 1px solid #cccccc; + padding: 6px 4px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #777777; + width: 210px; + max-width: 100%; + display: block; + margin: 0 0 20px 0; + background: white; } + +select { + padding: 10px; + width: 220px; } + +input[type="text"]:focus, +input[type="password"]:focus, +input[type="email"]:focus, +input[type="search"]:focus, +input[type="url"]:focus, +input[type="number"]:focus, +input[type="tel"]:focus, +textarea:focus { + border: 1px solid #aaaaaa; + color: #444444; + outline: none; + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } + +textarea { + min-height: 60px; } + +label, +legend { + display: block; + font-weight: bold; + font-size: 13px; } + +input[type="checkbox"] { + display: inline; } + +label span, +legend span { + font-weight: normal; + font-size: 13px; + color: #444444; } + +.scale-with-grid { + max-width: 100%; + height: auto; } + +table { + max-width: 100%; + background: white; + border-collapse: collapse; + border-spacing: 0; + width: 100%; + margin: 10px 0; } + table th, + table td { + padding: 8px; + line-height: 21px; + text-align: left; + vertical-align: top; + border-top: 1px solid #cccccc; } + table th { + font-weight: bold; } + table thead th { + vertical-align: bottom; } + table caption thead tr:first-child th, + table caption thead tr:first-child td, + table colgroup thead tr:first-child th, + table colgroup thead tr:first-child td, + table thead:first-child tr:first-child th, + table thead:first-child tr:first-child td { + border-top: 0; } + table tbody tbody { + border-top: 2px solid #cccccc; } + table table { + background: white; } + +.table-condensed th, +.table-condensed td { + padding: 4px 5px; } + +.table-bordered { + border: 1px solid #cccccc; + border-collapse: separate; + border-left: 0; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } + .table-bordered th, + .table-bordered td { + border-left: 1px solid #cccccc; } + .table-bordered caption thead tr:first-child th, + .table-bordered caption tbody tr:first-child th, + .table-bordered caption tbody tr:first-child td, + .table-bordered colgroup thead tr:first-child th, + .table-bordered colgroup tbody tr:first-child th, + .table-bordered colgroup tbody tr:first-child td, + .table-bordered thead:first-child tr:first-child th, + .table-bordered tbody:first-child tr:first-child th, + .table-bordered tbody:first-child tr:first-child td { + border-top: 0; } + .table-bordered thead:first-child tr:first-child > th:first-child, + .table-bordered tbody:first-child tr:first-child > td:first-child, + .table-bordered tbody:first-child tr:first-child > th:first-child { + -webkit-border-top-left-radius: 3px; + -moz-border-radius-topleft: 3px; + border-top-left-radius: 3px; } + .table-bordered thead:first-child tr:first-child > th:last-child, + .table-bordered tbody:first-child tr:first-child > td:last-child, + .table-bordered tbody:first-child tr:first-child > th:last-child { + -webkit-border-top-right-radius: 3px; + -moz-border-radius-topright: 3px; + border-top-right-radius: 3px; } + .table-bordered thead:last-child tr:last-child > th:first-child, + .table-bordered tbody:last-child tr:last-child > td:first-child, + .table-bordered tbody:last-child tr:last-child > th:first-child, + .table-bordered tfoot:last-child tr:last-child > td:first-child, + .table-bordered tfoot:last-child tr:last-child > th:first-child { + -webkit-border-bottom-left-radius: 3px; + -moz-border-radius-bottomleft: 3px; + border-bottom-left-radius: 3px; } + .table-bordered thead:last-child tr:last-child > th:last-child, + .table-bordered tbody:last-child tr:last-child > td:last-child, + .table-bordered tbody:last-child tr:last-child > th:last-child, + .table-bordered tfoot:last-child tr:last-child > td:last-child, + .table-bordered tfoot:last-child tr:last-child > th:last-child { + -webkit-border-bottom-right-radius: 3px; + -moz-border-radius-bottomright: 3px; + border-bottom-right-radius: 3px; } + .table-bordered tfoot tbody:last-child tr:last-child td:first-child { + -webkit-border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; + border-bottom-left-radius: 0; } + .table-bordered tfoot tbody:last-child tr:last-child td:last-child { + -webkit-border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; + border-bottom-right-radius: 0; } + .table-bordered caption thead tr:first-child th:first-child, + .table-bordered caption tbody tr:first-child td:first-child, + .table-bordered colgroup thead tr:first-child th:first-child, + .table-bordered colgroup tbody tr:first-child td:first-child { + -webkit-border-top-left-radius: 3px; + -moz-border-radius-topleft: 3px; + border-top-left-radius: 3px; } + .table-bordered caption thead tr:first-child th:last-child, + .table-bordered caption tbody tr:first-child td:last-child, + .table-bordered colgroup thead tr:first-child th:last-child, + .table-bordered colgroup tbody tr:first-child td:last-child { + -webkit-border-top-right-radius: 3px; + -moz-border-radius-topright: 3px; + border-top-right-radius: 3px; } + +.table-striped tbody > tr:nth-child(odd) > td, +.table-striped tbody > tr:nth-child(odd) > th { + background-color: #efefef; } + +.table-hover tbody tr:hover > td, +.table-hover tbody tr:hover > th { + background-color: #999999; } diff --git a/build/css/Ribs.min.css b/build/css/Ribs.min.css new file mode 100644 index 0000000..4fadd34 --- /dev/null +++ b/build/css/Ribs.min.css @@ -0,0 +1,2 @@ +/* Ribs 1.0.6 - https://github.com/nickpack/Ribs - 07-08-2013 */ +article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{background:#fff;font:14px/21px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0}.container{position:relative;margin:0 auto;padding:0}.container .alpha{margin-left:0}.container .omega{margin-right:0}.column,.columns{float:left;margin-left:10px;margin-right:10px}.alpha-omega{margin-right:0;margin-left:0}.row{margin-bottom:20px}.container{width:960px}.container .one{width:40px}.container .two{width:100px}.container .three{width:160px}.container .four{width:220px}.container .five{width:280px}.container .six{width:340px}.container .seven{width:400px}.container .eight{width:460px}.container .nine{width:520px}.container .ten{width:580px}.container .eleven{width:640px}.container .twelve{width:700px}.container .thirteen{width:760px}.container .fourteen{width:820px}.container .fifteen{width:880px}.container .sixteen{width:940px}.container .one-third{width:300px}.container .two-thirds{width:620px}.container .one-half{width:460px}.container .one-quarter{width:220px}.container .three-quarters{width:700px}.container .offset-by-one{padding-left:60px}.container .offset-by-two{padding-left:120px}.container .offset-by-three{padding-left:180px}.container .offset-by-four{padding-left:240px}.container .offset-by-five{padding-left:300px}.container .offset-by-six{padding-left:360px}.container .offset-by-seven{padding-left:420px}.container .offset-by-eight{padding-left:480px}.container .offset-by-nine{padding-left:540px}.container .offset-by-ten{padding-left:600px}.container .offset-by-eleven{padding-left:660px}.container .offset-by-twelve{padding-left:720px}.container .offset-by-thirteen{padding-left:780px}.container .offset-by-fourteen{padding-left:840px}.container .offset-by-fifteen{padding-left:900px}.container .pull-by-one{left:-60px}.container .pull-by-two{left:-120px}.container .pull-by-three{left:-180px}.container .pull-by-four{left:-240px}.container .pull-by-five{left:-300px}.container .pull-by-six{left:-360px}.container .pull-by-seven{left:-420px}.container .pull-by-eight{left:-480px}.container .pull-by-nine{left:-540px}.container .pull-by-ten{left:-600px}.container .pull-by-eleven{left:-660px}.container .pull-by-twelve{left:-720px}.container .pull-by-thirteen{left:-780px}.container .pull-by-fourteen{left:-840px}.container .pull-by-fifteen{left:-900px}.container .push-by-one{left:60px}.container .push-by-two{left:120px}.container .push-by-three{left:180px}.container .push-by-four{left:240px}.container .push-by-five{left:300px}.container .push-by-six{left:360px}.container .push-by-seven{left:420px}.container .push-by-eight{left:480px}.container .push-by-nine{left:540px}.container .push-by-ten{left:600px}.container .push-by-eleven{left:660px}.container .push-by-twelve{left:720px}.container .push-by-thirteen{left:780px}.container .push-by-fourteen{left:840px}.container .push-by-fifteen{left:900px}@media only screen and (max-width:959px){.container{width:768px}.container .one{width:28px}.container .two{width:76px}.container .three{width:124px}.container .four{width:172px}.container .five{width:220px}.container .six{width:268px}.container .seven{width:316px}.container .eight{width:364px}.container .nine{width:412px}.container .ten{width:460px}.container .eleven{width:508px}.container .twelve{width:556px}.container .thirteen{width:604px}.container .fourteen{width:652px}.container .fifteen{width:700px}.container .sixteen{width:748px}.container .one-third{width:236px}.container .two-thirds{width:492px}.container .one-half{width:364px}.container .one-quarter{width:172px}.container .three-quarters{width:556px}.container .offset-by-one{padding-left:48px}.container .offset-by-two{padding-left:96px}.container .offset-by-three{padding-left:144px}.container .offset-by-four{padding-left:192px}.container .offset-by-five{padding-left:240px}.container .offset-by-six{padding-left:288px}.container .offset-by-seven{padding-left:336px}.container .offset-by-eight{padding-left:384px}.container .offset-by-nine{padding-left:432px}.container .offset-by-ten{padding-left:480px}.container .offset-by-eleven{padding-left:528px}.container .offset-by-twelve{padding-left:576px}.container .offset-by-thirteen{padding-left:624px}.container .offset-by-fourteen{padding-left:672px}.container .offset-by-fifteen{padding-left:720px}.container .pull-by-one{left:-48px}.container .pull-by-two{left:-96px}.container .pull-by-three{left:-144px}.container .pull-by-four{left:-192px}.container .pull-by-five{left:-240px}.container .pull-by-six{left:-288px}.container .pull-by-seven{left:-336px}.container .pull-by-eight{left:-384px}.container .pull-by-nine{left:-432px}.container .pull-by-ten{left:-480px}.container .pull-by-eleven{left:-528px}.container .pull-by-twelve{left:-576px}.container .pull-by-thirteen{left:-624px}.container .pull-by-fourteen{left:-672px}.container .pull-by-fifteen{left:-720px}.container .push-by-one{left:48px}.container .push-by-two{left:96px}.container .push-by-three{left:144px}.container .push-by-four{left:192px}.container .push-by-five{left:240px}.container .push-by-six{left:288px}.container .push-by-seven{left:336px}.container .push-by-eight{left:384px}.container .push-by-nine{left:432px}.container .push-by-ten{left:480px}.container .push-by-eleven{left:528px}.container .push-by-twelve{left:576px}.container .push-by-thirteen{left:624px}.container .push-by-fourteen{left:672px}.container .push-by-fifteen{left:720px}.container{width:768px}.container .alpha{margin-right:10px}.container .omega{margin-left:10px}}@media only screen and (max-width:767px){.container{width:90%}.container .one,.container .two,.container .three,.container .four,.container .five,.container .six,.container .seven,.container .eight,.container .nine,.container .ten,.container .eleven,.container .twelve,.container .thirteen,.container .fourteen,.container .fifteen,.container .sixteen,.container .one-third,.container .two-thirds,.container .one-half,.container .one-quarter,.container .three-quarters{width:100%}.container .column,.container .columns{margin:0}.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen{padding-left:0}}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after,.clearfix:after{clear:both}.row,.clearfix{zoom:1}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:46px;line-height:69px;margin:0 0 14px}h2{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:35px;line-height:52.5px;margin:0 0 10px}h3{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:28px;line-height:42px;margin:0 0 8px}h4{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:21px;line-height:31.5px;margin:0 0 4px}h5{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:17px;line-height:25.5px}h6{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:14px;line-height:21px}.subheader{color:#777}p{margin:0 0 20px;line-height:21px}p img{margin:0}.lead{font-size:21px;line-height:31.5px;color:#777}em{font-style:italic}strong{font-weight:700;color:#333}small{font-size:80%}blockquote,blockquote p{font-size:17px;line-height:24px;color:#777;font-style:italic}blockquote{margin:0 0 20px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:12px;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited,blockquote cite a:visited{color:#555}a,a:visited{color:#333;text-decoration:underline}a:hover,a:focus{color:#000;text-decoration:none;outline:0}p a,p a:visited{line-height:inherit}ul,ol{margin:0 0 20px}ul{list-style:none outside}ol{list-style:decimal}ol,ul.square,ul.circle,ul.disc{margin:0 0 0 10px}ul.square{list-style:square outside}ul.circle{list-style:circle outside}ul.disc{list-style:disc outside}ul ul,ul ol,ol ol,ol ul{margin:4px 0 5px 30px;font-size:90%}li{line-height:18px;margin:0 0 12px}.large li{line-height:21px}li p{line-height:21px}.button,button,input[type=submit],input[type=reset],input[type=button]{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #aaa;border-top:1px solid #ccc;border-left:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#444;display:inline-block;font-size:11px;font-weight:700;text-decoration:none;text-shadow:0 1px rgba(255,255,255,.75);cursor:pointer;margin:0 0 20px;line-height:normal;padding:8px 10px;font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif}.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{background-color:#ccc;background-color:rgba(153,153,153,.3);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(0,0,0,.3)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.3));background-repeat:repeat-x;color:#222;border:1px solid #888;border-top:1px solid #aaa;border-left:1px solid #aaa}.button:active,button:active,input[type=submit]:active,input[type=reset]:active,input[type=button]:active{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #666}.button .full-width,button.full-width,input[type=submit].full-width,input[type=reset].full-width,input[type=button].full-width{width:100%;padding-left:0;padding-right:0;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin:0 0 20px}fieldset{margin:0 0 20px}input[type=search],input[type=url]{-webkit-appearance:textfield;-moz-appearance:textfield}input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],input[type=tel],textarea,select{border:1px solid #ccc;padding:6px 4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font:13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;width:210px;max-width:100%;display:block;margin:0 0 20px;background:#fff}select{padding:10px;width:220px}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,input[type=tel]:focus,textarea:focus{border:1px solid #aaa;color:#444;outline:0;-moz-box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2)}textarea{min-height:60px}label,legend{display:block;font-weight:700;font-size:13px}input[type=checkbox]{display:inline}label span,legend span{font-weight:400;font-size:13px;color:#444}.scale-with-grid{max-width:100%;height:auto}table{max-width:100%;background:#fff;border-collapse:collapse;border-spacing:0;width:100%;margin:10px 0}table th,table td{padding:8px;line-height:21px;text-align:left;vertical-align:top;border-top:1px solid #ccc}table th{font-weight:700}table thead th{vertical-align:bottom}table caption thead tr:first-child th,table caption thead tr:first-child td,table colgroup thead tr:first-child th,table colgroup thead tr:first-child td,table thead:first-child tr:first-child th,table thead:first-child tr:first-child td{border-top:0}table tbody tbody{border-top:2px solid #ccc}table table{background:#fff}.table-condensed th,.table-condensed td{padding:4px 5px}.table-bordered{border:1px solid #ccc;border-collapse:separate;border-left:0;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.table-bordered th,.table-bordered td{border-left:1px solid #ccc}.table-bordered caption thead tr:first-child th,.table-bordered caption tbody tr:first-child th,.table-bordered caption tbody tr:first-child td,.table-bordered colgroup thead tr:first-child th,.table-bordered colgroup tbody tr:first-child th,.table-bordered colgroup tbody tr:first-child td,.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0}.table-bordered thead:first-child tr:first-child>th:first-child,.table-bordered tbody:first-child tr:first-child>td:first-child,.table-bordered tbody:first-child tr:first-child>th:first-child{-webkit-border-top-left-radius:3px;-moz-border-radius-topleft:3px;border-top-left-radius:3px}.table-bordered thead:first-child tr:first-child>th:last-child,.table-bordered tbody:first-child tr:first-child>td:last-child,.table-bordered tbody:first-child tr:first-child>th:last-child{-webkit-border-top-right-radius:3px;-moz-border-radius-topright:3px;border-top-right-radius:3px}.table-bordered thead:last-child tr:last-child>th:first-child,.table-bordered tbody:last-child tr:last-child>td:first-child,.table-bordered tbody:last-child tr:last-child>th:first-child,.table-bordered tfoot:last-child tr:last-child>td:first-child,.table-bordered tfoot:last-child tr:last-child>th:first-child{-webkit-border-bottom-left-radius:3px;-moz-border-radius-bottomleft:3px;border-bottom-left-radius:3px}.table-bordered thead:last-child tr:last-child>th:last-child,.table-bordered tbody:last-child tr:last-child>td:last-child,.table-bordered tbody:last-child tr:last-child>th:last-child,.table-bordered tfoot:last-child tr:last-child>td:last-child,.table-bordered tfoot:last-child tr:last-child>th:last-child{-webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomright:3px;border-bottom-right-radius:3px}.table-bordered tfoot tbody:last-child tr:last-child td:first-child{-webkit-border-bottom-left-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0}.table-bordered tfoot tbody:last-child tr:last-child td:last-child{-webkit-border-bottom-right-radius:0;-moz-border-radius-bottomright:0;border-bottom-right-radius:0}.table-bordered caption thead tr:first-child th:first-child,.table-bordered caption tbody tr:first-child td:first-child,.table-bordered colgroup thead tr:first-child th:first-child,.table-bordered colgroup tbody tr:first-child td:first-child{-webkit-border-top-left-radius:3px;-moz-border-radius-topleft:3px;border-top-left-radius:3px}.table-bordered caption thead tr:first-child th:last-child,.table-bordered caption tbody tr:first-child td:last-child,.table-bordered colgroup thead tr:first-child th:last-child,.table-bordered colgroup tbody tr:first-child td:last-child{-webkit-border-top-right-radius:3px;-moz-border-radius-topright:3px;border-top-right-radius:3px}.table-striped tbody>tr:nth-child(odd)>td,.table-striped tbody>tr:nth-child(odd)>th{background-color:#efefef}.table-hover tbody tr:hover>td,.table-hover tbody tr:hover>th{background-color:#999} \ No newline at end of file diff --git a/img/apple-touch-icon-114x114.png b/build/img/apple-touch-icon-114x114.png similarity index 100% rename from img/apple-touch-icon-114x114.png rename to build/img/apple-touch-icon-114x114.png diff --git a/img/apple-touch-icon-72x72.png b/build/img/apple-touch-icon-72x72.png similarity index 100% rename from img/apple-touch-icon-72x72.png rename to build/img/apple-touch-icon-72x72.png diff --git a/img/apple-touch-icon.png b/build/img/apple-touch-icon.png similarity index 100% rename from img/apple-touch-icon.png rename to build/img/apple-touch-icon.png diff --git a/img/favicon.ico b/build/img/favicon.ico similarity index 100% rename from img/favicon.ico rename to build/img/favicon.ico diff --git a/index.html b/build/index.html similarity index 99% rename from index.html rename to build/index.html index 1bed76b..d286d0b 100644 --- a/index.html +++ b/build/index.html @@ -42,7 +42,7 @@

Ribs

-
Version 1.0.3
+
Version 1.0.5
diff --git a/component.json b/component.json index a44cc4f..eebae30 100644 --- a/component.json +++ b/component.json @@ -1,6 +1,6 @@ { "name": "Ribs", - "version": "1.0.3", + "version": "1.0.7", "main": "css/Ribs.css", "ignore": [ "**/.*", @@ -11,4 +11,4 @@ "type": "git", "url": "https://github.com/nickpack/Ribs.git" } -} \ No newline at end of file +} diff --git a/css/Ribs.css b/css/Ribs.css deleted file mode 100644 index 91152d0..0000000 --- a/css/Ribs.css +++ /dev/null @@ -1,640 +0,0 @@ -/* -* Ribs V1.0.2 -* Skeleton is Copyright 2011, Dave Gamache -* -* Ribs is the evolution of Skeleton by Nick Pack -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 28/05/2013 -*/ -/* ul, ol with disc, square etc. */ -/* #Reset & Basics (Inspired by E. Meyers) -================================================== */ -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; } - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; } - -body { - line-height: 1; } - -ol, ul { - list-style: none; } - -blockquote, q { - quotes: none; } - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -/* #Misc -================================================== */ -.remove-bottom { - margin-bottom: 0; } - -.half-bottom { - margin-bottom: 10px; } - -.add-bottom { - margin-bottom: 20px; } - -/* #Basic Styles -================================================== */ -body { - background: #fff; - font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #444; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; } - -.container { - position: relative; - margin: 0 auto; - padding: 0; } - .container .alpha { - margin-left: 0; } - .container .omega { - margin-right: 0; } - -.column, .columns { - float: left; - margin-left: 10px; - margin-right: 10px; } - -.row { - margin-bottom: 20px; } - -.container { - width: 960px; } - .container .one { - width: 40px; } - .container .two { - width: 100px; } - .container .three { - width: 160px; } - .container .four { - width: 220px; } - .container .five { - width: 280px; } - .container .six { - width: 340px; } - .container .seven { - width: 400px; } - .container .eight { - width: 460px; } - .container .nine { - width: 520px; } - .container .ten { - width: 580px; } - .container .eleven { - width: 640px; } - .container .twelve { - width: 700px; } - .container .thirteen { - width: 760px; } - .container .fourteen { - width: 820px; } - .container .fifteen { - width: 880px; } - .container .sixteen { - width: 940px; } - .container .one-third { - width: 300px; } - .container .two-thirds { - width: 620px; } - .container .one-half { - width: 460px; } - .container .one-quarter { - width: 220px; } - .container .three-quarters { - width: 700px; } - .container .offset-by-one { - padding-left: 60px; } - .container .offset-by-two { - padding-left: 120px; } - .container .offset-by-three { - padding-left: 180px; } - .container .offset-by-four { - padding-left: 240px; } - .container .offset-by-five { - padding-left: 300px; } - .container .offset-by-six { - padding-left: 360px; } - .container .offset-by-seven { - padding-left: 420px; } - .container .offset-by-eight { - padding-left: 480px; } - .container .offset-by-nine { - padding-left: 540px; } - .container .offset-by-ten { - padding-left: 600px; } - .container .offset-by-eleven { - padding-left: 660px; } - .container .offset-by-twelve { - padding-left: 720px; } - .container .offset-by-thirteen { - padding-left: 780px; } - .container .offset-by-fourteen { - padding-left: 840px; } - .container .offset-by-fifteen { - padding-left: 900px; } - -@media only screen and (max-width: 959px) { - .container { - width: 768px; } - .container .one { - width: 28px; } - .container .two { - width: 76px; } - .container .three { - width: 124px; } - .container .four { - width: 172px; } - .container .five { - width: 220px; } - .container .six { - width: 268px; } - .container .seven { - width: 316px; } - .container .eight { - width: 364px; } - .container .nine { - width: 412px; } - .container .ten { - width: 460px; } - .container .eleven { - width: 508px; } - .container .twelve { - width: 556px; } - .container .thirteen { - width: 604px; } - .container .fourteen { - width: 652px; } - .container .fifteen { - width: 700px; } - .container .sixteen { - width: 748px; } - .container .one-third { - width: 236px; } - .container .two-thirds { - width: 492px; } - .container .one-half { - width: 364px; } - .container .one-quarter { - width: 172px; } - .container .three-quarters { - width: 556px; } - .container .offset-by-one { - padding-left: 48px; } - .container .offset-by-two { - padding-left: 96px; } - .container .offset-by-three { - padding-left: 144px; } - .container .offset-by-four { - padding-left: 192px; } - .container .offset-by-five { - padding-left: 240px; } - .container .offset-by-six { - padding-left: 288px; } - .container .offset-by-seven { - padding-left: 336px; } - .container .offset-by-eight { - padding-left: 384px; } - .container .offset-by-nine { - padding-left: 432px; } - .container .offset-by-ten { - padding-left: 480px; } - .container .offset-by-eleven { - padding-left: 528px; } - .container .offset-by-twelve { - padding-left: 576px; } - .container .offset-by-thirteen { - padding-left: 624px; } - .container .offset-by-fourteen { - padding-left: 672px; } - .container .offset-by-fifteen { - padding-left: 720px; } - - .container { - width: 768px; } - .container .alpha { - margin-right: 10px; } - .container .omega { - margin-left: 10px; } - - .alpha-omega { - margin-right: 0; - margin-left: 0; } } -@media only screen and (max-width: 767px) { - .container { - width: 90%; } - .container .one, .container .two, .container .three, .container .four, .container .five, .container .six, .container .seven, .container .eight, .container .nine, .container .ten, .container .eleven, .container .twelve, .container .thirteen, .container .fourteen, .container .fifteen, .container .sixteen, .container .one-third, .container .two-thirds, .container .one-half, .container .one-quarter, .container .three-quarters { - width: 100%; } - .container .column, .container .columns { - margin: 0; } - .container .offset-by-one, - .container .offset-by-two, - .container .offset-by-three, - .container .offset-by-four, - .container .offset-by-five, - .container .offset-by-six, - .container .offset-by-seven, - .container .offset-by-eight, - .container .offset-by-nine, - .container .offset-by-ten, - .container .offset-by-eleven, - .container .offset-by-twelve, - .container .offset-by-thirteen, - .container .offset-by-fourteen, - .container .offset-by-fifteen { - padding-left: 0; } } -/* #Clearing -================================================== */ -/* Self Clearing Goodness */ -.container:after { - content: "\0020"; - display: block; - height: 0; - clear: both; - visibility: hidden; } - -/* Use clearfix class on parent to clear nested columns, -or wrap each row of columns in a
*/ -.clearfix:before, -.clearfix:after, -.row:before, -.row:after { - content: '\0020'; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; } - -.row:after, -.clearfix:after { - clear: both; } - -.row, -.clearfix { - zoom: 1; } - -/* You can also use a
to clear columns */ -.clear { - clear: both; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; } - -/* #Typography -================================================== */ -/* @font-face { - font-family: 'FontName'; - src: url('../fonts/FontName.eot'); - src: url('../fonts/FontName.eot?iefix') format('eot'), - url('../fonts/FontName.woff') format('woff'), - url('../fonts/FontName.ttf') format('truetype'), - url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); - font-weight: normal; - font-style: normal; } -*/ -h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - font-weight: inherit; } - -h1 { - color: #181818; - font-family: "Georgia", "Times New Roman", serif; - font-weight: normal; - font-size: 46px; - line-height: 69px; - margin: 0 0 14px 0; } - -h2 { - color: #181818; - font-family: "Georgia", "Times New Roman", serif; - font-weight: normal; - font-size: 35px; - line-height: 52.5px; - margin: 0 0 10px 0; } - -h3 { - color: #181818; - font-family: "Georgia", "Times New Roman", serif; - font-weight: normal; - font-size: 28px; - line-height: 42px; - margin: 0 0 8px 0; } - -h4 { - color: #181818; - font-family: "Georgia", "Times New Roman", serif; - font-weight: normal; - font-size: 21px; - line-height: 31.5px; - margin: 0 0 4px 0; } - -h5 { - color: #181818; - font-family: "Georgia", "Times New Roman", serif; - font-weight: normal; - font-size: 17px; - line-height: 25.5px; } - -h6 { - color: #181818; - font-family: "Georgia", "Times New Roman", serif; - font-weight: normal; - font-size: 14px; - line-height: 21px; } - -.subheader { - color: #777777; } - -p { - margin: 0 0 20px 0; - line-height: 21px; } - -p img { - margin: 0; } - -.lead { - font-size: 21px; - line-height: 31.5px; - color: #777777; } - -em { - font-style: italic; } - -strong { - font-weight: bold; - color: #333333; } - -small { - font-size: 80%; } - -/* Blockquotes */ -blockquote, blockquote p { - font-size: 17px; - line-height: 24px; - color: #777777; - font-style: italic; } - -blockquote { - margin: 0 0 20px; - padding: 9px 20px 0 19px; - border-left: 1px solid #dddddd; } - -blockquote cite { - display: block; - font-size: 12px; - color: #555555; } - -blockquote cite:before { - content: "\2014 \0020"; } - -blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { - color: #555555; } - -/* not really typographical, but I couldnt find anywhere else to put it */ -hr { - border: solid #dddddd; - border-width: 1px 0 0; - clear: both; - margin: 10px 0 30px; - height: 0; } - -/* #Links -================================================== */ -a, a:visited { - color: #333333; - text-decoration: underline; } - -a:hover, a:focus { - color: black; - text-decoration: none; - outline: 0; } - -p a, p a:visited { - line-height: inherit; } - -/* #Lists -================================================== */ -ul, ol { - margin: 0 0 20px 0; } - -ul { - list-style: none outside; } - -ol { - list-style: decimal; } - -ol, ul.square, ul.circle, ul.disc { - margin: 0 0 0 30px; } - -ul.square { - list-style: square outside; } - -ul.circle { - list-style: circle outside; } - -ul.disc { - list-style: disc outside; } - -ul ul, ul ol, -ol ol, ol ul { - margin: 4px 0 5px 30px; - font-size: 90%; } - -li { - line-height: 18px; - margin: 0 0 12px 0; } - -.large li { - line-height: 21px; } - -li p { - line-height: 21px; } - -/* #Buttons -================================================== */ -.button, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - background-color: #cccccc; - background-color: rgba(153, 153, 153, 0.2); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-repeat: repeat-x; - border: 1px solid #aaaaaa; - border-top: 1px solid #cccccc; - border-left: 1px solid #cccccc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - color: #444444; - display: inline-block; - font-size: 11px; - font-weight: bold; - text-decoration: none; - text-shadow: 0 1px rgba(255, 255, 255, 0.75); - cursor: pointer; - margin: 0 0 20px 0; - line-height: normal; - padding: 8px 10px; - font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } - -.button:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover { - background-color: #cccccc; - background-color: rgba(153, 153, 153, 0.3); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3))); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-repeat: repeat-x; - color: #222222; - border: 1px solid #888888; - border-top: 1px solid #aaaaaa; - border-left: 1px solid #aaaaaa; } - -.button:active, -button:active, -input[type="submit"]:active, -input[type="reset"]:active, -input[type="button"]:active { - background-color: #cccccc; - background-color: rgba(153, 153, 153, 0.2); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-repeat: repeat-x; - border: 1px solid #666666; } - -.button .full-width, -button.full-width, -input[type="submit"].full-width, -input[type="reset"].full-width, -input[type="button"].full-width { - width: 100%; - padding-left: 0; - padding-right: 0; - text-align: center; } - -/* Fix for odd Mozilla border & padding issues */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } - -/* #Forms -================================================== */ -form { - margin: 0 0 20px 0; } - -fieldset { - margin: 0 0 20px 0; } - -input[type="search"], -input[type="url"] { - -webkit-appearance: textfield; - -moz-appearance: textfield; } - -input[type="text"], -input[type="password"], -input[type="email"], -input[type="search"], -input[type="url"], -input[type="number"], -input[type="tel"], -textarea, -select { - border: 1px solid #cccccc; - padding: 6px 4px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #777777; - width: 210px; - max-width: 100%; - display: block; - margin: 0 0 20px 0; - background: white; } - -select { - padding: 0; } - -input[type="text"]:focus, -input[type="password"]:focus, -input[type="email"]:focus, -input[type="search"]:focus, -input[type="url"]:focus, -input[type="number"]:focus, -input[type="tel"]:focus, -textarea:focus { - border: 1px solid #aaaaaa; - color: #444444; - outline: none; - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } - -textarea { - min-height: 60px; } - -label, -legend { - display: block; - font-weight: bold; - font-size: 13px; } - -select { - width: 220px; } - -input[type="checkbox"] { - display: inline; } - -label span, -legend span { - font-weight: normal; - font-size: 13px; - color: #444444; } - -/* #Images -================================================== */ -.scale-with-grid { - max-width: 100%; - height: auto; } - -/* #Example Media Queries -================================================== */ -/* Smaller than standard 960 (devices and browsers) */ -/* Tablet Portrait size to standard 960 (devices and browsers) */ -/* All Mobile Sizes (devices and browser) */ -/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ -/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ diff --git a/css/Ribs.min.css b/css/Ribs.min.css deleted file mode 100644 index db9ac77..0000000 --- a/css/Ribs.min.css +++ /dev/null @@ -1,2 +0,0 @@ -/* Ribs 1.0.2 30-05-2013 */ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.remove-bottom{margin-bottom:0}.half-bottom{margin-bottom:10px}.add-bottom{margin-bottom:20px}body{background:#fff;font:14px/21px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.container{position:relative;margin:0 auto;padding:0}.container .alpha{margin-left:0}.container .omega{margin-right:0}.column,.columns{float:left;margin-left:10px;margin-right:10px}.row{margin-bottom:20px}.container{width:960px}.container .one{width:40px}.container .two{width:100px}.container .three{width:160px}.container .four{width:220px}.container .five{width:280px}.container .six{width:340px}.container .seven{width:400px}.container .eight{width:460px}.container .nine{width:520px}.container .ten{width:580px}.container .eleven{width:640px}.container .twelve{width:700px}.container .thirteen{width:760px}.container .fourteen{width:820px}.container .fifteen{width:880px}.container .sixteen{width:940px}.container .one-third{width:300px}.container .two-thirds{width:620px}.container .one-half{width:460px}.container .one-quarter{width:220px}.container .three-quarters{width:700px}.container .offset-by-one{padding-left:60px}.container .offset-by-two{padding-left:120px}.container .offset-by-three{padding-left:180px}.container .offset-by-four{padding-left:240px}.container .offset-by-five{padding-left:300px}.container .offset-by-six{padding-left:360px}.container .offset-by-seven{padding-left:420px}.container .offset-by-eight{padding-left:480px}.container .offset-by-nine{padding-left:540px}.container .offset-by-ten{padding-left:600px}.container .offset-by-eleven{padding-left:660px}.container .offset-by-twelve{padding-left:720px}.container .offset-by-thirteen{padding-left:780px}.container .offset-by-fourteen{padding-left:840px}.container .offset-by-fifteen{padding-left:900px}@media only screen and (max-width:959px){.container{width:768px}.container .one{width:28px}.container .two{width:76px}.container .three{width:124px}.container .four{width:172px}.container .five{width:220px}.container .six{width:268px}.container .seven{width:316px}.container .eight{width:364px}.container .nine{width:412px}.container .ten{width:460px}.container .eleven{width:508px}.container .twelve{width:556px}.container .thirteen{width:604px}.container .fourteen{width:652px}.container .fifteen{width:700px}.container .sixteen{width:748px}.container .one-third{width:236px}.container .two-thirds{width:492px}.container .one-half{width:364px}.container .one-quarter{width:172px}.container .three-quarters{width:556px}.container .offset-by-one{padding-left:48px}.container .offset-by-two{padding-left:96px}.container .offset-by-three{padding-left:144px}.container .offset-by-four{padding-left:192px}.container .offset-by-five{padding-left:240px}.container .offset-by-six{padding-left:288px}.container .offset-by-seven{padding-left:336px}.container .offset-by-eight{padding-left:384px}.container .offset-by-nine{padding-left:432px}.container .offset-by-ten{padding-left:480px}.container .offset-by-eleven{padding-left:528px}.container .offset-by-twelve{padding-left:576px}.container .offset-by-thirteen{padding-left:624px}.container .offset-by-fourteen{padding-left:672px}.container .offset-by-fifteen{padding-left:720px}.container{width:768px}.container .alpha{margin-right:10px}.container .omega{margin-left:10px}.alpha-omega{margin-right:0;margin-left:0}}@media only screen and (max-width:767px){.container{width:90%}.container .one,.container .two,.container .three,.container .four,.container .five,.container .six,.container .seven,.container .eight,.container .nine,.container .ten,.container .eleven,.container .twelve,.container .thirteen,.container .fourteen,.container .fifteen,.container .sixteen,.container .one-third,.container .two-thirds,.container .one-half,.container .one-quarter,.container .three-quarters{width:100%}.container .column,.container .columns{margin:0}.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen{padding-left:0}}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after,.clearfix:after{clear:both}.row,.clearfix{zoom:1}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:46px;line-height:69px;margin:0 0 14px}h2{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:35px;line-height:52.5px;margin:0 0 10px}h3{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:28px;line-height:42px;margin:0 0 8px}h4{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:21px;line-height:31.5px;margin:0 0 4px}h5{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:17px;line-height:25.5px}h6{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:14px;line-height:21px}.subheader{color:#777}p{margin:0 0 20px;line-height:21px}p img{margin:0}.lead{font-size:21px;line-height:31.5px;color:#777}em{font-style:italic}strong{font-weight:700;color:#333}small{font-size:80%}blockquote,blockquote p{font-size:17px;line-height:24px;color:#777;font-style:italic}blockquote{margin:0 0 20px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:12px;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited,blockquote cite a:visited{color:#555}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0}a,a:visited{color:#333;text-decoration:underline}a:hover,a:focus{color:#000;text-decoration:none;outline:0}p a,p a:visited{line-height:inherit}ul,ol{margin:0 0 20px}ul{list-style:none outside}ol{list-style:decimal}ol,ul.square,ul.circle,ul.disc{margin:0 0 0 30px}ul.square{list-style:square outside}ul.circle{list-style:circle outside}ul.disc{list-style:disc outside}ul ul,ul ol,ol ol,ol ul{margin:4px 0 5px 30px;font-size:90%}li{line-height:18px;margin:0 0 12px}.large li{line-height:21px}li p{line-height:21px}.button,button,input[type=submit],input[type=reset],input[type=button]{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #aaa;border-top:1px solid #ccc;border-left:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#444;display:inline-block;font-size:11px;font-weight:700;text-decoration:none;text-shadow:0 1px rgba(255,255,255,.75);cursor:pointer;margin:0 0 20px;line-height:normal;padding:8px 10px;font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif}.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{background-color:#ccc;background-color:rgba(153,153,153,.3);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(0,0,0,.3)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.3));background-repeat:repeat-x;color:#222;border:1px solid #888;border-top:1px solid #aaa;border-left:1px solid #aaa}.button:active,button:active,input[type=submit]:active,input[type=reset]:active,input[type=button]:active{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #666}.button .full-width,button.full-width,input[type=submit].full-width,input[type=reset].full-width,input[type=button].full-width{width:100%;padding-left:0;padding-right:0;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin:0 0 20px}fieldset{margin:0 0 20px}input[type=search],input[type=url]{-webkit-appearance:textfield;-moz-appearance:textfield}input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],input[type=tel],textarea,select{border:1px solid #ccc;padding:6px 4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font:13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;width:210px;max-width:100%;display:block;margin:0 0 20px;background:#fff}select{padding:0}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,input[type=tel]:focus,textarea:focus{border:1px solid #aaa;color:#444;outline:0;-moz-box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2)}textarea{min-height:60px}label,legend{display:block;font-weight:700;font-size:13px}select{width:220px}input[type=checkbox]{display:inline}label span,legend span{font-weight:400;font-size:13px;color:#444}.scale-with-grid{max-width:100%;height:auto} \ No newline at end of file diff --git a/package.json b/package.json index c6dcb62..5c7557d 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "Ribs", "title": "Ribs", "description": "The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.", - "version": "1.0.3", + "version": "1.0.7", "homepage": "https://github.com/nickpack/Ribs", "author": { "name": "Nick Pack", @@ -27,7 +27,7 @@ }, "main": "./index", "keywords": [ - "static", "skeleton", "ribs" + "static", "skeleton", "ribs", "css", "scss" ], "devDependencies": { "grunt": "~0.4.1", @@ -36,4 +36,4 @@ "grunt-contrib-csslint": "~0.1.1", "grunt-contrib-cssmin": "~0.5.0" } -} \ No newline at end of file +} diff --git a/scss/_images.scss b/scss/_images.scss deleted file mode 100644 index 32e7ab9..0000000 --- a/scss/_images.scss +++ /dev/null @@ -1,7 +0,0 @@ -/* #Images -================================================== */ - -.scale-with-grid { - max-width: 100%; - height: auto; -} \ No newline at end of file diff --git a/scss/_reset.scss b/scss/_reset.scss deleted file mode 100644 index 634d47e..0000000 --- a/scss/_reset.scss +++ /dev/null @@ -1,51 +0,0 @@ -/* #Reset & Basics (Inspired by E. Meyers) -================================================== */ -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -/* #Misc -================================================== */ -.remove-bottom { - margin-bottom: 0; -} - -.half-bottom { - margin-bottom: 10px; -} - -.add-bottom { - margin-bottom: 20px; -} \ No newline at end of file diff --git a/scss/Ribs.scss b/src/scss/Ribs.scss similarity index 52% rename from scss/Ribs.scss rename to src/scss/Ribs.scss index 4a868dc..9e3c352 100644 --- a/scss/Ribs.scss +++ b/src/scss/Ribs.scss @@ -1,19 +1,16 @@ /* -* Ribs V1.0.2 +* Ribs * Skeleton is Copyright 2011, Dave Gamache * * Ribs is the evolution of Skeleton by Nick Pack * Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 28/05/2013 +* http://github.com/nickpack/Ribs */ @import "_variables"; -@import "_reset"; +@import "normalize/_normalize"; @import "_mixins"; -/* #Basic Styles -================================================== */ body { background: #fff; font: 14px/21px $body_font_family; @@ -22,27 +19,33 @@ body { -ms-text-size-adjust: 100%; } +hr { + border: $hr_border; + border-width: $hr_border_width; + clear: both; + margin: $hr_margin; + height: 0; +} + @import "_grid"; @import "_typography"; @import "_links"; @import "_lists"; @import "_forms"; @import "_images"; +@import "_tables"; -/* #Example Media Queries -================================================== */ - -/* Smaller than standard 960 (devices and browsers) */ +// Smaller than standard 960 (devices and browsers) @media only screen and (max-width: 959px) {} -/* Tablet Portrait size to standard 960 (devices and browsers) */ +// Tablet Portrait size to standard 960 (devices and browsers) @media only screen and (min-width: 768px) and (max-width: 959px) {} -/* All Mobile Sizes (devices and browser) */ +// All Mobile Sizes (devices and browser) @media only screen and (max-width: 767px) {} -/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ +// Mobile Landscape Size to Tablet Portrait (devices and browsers) @media only screen and (min-width: 480px) and (max-width: 767px) {} -/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ +// Mobile Portrait Size to Mobile Landscape Size (devices and browsers) @media only screen and (max-width: 479px) {} \ No newline at end of file diff --git a/scss/_forms.scss b/src/scss/_forms.scss similarity index 81% rename from scss/_forms.scss rename to src/scss/_forms.scss index ee9f7c8..12ef76c 100644 --- a/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -1,5 +1,5 @@ -/* #Buttons -================================================== */ +// #Buttons +// ================================================== .button, button, input[type="submit"], @@ -51,15 +51,15 @@ input[type="button"].full-width { text-align: center; } -/* Fix for odd Mozilla border & padding issues */ +// Fix for odd Mozilla border & padding issues button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } -/* #Forms -================================================== */ +// #Forms +// ================================================== form { margin: $form_fieldset_margin; @@ -86,18 +86,19 @@ textarea, select { border: $form_input_border; padding: $form_input_padding; - @include border-radius(2px); + @include border-radius($form_input_border_radius); font: $form_input_font_size $form_element_font; color: $form_input_text_colour; width: $form_input_width; - max-width: 100%; + max-width: $form_input_max_width; display: block; margin: $form_input_margin; background: $form_input_background; } select { - padding: 0; + padding: $form_input_select_padding; + width: $form_input_select_width; } input[type="text"]:focus, @@ -110,12 +111,12 @@ input[type="tel"]:focus, textarea:focus { border: $form_input_focus_border; color: $form_input_focus_text_colour; - outline: none; - @include box-shadow(0, 0, 3px, rgba(0, 0, 0, .2)) + outline: $form_input_focus_outline; + @include box-shadow($form_input_focus_box_shadow_x, $form_input_focus_box_shadow_y, $form_input_focus_box_shadow_blur, $form_input_focus_box_shadow_colour) } textarea { - min-height: 60px; + min-height: $form_textarea_min_height; } label, @@ -125,17 +126,13 @@ legend { font-size: $legend_font_size; } -select { - width: $form_input_select_width; -} - input[type="checkbox"] { - display: inline; + display: $form_input_checkbox_display; } label span, legend span { - font-weight: normal; + font-weight: $form_label_legend_font_weight; font-size: $form_input_font_size; color: $form_label_legend_colour; } \ No newline at end of file diff --git a/scss/_grid.scss b/src/scss/_grid.scss similarity index 70% rename from scss/_grid.scss rename to src/scss/_grid.scss index 85b89e3..6b3dd85 100644 --- a/scss/_grid.scss +++ b/src/scss/_grid.scss @@ -2,8 +2,12 @@ position: relative; margin: 0 auto; padding: 0; - & .alpha { margin-left: 0; } - & .omega { margin-right: 0; } + & .alpha { + margin-left: 0; + } + & .omega { + margin-right: 0; + } } .column, .columns { @@ -12,7 +16,14 @@ margin-right: $gutter/2; } -.row { margin-bottom: $gutter; } +.alpha-omega { + margin-right: 0; + margin-left: 0; +} + +.row { + margin-bottom: $gutter; +} @include grid($desktop-container-width, $column-count, $gutter); @@ -23,13 +34,13 @@ .container { width: $tablet-container-width; - & .alpha { margin-right: 10px; } - & .omega { margin-left: 10px; } + & .alpha { + margin-right: 10px; + } + & .omega { + margin-left: 10px; + } } - - .alpha-omega { - margin-right: 0; - margin-left: 0; } } //-------------------------------------------------------------------- // #Mobile @@ -81,14 +92,19 @@ } } -/* #Clearing -================================================== */ +// #Clearing +// ================================================== -/* Self Clearing Goodness */ -.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } +.container:after { + content: "\0020"; + display: block; + height: 0; + clear: both; + visibility: hidden; +} -/* Use clearfix class on parent to clear nested columns, -or wrap each row of columns in a
*/ +// Use clearfix class on parent to clear nested columns, +// or wrap each row of columns in a
.clearfix:before, .clearfix:after, .row:before, @@ -98,15 +114,19 @@ or wrap each row of columns in a
*/ overflow: hidden; visibility: hidden; width: 0; - height: 0; } - .row:after, - .clearfix:after { - clear: both; } - .row, - .clearfix { - zoom: 1; } + height: 0; +} -/* You can also use a
to clear columns */ +.row:after, +.clearfix:after { + clear: both; +} + +.row, .clearfix { + zoom: 1; +} + +// You can also use a
to clear columns .clear { clear: both; display: block; diff --git a/src/scss/_images.scss b/src/scss/_images.scss new file mode 100644 index 0000000..af1e6d7 --- /dev/null +++ b/src/scss/_images.scss @@ -0,0 +1,7 @@ +// #Images +// ================================================== + +.scale-with-grid { + max-width: 100%; + height: auto; +} \ No newline at end of file diff --git a/scss/_links.scss b/src/scss/_links.scss similarity index 78% rename from scss/_links.scss rename to src/scss/_links.scss index af7b65d..bf5b643 100644 --- a/scss/_links.scss +++ b/src/scss/_links.scss @@ -1,5 +1,5 @@ -/* #Links -================================================== */ +// #Links +// ================================================== a, a:visited { color: $link_colour; text-decoration: $link_decoration; diff --git a/scss/_lists.scss b/src/scss/_lists.scss similarity index 72% rename from scss/_lists.scss rename to src/scss/_lists.scss index c51c2da..96b5546 100644 --- a/scss/_lists.scss +++ b/src/scss/_lists.scss @@ -1,5 +1,5 @@ -/* #Lists -================================================== */ +// #Lists +// ================================================== ul, ol { margin: $list_margin; } @@ -17,15 +17,15 @@ ol, ul.square, ul.circle, ul.disc { } ul.square { - list-style: square outside; + list-style: square $list_styled_position; } ul.circle { - list-style: circle outside; + list-style: circle $list_styled_position; } ul.disc { - list-style: disc outside; + list-style: disc $list_styled_position; } ul ul, ul ol, diff --git a/scss/_mixins.scss b/src/scss/_mixins.scss similarity index 75% rename from scss/_mixins.scss rename to src/scss/_mixins.scss index cb929ca..2b0142b 100644 --- a/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -112,7 +112,7 @@ @mixin box-shadow($a, $b, $c, $colour) { -moz-box-shadow: $a $b $c $colour; -webkit-box-shadow: $a $b $c $colour; - box-shadow: $a $b $c $colour; + box-shadow: $a $b $c $colour; } @mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) { @@ -142,10 +142,9 @@ .two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; } .one-half { width: ($grid-container-width/2) - $grid-gutter; } .one-quarter { width: ($grid-container-width/4) - $grid-gutter; } - .three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;} + .three-quarters { width: (($grid-container-width/4)*3) - $grid-gutter; } - - .offset-by-one { padding-left: $grid-column-width; } + .offset-by-one { padding-left: $grid-column-width; } .offset-by-two { padding-left: $grid-column-width*2; } .offset-by-three { padding-left: $grid-column-width*3; } .offset-by-four { padding-left: $grid-column-width*4; } @@ -160,6 +159,38 @@ .offset-by-thirteen { padding-left: $grid-column-width*13; } .offset-by-fourteen { padding-left: $grid-column-width*14; } .offset-by-fifteen { padding-left: $grid-column-width*15; } + + .pull-by-one { left: -$grid-column-width; } + .pull-by-two { left: -$grid-column-width*2; } + .pull-by-three { left: -$grid-column-width*3; } + .pull-by-four { left: -$grid-column-width*4; } + .pull-by-five { left: -$grid-column-width*5; } + .pull-by-six { left: -$grid-column-width*6; } + .pull-by-seven { left: -$grid-column-width*7; } + .pull-by-eight { left: -$grid-column-width*8; } + .pull-by-nine { left: -$grid-column-width*9; } + .pull-by-ten { left: -$grid-column-width*10; } + .pull-by-eleven { left: -$grid-column-width*11; } + .pull-by-twelve { left: -$grid-column-width*12; } + .pull-by-thirteen { left: -$grid-column-width*13; } + .pull-by-fourteen { left: -$grid-column-width*14; } + .pull-by-fifteen { left: -$grid-column-width*15; } + + .push-by-one { left: $grid-column-width; } + .push-by-two { left: $grid-column-width*2; } + .push-by-three { left: $grid-column-width*3; } + .push-by-four { left: $grid-column-width*4; } + .push-by-five { left: $grid-column-width*5; } + .push-by-six { left: $grid-column-width*6; } + .push-by-seven { left: $grid-column-width*7; } + .push-by-eight { left: $grid-column-width*8; } + .push-by-nine { left: $grid-column-width*9; } + .push-by-ten { left: $grid-column-width*10; } + .push-by-eleven { left: $grid-column-width*11; } + .push-by-twelve { left: $grid-column-width*12; } + .push-by-thirteen { left: $grid-column-width*13; } + .push-by-fourteen { left: $grid-column-width*14; } + .push-by-fifteen { left: $grid-column-width*15; } } } @@ -171,3 +202,13 @@ width: 0; height: 0; } + +@mixin visible { + display: block !important; + visibility: visible; +} + +@mixin hidden { + display: none !important; + visibility: hidden; +} \ No newline at end of file diff --git a/src/scss/_tables.scss b/src/scss/_tables.scss new file mode 100644 index 0000000..5774d85 --- /dev/null +++ b/src/scss/_tables.scss @@ -0,0 +1,143 @@ +// +// #Tables +// -------------------------------------------------- +// The majority of concepts here are shamelessly borrowed from Bootstrap and amended to fit +// https://raw.github.com/twitter/bootstrap/master/less/tables.less + +table { + max-width: 100%; + background: $table_background; + border-collapse: collapse; + border-spacing: 0; + width: 100%; + margin: $table_margin; + th, + td { + padding: $table_td_th_padding; + line-height: $table_td_th_line_height; + text-align: left; + vertical-align: top; + border-top: 1px solid $table_border_colour; + } + th { + font-weight: bold; + } + + thead th { + vertical-align: bottom; + } + + caption thead tr:first-child th, + caption thead tr:first-child td, + colgroup thead tr:first-child th, + colgroup thead tr:first-child td, + thead:first-child tr:first-child th, + thead:first-child tr:first-child td { + border-top: 0; + } + + tbody tbody { + border-top: 2px solid $table_border_colour; + } + + table { + background: $table_background; + } +} + +.table-condensed { + th, + td { + padding: $table_condensed_padding; + } +} + +.table-bordered { + border: 1px solid $table_border_colour; + border-collapse: separate; + border-left: 0; + @include border-radius($table_border_radius); + th, + td { + border-left: 1px solid $table_border_colour; + } + + caption thead tr:first-child th, + caption tbody tr:first-child th, + caption tbody tr:first-child td, + colgroup thead tr:first-child th, + colgroup tbody tr:first-child th, + colgroup tbody tr:first-child td, + thead:first-child tr:first-child th, + tbody:first-child tr:first-child th, + tbody:first-child tr:first-child td { + border-top: 0; + } + + thead:first-child tr:first-child > th:first-child, + tbody:first-child tr:first-child > td:first-child, + tbody:first-child tr:first-child > th:first-child { + @include border-top-left-radius($table_border_radius); + } + + thead:first-child tr:first-child > th:last-child, + tbody:first-child tr:first-child > td:last-child, + tbody:first-child tr:first-child > th:last-child { + @include border-top-right-radius($table_border_radius); + } + + thead:last-child tr:last-child > th:first-child, + tbody:last-child tr:last-child > td:first-child, + tbody:last-child tr:last-child > th:first-child, + tfoot:last-child tr:last-child > td:first-child, + tfoot:last-child tr:last-child > th:first-child { + @include border-bottom-left-radius($table_border_radius); + } + + thead:last-child tr:last-child > th:last-child, + tbody:last-child tr:last-child > td:last-child, + tbody:last-child tr:last-child > th:last-child, + tfoot:last-child tr:last-child > td:last-child, + tfoot:last-child tr:last-child > th:last-child { + @include border-bottom-right-radius($table_border_radius); + } + + tfoot tbody:last-child tr:last-child td:first-child { + @include border-bottom-left-radius(0); + } + tfoot tbody:last-child tr:last-child td:last-child { + @include border-bottom-right-radius(0); + } + + caption thead tr:first-child th:first-child, + caption tbody tr:first-child td:first-child, + colgroup thead tr:first-child th:first-child, + colgroup tbody tr:first-child td:first-child { + @include border-top-left-radius($table_border_radius); + } + caption thead tr:first-child th:last-child, + caption tbody tr:first-child td:last-child, + colgroup thead tr:first-child th:last-child, + colgroup tbody tr:first-child td:last-child { + @include border-top-right-radius($table_border_radius); + } + +} + +.table-striped { + tbody { + > tr:nth-child(odd) > td, + > tr:nth-child(odd) > th { + background-color: $table_alt_colour; + } + } +} + +.table-hover { + tbody { + tr:hover > td, + tr:hover > th { + background-color: $table_hover_colour; + } + } +} diff --git a/scss/_typography.scss b/src/scss/_typography.scss similarity index 72% rename from scss/_typography.scss rename to src/scss/_typography.scss index 06a927f..da98c74 100644 --- a/scss/_typography.scss +++ b/src/scss/_typography.scss @@ -1,15 +1,5 @@ -/* #Typography -================================================== */ -/* @font-face { - font-family: 'FontName'; - src: url('../fonts/FontName.eot'); - src: url('../fonts/FontName.eot?iefix') format('eot'), - url('../fonts/FontName.woff') format('woff'), - url('../fonts/FontName.ttf') format('truetype'), - url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); - font-weight: normal; - font-style: normal; } -*/ +// #Typography +// ================================================== h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; @@ -87,7 +77,7 @@ p img { } em { - font-style: italic; + font-style: $em_font_style; } strong { @@ -96,15 +86,14 @@ strong { } small { - font-size: 80%; + font-size: $small_font_size; } -/* Blockquotes */ blockquote, blockquote p { - font-size: 17px; - line-height: 24px; + font-size: $blockquote_font_size; + line-height: $blockquote_line_height; color: $blockquote_colour; - font-style: italic; + font-style: $blockquote_font_style; } blockquote { @@ -125,13 +114,4 @@ blockquote cite:before { blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: $blockquote_cite_link_colour; -} - -/* not really typographical, but I couldnt find anywhere else to put it */ -hr { - border: $hr_border; - border-width: $hr_border_width; - clear: both; - margin: $hr_margin; - height: 0; } \ No newline at end of file diff --git a/scss/_variables.scss b/src/scss/_variables.scss similarity index 78% rename from scss/_variables.scss rename to src/scss/_variables.scss index 3cb2723..82fb935 100644 --- a/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -34,19 +34,33 @@ $form_input_text_colour: #777; $form_input_background: #fff; $form_input_padding: 6px 4px; $form_input_width: 210px; +$form_input_max_width: 100%; $form_input_select_width: 220px; $form_input_margin: 0 0 20px 0; $form_input_font_size: 13px; +$form_input_border_radius: 2px; + +$form_input_checkbox_display: inline; $form_input_focus_border: 1px solid #aaa; $form_input_focus_text_colour: #444; +$form_input_focus_outline: none; +$form_input_focus_box_shadow_x: 0; +$form_input_focus_box_shadow_y: 0; +$form_input_focus_box_shadow_blur: 3px; +$form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2); + +$form_input_select_padding: 10px; $form_label_legend_colour: #444; +$form_label_legend_font_weight: normal; $form_fieldset_margin: 0 0 20px 0; $legend_font_weight: bold; $legend_font_size: $form_input_font_size; +$form_textarea_min_height: 60px; + $link_colour: #333; $link_decoration: underline; $link_outline: 0; @@ -89,6 +103,10 @@ $paragraph_lead_font_size: 21px; $paragraph_lead_line_height: $paragraph_lead_font_size * 1.5; $paragraph_lead_colour: #777; +$em_font_style: italic; + +$small_font_size: 80%; + $strong_colour: #333; $blockquote_colour: #777; @@ -98,6 +116,9 @@ $blockquote_cite_link_colour: #555; $blockquote_cite_font_size: 12px; $blockquote_margin: 0 0 20px; $blockquote_padding: 9px 20px 0 19px; +$blockquote_font_size: 17px; +$blockquote_line_height: 24px; +$blockquote_font_style: italic; $hr_border: solid #ddd; $hr_border_width: 1px 0 0; @@ -111,7 +132,8 @@ $list_large_line_height: 21px; $ul_list_style: none outside; $ol_list_style: decimal; -$list_styled_margin: 0 0 0 30px; /* ul, ol with disc, square etc. */ +$list_styled_margin: 0 0 0 10px; // ul, ol with disc, square etc. +$list_styled_position: outside; // List item bullet position $nested_list_margin: 4px 0 5px 30px; $nested_list_font_size: 90%; @@ -122,3 +144,14 @@ $list_item_paragraph_line_height: 21px; $fallback_hex_gradient_bg: #CCC; +$table_background: #FFF; +$table_margin: 10px 0; +$table_td_th_padding: 8px; +$table_td_th_line_height: 21px; +$table_border_colour: #CCC; +$table_border_radius: 3px; +$table_alt_colour: #EFEFEF; +$table_hover_colour: #999; +$table_condensed_padding: 4px 5px; + + diff --git a/src/scss/normalize/LICENSE.md b/src/scss/normalize/LICENSE.md new file mode 100644 index 0000000..c6bcc9b --- /dev/null +++ b/src/scss/normalize/LICENSE.md @@ -0,0 +1,19 @@ +Copyright (c) Nicolas Gallagher and Jonathan Neal + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/src/scss/normalize/README.md b/src/scss/normalize/README.md new file mode 100644 index 0000000..2734827 --- /dev/null +++ b/src/scss/normalize/README.md @@ -0,0 +1,54 @@ +# normalize.css v2 + +Normalize.css is a customisable CSS file that makes browsers render all +elements more consistently and in line with modern standards. + +The project relies on researching the differences between default browser +styles in order to precisely target only the styles that need or benefit from +normalizing. + +[Check out the demo](http://necolas.github.io/normalize.css/latest/test.html) + +## Install + +Download from the [project page](http://necolas.github.io/normalize.css/). + +Install with [Bower](http://bower.io/): `bower install --save normalize-css` + +Install with [Component(1)](http://component.io/): `component install necolas/normalize.css` + +## What does it do? + +* Preserves useful defaults, unlike many CSS resets. +* Normalizes styles for a wide range of elements. +* Corrects bugs and common browser inconsistencies. +* Improves usability with subtle improvements. +* Explains what code does using detailed comments. + +## How to use it + +No other styles should come before Normalize.css. + +It is recommended that you include the `normalize.css` file as untouched +library code. + +## Browser support + +* Google Chrome +* Mozilla Firefox 4+ +* Apple Safari 5+ +* Opera 12+ +* Internet Explorer 8+ + +[Normalize.css v1 provides legacy browser +support](https://github.com/necolas/normalize.css/tree/v1) (IE 6+, Safari 4+), +but is no longer actively developed. + +## Contributing + +Please read the CONTRIBUTING.md + +## Acknowledgements + +Normalize.css is a project by [Nicolas Gallagher](https://github.com/necolas), +co-created with [Jonathan Neal](https://github.com/jonathantneal). diff --git a/src/scss/normalize/_normalize.scss b/src/scss/normalize/_normalize.scss new file mode 100644 index 0000000..c2de8df --- /dev/null +++ b/src/scss/normalize/_normalize.scss @@ -0,0 +1,406 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +}