Ribs
+Copyright Information
+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
+diff --git a/Gruntfile.js b/Gruntfile.js index 5b8280c..319d567 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -35,16 +35,34 @@ module.exports = function(grunt) { watch: { files: 'src/scss/**/*', tasks: ['sass', 'csslint:scssoutput', 'cssmin'] - } + }, + styleguide: { + styledocco: { + options: { + framework: { + name: 'styledocco' + }, + name: '<%= pkg.name %>' + }, + template: { + include: 'build/css/Ribs.min.css' + }, + files: { + 'docs': 'src/scss/*.scss' + }, + } + }, }); grunt.loadNpmTasks('grunt-contrib-csslint'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); - + grunt.loadNpmTasks('grunt-styleguide'); + + grunt.registerTask('docs', ['sass', 'styleguide']); grunt.registerTask('test', ['sass', 'csslint:scssoutput']); grunt.registerTask('minify', ['cssmin']); grunt.registerTask('default', ['sass', 'cssmin']); -}; \ No newline at end of file +}; diff --git a/build/css/Ribs.css b/build/css/Ribs.css index d851c5a..a6b4a6e 100644 --- a/build/css/Ribs.css +++ b/build/css/Ribs.css @@ -1,10 +1,11 @@ /* -* 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 + #Ribs + ## Copyright Information + 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.3 | MIT License | git.io/normalize */ /* ========================================================================== @@ -360,6 +361,32 @@ hr { margin: 10px 0 30px; height: 0; } +/* +#Grid System + +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
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
+@import "_variables";
+@import "normalize/_normalize";
+@import "_mixins";
body {
+ background: #fff;
+ font: 14px/21px $body_font_family;
+ color: #444;
+ -webkit-text-size-adjust: 100%;
+ -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";
@media only screen and (max-width: 959px) {}
+
+@media only screen and (min-width: 768px) and (max-width: 959px) {}
+
+@media only screen and (max-width: 767px) {}
+
+@media only screen and (min-width: 480px) and (max-width: 767px) {}
+
+@media only screen and (max-width: 479px) {}
.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ @include vertical-gradient($form_button_gradient_start, $form_button_gradient_end);
+ @include button_border($form_button_border_rightbottom, $form_button_border_topleft);
+ @include border-radius($form_button_border_radius);
+ color: $form_button_text_colour;
+ display: inline-block;
+ font-size: $form_button_font_size;
+ font-weight: bold;
+ text-decoration: none;
+ text-shadow: $form_button_text_shadow;
+ cursor: pointer;
+ margin: $form_input_margin;
+ line-height: $form_button_line_height;
+ padding: $form_button_padding;
+ font-family: $form_element_font;
+}
+
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover {
+ @include vertical-gradient($form_button_hover_gradient_start, $form_button_hover_gradient_end);
+ color: $form_button_hover_text_colour;
+ @include button_border($form_button_hover_border_rightbottom, $form_button_hover_border_topleft);
+}
+
+.button:active,
+button:active,
+input[type="submit"]:active,
+input[type="reset"]:active,
+input[type="button"]:active {
+ @include vertical-gradient($form_button_active_gradient_start, $form_button_active_gradient_end);
+ border: $form_button_active_border;
+}
+
+.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;
+}
Applied to both form, and fieldset
+Make these behave as text fields
+Applied to all except checkboxes
+Padding and width applied from settings
+Applied to all except checkboxes and selects
+Alters font size, weight and colour based on variables
+form {
+ margin: $form_fieldset_margin;
+}
+
+fieldset {
+ margin: $form_fieldset_margin;
+}
+
+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: $form_input_border;
+ padding: $form_input_padding;
+ @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: $form_input_max_width;
+ display: block;
+ margin: $form_input_margin;
+ background: $form_input_background;
+}
+
+select {
+ padding: $form_input_select_padding;
+ width: $form_input_select_width;
+}
+
+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: $form_input_focus_border;
+ color: $form_input_focus_text_colour;
+ 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: $form_textarea_min_height;
+}
+
+label,
+legend {
+ display: block;
+ font-weight: $legend_font_weight;
+ font-size: $legend_font_size;
+}
+
+input[type="checkbox"] {
+ display: $form_input_checkbox_display;
+}
+
+label span,
+legend span {
+ font-weight: $form_label_legend_font_weight;
+ font-size: $form_input_font_size;
+ color: $form_label_legend_colour;
+}
.container {
+ position: relative;
+ margin: 0 auto;
+ padding: 0;
+ & .alpha {
+ margin-left: 0;
+ }
+ & .omega {
+ margin-right: 0;
+ }
+}
+
+.column, .columns {
+ float: left;
+ margin-left: $gutter/2;
+ margin-right: $gutter/2;
+}
+
+.alpha-omega {
+ margin-right: 0;
+ margin-left: 0;
+}
+
+.row {
+ margin-bottom: $gutter;
+}
@include grid($desktop-container-width, $column-count, $gutter);
@media only screen and (max-width: $tablet-max-breakpoint) {
+ @include grid($tablet-container-width, $column-count, $gutter);
+
+ .container {
+ width: $tablet-container-width;
+ & .alpha {
+ margin-right: 10px;
+ }
+ & .omega {
+ margin-left: 10px;
+ }
+ }
+}
@media only screen and (max-width: $mobile-max-breakpoint) {
+ .container {
+ width: $mobile-container-width;
+ & .one,
+ & .two,
+ & .three,
+ & .four,
+ & .five,
+ & .six,
+ & .seven,
+ & .eight,
+ & .nine,
+ & .ten,
+ & .eleven,
+ & .twelve,
+ & .thirteen,
+ & .fourteen,
+ & .fifteen,
+ & .sixteen,
+ & .one-third,
+ & .two-thirds,
+ & .one-half,
+ & .one-quarter,
+ & .three-quarters
+ { width: $mobile-column-width; }
+
+ .column, .columns {
+ margin: 0;
+ }
+
+ .offset-by-one,
+ .offset-by-two,
+ .offset-by-three,
+ .offset-by-four,
+ .offset-by-five,
+ .offset-by-six,
+ .offset-by-seven,
+ .offset-by-eight,
+ .offset-by-nine,
+ .offset-by-ten,
+ .offset-by-eleven,
+ .offset-by-twelve,
+ .offset-by-thirteen,
+ .offset-by-fourteen,
+ .offset-by-fifteen { padding-left: 0; }
+ }
+}
<div class="container">
+ This element has clearfix applied in browsers that support the :after css selector
+ </div>
<div class="clearfix">This haz clearfix</div>
+ Use this clearfix class on parent to clear nested columns, or:
+ wrap each row of columns in a <div class="row">...</div>
<div class="row">
+ This element has clearfix applied in browsers that support the :after css selector
+ </div>
You can also use a <br class="clear">
to clear columns
.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;
+}
.scale-with-grid {
+ max-width: 100%;
+ height: auto;
+}
++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.
+
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, 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.
+Either clone this repository and drop in manually, or install from bower:
+The project is set up to build and run csslint on Travis:
+ +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 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)
+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.
+Copyright (c) 2013 Nick Pack +Based on the original skeleton project which is Copyright 2011 Dave Gamache +Licensed under the MIT license.
+ +a, a:visited {
+ color: $link_colour;
+ text-decoration: $link_decoration;
+}
+
+a:hover, a:focus {
+ color: $link_hover_colour;
+ text-decoration: $link_hover_decoration;
+ outline: $link_outline;
+}
+
+p a, p a:visited {
+ line-height: inherit;
+}
ul, ol {
+ margin: $list_margin;
+}
+
+ul {
+ list-style: $ul_list_style;
+}
+
+ol {
+ list-style: $ol_list_style;
+}
+
+ol, ul.square, ul.circle, ul.disc {
+ margin: $list_styled_margin;
+}
+
+ul.square {
+ list-style: square $list_styled_position;
+}
+
+ul.circle {
+ list-style: circle $list_styled_position;
+}
+
+ul.disc {
+ list-style: disc $list_styled_position;
+}
+
+ul ul, ul ol,
+ol ol, ol ul {
+ margin: $nested_list_margin;
+ font-size: $nested_list_font_size;
+}
+
+li {
+ line-height: $list_item_line_height;
+ margin: $list_item_margin;
+}
+
+.large li {
+ line-height: $list_large_line_height;
+}
+
+li p {
+ line-height: $list_item_paragraph_line_height;
+}
@mixin button_border($rightbottom, $topleft) {
+ border: $rightbottom;
+ border-top: $topleft;
+ border-left: $topleft;
+}
+
+@mixin col-count($colCount, $colSpacing) {
+ -webkit-column-count: $colCount;
+ -webkit-column-gap: $colSpacing;
+ -moz-column-count: $colCount;
+ -moz-column-gap: $colSpacing;
+ column-count: $colCount;
+ column-gap: $colSpacing;
+}
+
+@mixin size($height, $width) {
+ height: $height;
+ width: $width;
+}
+
+@mixin square($size) {
+ @include size($size, $size);
+}
+
+@mixin border-radius($radius) {
+ -webkit-border-radius: $radius;
+ -moz-border-radius: $radius;
+ border-radius: $radius;
+}
+
+@mixin border-top-left-radius($radius) {
+ -webkit-border-top-left-radius: $radius;
+ -moz-border-radius-topleft: $radius;
+ border-top-left-radius: $radius;
+}
+
+@mixin border-top-right-radius($radius) {
+ -webkit-border-top-right-radius: $radius;
+ -moz-border-radius-topright: $radius;
+ border-top-right-radius: $radius;
+}
+
+@mixin border-bottom-right-radius($radius) {
+ -webkit-border-bottom-right-radius: $radius;
+ -moz-border-radius-bottomright: $radius;
+ border-bottom-right-radius: $radius;
+}
+
+@mixin border-bottom-left-radius($radius) {
+ -webkit-border-bottom-left-radius: $radius;
+ -moz-border-radius-bottomleft: $radius;
+ border-bottom-left-radius: $radius;
+}
+
+@mixin border-top-radius($radius) {
+ @include border-top-right-radius($radius);
+ @include border-top-left-radius($radius);
+}
+
+@mixin border-right-radius($radius) {
+ @include border-top-right-radius($radius);
+ @include border-bottom-right-radius($radius);
+}
+
+@mixin border-bottom-radius($radius) {
+ @include border-bottom-right-radius($radius);
+ @include border-bottom-left-radius($radius);
+}
+
+@mixin border-left-radius($radius) {
+ @include border-top-left-radius($radius);
+ @include border-bottom-left-radius($radius);
+}
+
+@mixin background-size($size){
+ -webkit-background-size: $size;
+ -moz-background-size: $size;
+ -o-background-size: $size;
+ background-size: $size;
+}
+
+@mixin box-sizing($boxsize) {
+ -webkit-box-sizing: $boxsize;
+ -moz-box-sizing: $boxsize;
+ -ms-box-sizing: $boxsize;
+ -o-box-sizing: $boxsize;
+ -khtml-box-sizing: $boxsize;
+ box-sizing: $boxsize;
+}
+
+@mixin horizontal-gradient($startColour, $endColour) {
+ background-color: $fallback_hex_gradient_bg;
+ background-image: linear-gradient(to right, $startColour, $endColour);
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColour), to($endColour));
+ background-image: -webkit-linear-gradient(left, $startColour, $endColour);
+ background-image: -moz-linear-gradient(left, $startColour, $endColour);
+ background-image: -o-linear-gradient(left, $startColour, $endColour);
+ background-repeat: repeat-x;
+}
+
+@mixin vertical-gradient($startColour, $endColour) {
+ background-color: $fallback_hex_gradient_bg;
+ background-color: mix($startColour, $endColour, 60%);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColour), to($endColour));
+ background-image: -webkit-linear-gradient(top, $startColour, $endColour);
+ background-image: -moz-linear-gradient(top, $startColour, $endColour);
+ background-image: -o-linear-gradient(top, $startColour, $endColour);
+ background-image: linear-gradient(to bottom, $startColour, $endColour);
+ background-repeat: repeat-x;
+}
+
+@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;
+}
+
+@mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) {
+
+ $grid-column-width: $grid-container-width/$grid-column-count;
+
+ .container {
+ width: $grid-container-width;
+
+ .one { width: (1*$grid-column-width - $grid-gutter); }
+ .two { width: (2*$grid-column-width - $grid-gutter); }
+ .three { width: (3*$grid-column-width - $grid-gutter); }
+ .four { width: (4*$grid-column-width - $grid-gutter); }
+ .five { width: (5*$grid-column-width - $grid-gutter); }
+ .six { width: (6*$grid-column-width - $grid-gutter); }
+ .seven { width: (7*$grid-column-width - $grid-gutter); }
+ .eight { width: (8*$grid-column-width - $grid-gutter); }
+ .nine { width: (9*$grid-column-width - $grid-gutter); }
+ .ten { width: (10*$grid-column-width - $grid-gutter); }
+ .eleven { width: (11*$grid-column-width - $grid-gutter); }
+ .twelve { width: (12*$grid-column-width - $grid-gutter); }
+ .thirteen { width: (13*$grid-column-width - $grid-gutter); }
+ .fourteen { width: (14*$grid-column-width - $grid-gutter); }
+ .fifteen { width: (15*$grid-column-width - $grid-gutter); }
+ .sixteen { width: (16*$grid-column-width - $grid-gutter); }
+ .one-third { width: ($grid-container-width/3) - $grid-gutter; }
+ .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; }
+
+ .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; }
+ .offset-by-five { padding-left: $grid-column-width*5; }
+ .offset-by-six { padding-left: $grid-column-width*6; }
+ .offset-by-seven { padding-left: $grid-column-width*7; }
+ .offset-by-eight { padding-left: $grid-column-width*8; }
+ .offset-by-nine { padding-left: $grid-column-width*9; }
+ .offset-by-ten { padding-left: $grid-column-width*10; }
+ .offset-by-eleven { padding-left: $grid-column-width*11; }
+ .offset-by-twelve { padding-left: $grid-column-width*12; }
+ .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; }
+ }
+}
+
+@mixin clearfix {
+ clear: both;
+ display: block;
+ overflow: hidden;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+}
+
+@mixin visible {
+ display: block !important;
+ visibility: visible;
+}
+
+@mixin hidden {
+ display: none !important;
+ visibility: hidden;
+}
+ Correct block
display not defined in IE 8/9.
+ Correct inline-block
display not defined in IE 8/9.
+ Prevent modern browsers from displaying audio
without controls.
+ * Remove excess height in iOS 5 devices.
+ Address [hidden]
styling not present in IE 8/9.
+ * Hide the template
element in IE, Safari, and Firefox < 22.
==========================================================================
+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;
+}
+ 1. Set default font family to sans-serif. + 2. Prevent iOS text size adjust after orientation change, without disabling + user zoom.
++ Remove default margin.
+==========================================================================
+html {
+ font-family: sans-serif; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+
+body {
+ margin: 0;
+}
+ Remove the gray background color from active links in IE 10.
+
+ Address outline
inconsistency between Chrome and other browsers.
+ Improve readability when focused and also mouse hovered in all browsers.
+==========================================================================
+a {
+ background: transparent;
+}
+
+
+a:focus {
+ outline: thin dotted;
+}
+
+
+a:active,
+a:hover {
+ outline: 0;
+}
+ Address variable h1
font-size and margin within section
and article
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ Address styling not present in IE 8/9, Safari 5, and Chrome.
+
+ Address style set to bolder
in Firefox 4+, Safari 5, and Chrome.
+ Address styling not present in Safari 5 and Chrome.
++ Address differences between Firefox and other browsers.
++ Address styling not present in IE 8/9.
++ Correct font family set oddly in Safari 5 and Chrome.
++ Improve readability of pre-formatted text in all browsers.
++ Set consistent quote types.
++ Address inconsistent and variable font size in all browsers.
+
+ Prevent sub
and sup
affecting line-height
in all browsers.
==========================================================================
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+
+b,
+strong {
+ font-weight: bold;
+}
+
+
+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: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+ Remove border when inside a
element in IE 8/9.
+ Correct overflow displayed oddly in IE 9.
+==========================================================================
+img {
+ border: 0;
+}
+
+
+svg:not(:root) {
+ overflow: hidden;
+}
+ Address margin not present in IE 8/9 and Safari 5.
+==========================================================================
+figure {
+ margin: 0;
+}
+ Define consistent border, margin, and padding.
+
+ 1. Correct color
not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ 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.
+
+ Address Firefox 4+ setting line-height
on input
using !important
in
+ * the UA stylesheet.
+ 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.
+ 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.
+ Re-set default cursor for disabled elements.
+
+ 1. Address box sizing set to content-box
in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ 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).
+ Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X.
++ Remove inner padding and border in Firefox 4+.
++ 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers.
+==========================================================================
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+
+legend {
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
+}
+
+
+button,
+input,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 2 */
+ margin: 0; /* 3 */
+}
+
+
+button,
+input {
+ line-height: normal;
+}
+
+
+button,
+select {
+ text-transform: none;
+}
+
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ 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; /* 1 */
+ vertical-align: top; /* 2 */
+}
table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
The majority of concepts here are shamelessly borrowed from Bootstrap and amended to fit + https://raw.github.com/twitter/bootstrap/master/less/tables.less
+# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
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;
+ }
+ }
+}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+ font-weight: inherit;
+}
+
+h1 {
+ color: $heading_colour;
+ font-family: $heading_font;
+ font-weight: $heading_font_weight;
+ font-size: $heading1_font_size;
+ line-height: $heading1_line_height;
+ margin: $heading1_margin;
+}
+
+h2 {
+ color: $heading_colour;
+ font-family: $heading_font;
+ font-weight: $heading_font_weight;
+ font-size: $heading2_font_size;
+ line-height: $heading2_line_height;
+ margin: $heading2_margin;
+}
+
+h3 {
+ color: $heading_colour;
+ font-family: $heading_font;
+ font-weight: $heading_font_weight;
+ font-size: $heading3_font_size;
+ line-height: $heading3_line_height;
+ margin: $heading3_margin;
+}
+
+h4 {
+ color: $heading_colour;
+ font-family: $heading_font;
+ font-weight: $heading_font_weight;
+ font-size: $heading4_font_size;
+ line-height: $heading4_line_height;
+ margin: $heading4_margin;
+}
+
+h5 {
+ color: $heading_colour;
+ font-family: $heading_font;
+ font-weight: $heading_font_weight;
+ font-size: $heading5_font_size;
+ line-height: $heading5_line_height;
+}
+
+h6 {
+ color: $heading_colour;
+ font-family: $heading_font;
+ font-weight: $heading_font_weight;
+ font-size: $heading6_font_size;
+ line-height: $heading6_line_height;
+}
+
+.subheader {
+ color: $subheader_colour;
+}
+
+p {
+ margin: $paragraph_margin;
+ line-height: $paragraph_line_height;
+}
+
+p img {
+ margin: $paragraph_image_margin;
+}
+
+.lead {
+ font-size: $paragraph_lead_font_size;
+ line-height: $paragraph_lead_line_height;
+ color: $paragraph_lead_colour;
+}
+
+em {
+ font-style: $em_font_style;
+}
+
+strong {
+ font-weight: bold;
+ color: $strong_colour;
+}
+
+small {
+ font-size: $small_font_size;
+}
+
+blockquote, blockquote p {
+ font-size: $blockquote_font_size;
+ line-height: $blockquote_line_height;
+ color: $blockquote_colour;
+ font-style: $blockquote_font_style;
+}
+
+blockquote {
+ margin: $blockquote_margin;
+ padding: $blockquote_padding;
+ border-left: $blockquote_border_left;
+}
+
+blockquote cite {
+ display: block;
+ font-size: $blockquote_cite_font_size;
+ color: $blockquote_cite_colour;
+}
+
+blockquote cite:before {
+ content: "\2014 \0020";
+}
+
+blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
+ color: $blockquote_cite_link_colour;
+}
$gutter: 20px;
+$column-count: 16;
+$desktop-container-width: 960px;
+$tablet-container-width: 768px;
+$mobile-container-width: 90%;
+$mobile-column-width: 100%;
+$base_font_size: 14px;
$tablet-max-breakpoint: $desktop-container-width - 1;
+$mobile-max-breakpoint: $tablet-container-width - 1;
$form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+$form_button_border_radius: 3px;
+$form_button_border_topleft: 1px solid #ccc;
+$form_button_border_rightbottom: 1px solid #aaa;
+$form_button_text_colour: #444;
+$form_button_text_shadow: 0 1px rgba(255, 255, 255, .75);
+$form_button_gradient_start: rgba(255, 255, 255, .2);
+$form_button_gradient_end: rgba(0, 0, 0, .2);
+$form_button_font_size: 11px;
+$form_button_padding: 8px 10px;
+$form_button_line_height: normal;
+
+$form_button_hover_border_topleft: 1px solid #aaa;
+$form_button_hover_border_rightbottom: 1px solid #888;
+$form_button_hover_gradient_start: rgba(255, 255, 255, .3);
+$form_button_hover_gradient_end: rgba(0, 0, 0, .3);
+$form_button_hover_text_colour: #222;
+
+$form_button_active_border: 1px solid #666;
+$form_button_active_gradient_start: rgba(255, 255, 255, .2);
+$form_button_active_gradient_end: rgba(0, 0, 0, .2);
+
+$form_input_border: 1px solid #ccc;
+$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;
+$link_hover_colour: #000;
+$link_hover_decoration: none;
$heading_font: "Georgia", "Times New Roman", serif;
+$heading_font_weight: normal;
+$heading_colour: #181818;
+
+$heading1_font_size: 46px;
+$heading1_line_height: $heading1_font_size * 1.5;
+$heading1_margin: 0 0 14px 0;
+
+$heading2_font_size: 35px;
+$heading2_line_height: $heading2_font_size * 1.5;
+$heading2_margin: 0 0 10px 0;
+
+$heading3_font_size: 28px;
+$heading3_line_height: $heading3_font_size * 1.5;
+$heading3_margin: 0 0 8px 0;
+
+$heading4_font_size: 21px;
+$heading4_line_height: $heading4_font_size * 1.5;
+$heading4_margin: 0 0 4px 0;
+
+$heading5_font_size: 17px;
+$heading5_line_height: $heading5_font_size * 1.5;
+
+$heading6_font_size: 14px;
+$heading6_line_height: $heading6_font_size * 1.5;
$subheader_colour: #777;
$paragraph_margin: 0 0 20px 0;
+$paragraph_image_margin: 0;
+$paragraph_line_height: $base_font_size * 1.5;
+
+$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;
+$blockquote_border_left: 1px solid #ddd;
+$blockquote_cite_colour: #555;
+$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;
+$hr_margin: 10px 0 30px;
$body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
$list_margin: 0 0 20px 0;
+$list_large_line_height: 21px;
+
+$ul_list_style: none outside;
+$ol_list_style: decimal;
+
+$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%;
+
+$list_item_line_height: 18px;
+$list_item_margin: 0 0 12px 0;
+$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;
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +
# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Nick | +Pack | +@nickpack | +