Merge branch 'release/1.0.7'
This commit is contained in:
Nick Pack
commit
ff617bf850
@ -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
|
||||
}
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,2 +1,2 @@
|
||||
.sass-cache/*
|
||||
.sass-cache
|
||||
node_modules
|
||||
0
.gitmodules
vendored
Normal file
0
.gitmodules
vendored
Normal file
17
Gruntfile.js
17
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']);
|
||||
|
||||
|
||||
33
README.md
33
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: [](https://travis-ci.org/nickpack/Ribs)
|
||||
Development: [](https://travis-ci.org/nickpack/Ribs)
|
||||
|
||||
* Master: [](https://travis-ci.org/nickpack/Ribs)
|
||||
* Development: [](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.
|
||||
|
||||
1125
build/css/Ribs.css
Normal file
1125
build/css/Ribs.css
Normal file
File diff suppressed because it is too large
Load Diff
2
build/css/Ribs.min.css
vendored
Normal file
2
build/css/Ribs.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -42,7 +42,7 @@
|
||||
<div class="container">
|
||||
<div class="sixteen columns">
|
||||
<h1 class="remove-bottom" style="margin-top: 40px">Ribs</h1>
|
||||
<h5>Version 1.0.3</h5>
|
||||
<h5>Version 1.0.5</h5>
|
||||
<hr />
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "Ribs",
|
||||
"version": "1.0.3",
|
||||
"version": "1.0.7",
|
||||
"main": "css/Ribs.css",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
|
||||
640
css/Ribs.css
640
css/Ribs.css
@ -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 <div class="row"> */
|
||||
.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 <br class="clear" /> 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) */
|
||||
2
css/Ribs.min.css
vendored
2
css/Ribs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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",
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
/* #Images
|
||||
================================================== */
|
||||
|
||||
.scale-with-grid {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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) {}
|
||||
@ -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;
|
||||
}
|
||||
@ -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 <div class="row"> */
|
||||
// Use clearfix class on parent to clear nested columns,
|
||||
// or wrap each row of columns in a <div class="row">
|
||||
.clearfix:before,
|
||||
.clearfix:after,
|
||||
.row:before,
|
||||
@ -98,15 +114,19 @@ or wrap each row of columns in a <div class="row"> */
|
||||
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 <br class="clear" /> to clear columns */
|
||||
.row:after,
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.row, .clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
// You can also use a <br class="clear" /> to clear columns
|
||||
.clear {
|
||||
clear: both;
|
||||
display: block;
|
||||
7
src/scss/_images.scss
Normal file
7
src/scss/_images.scss
Normal file
@ -0,0 +1,7 @@
|
||||
// #Images
|
||||
// ==================================================
|
||||
|
||||
.scale-with-grid {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
/* #Links
|
||||
================================================== */
|
||||
// #Links
|
||||
// ==================================================
|
||||
a, a:visited {
|
||||
color: $link_colour;
|
||||
text-decoration: $link_decoration;
|
||||
@ -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,
|
||||
@ -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;
|
||||
}
|
||||
143
src/scss/_tables.scss
Normal file
143
src/scss/_tables.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
@ -126,12 +115,3 @@ 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;
|
||||
}
|
||||
@ -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;
|
||||
|
||||
|
||||
19
src/scss/normalize/LICENSE.md
Normal file
19
src/scss/normalize/LICENSE.md
Normal file
@ -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.
|
||||
54
src/scss/normalize/README.md
Normal file
54
src/scss/normalize/README.md
Normal file
@ -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).
|
||||
406
src/scss/normalize/_normalize.scss
Normal file
406
src/scss/normalize/_normalize.scss
Normal file
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user