diff --git a/Gruntfile.js b/Gruntfile.js index 319d567..8b746ee 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -20,6 +20,15 @@ module.exports = function(grunt) { }, brutal: { src: ['build/css/Ribs.css'] + }, + npci: { + options: { + absoluteFilePathsForFormatters: true, + formatters: [ + { id: 'lint-xml', dest: 'build/csslint.xml' } + ] + }, + src: ['build/css/Ribs.css'] } }, cssmin: { @@ -63,6 +72,7 @@ module.exports = function(grunt) { grunt.registerTask('docs', ['sass', 'styleguide']); grunt.registerTask('test', ['sass', 'csslint:scssoutput']); grunt.registerTask('minify', ['cssmin']); + grunt.registerTask('npci', ['sass', 'csslint:npci']); grunt.registerTask('default', ['sass', 'cssmin']); }; diff --git a/README.md b/README.md index 8b024e0..696488d 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Ribs v1.0.11 +Ribs v1.0.12 ============= > 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. @@ -50,6 +50,7 @@ Then following that, from the root dir of this project, run `npm install` which You should be good to go. ## Changelog +* Mar 9, 2014 - (v1.0.12) Added modified version of @davidnormo's font-face mixin PR * Oct 17, 2013 - (v1.0.11) Renamed component.json to bower.json due to deprecation * Oct 15, 2013 - (v1.0.10) Resolved some issues with the grid system (Switched to margins for push/pull and removed tablet specific alpha and omega classes), Added a couple of example files. * Oct 15, 2013 - (v1.0.9) Default flag added to variables - Thanks to Ivo Bathke (@ivoba) diff --git a/bower.json b/bower.json index 811ceb5..0e27bc5 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "Ribs", - "version": "1.0.11", + "version": "1.0.12", "main": "build/css/Ribs.css", "ignore": [ "**/.*", diff --git a/build/css/Ribs.css b/build/css/Ribs.css index e2c8ff2..f8a5ce7 100644 --- a/build/css/Ribs.css +++ b/build/css/Ribs.css @@ -347,6 +347,10 @@ table { border-collapse: collapse; border-spacing: 0; } +/* +EXAMPLE - Declare Open Sans font-face (Remember to add the font files to $font_path) +@include declare-font-face("Open Sans", "opensans-regular-webfont"); +*/ body { background: #fff; font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/docs/index.html b/docs/index.html index c5610b3..d3e1180 100644 --- a/docs/index.html +++ b/docs/index.html @@ -31,11 +31,13 @@

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 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)

+

There are 4 main tasks added:

+

To get started with the grunt tools

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.

diff --git a/docs/normalize-normalize.html b/docs/normalize-normalize.html index d22b6d3..d40e1ff 100644 --- a/docs/normalize-normalize.html +++ b/docs/normalize-normalize.html @@ -2,16 +2,24 @@

! normalize.css v2.1.3 | MIT License | git.io/normalize

==========================================================================

HTML5 display definitions

-

- 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.

+

*

+
    +
  • 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,
@@ -46,12 +54,22 @@ audio:not([controls]) {
 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.

-

- Remove default margin.

+

*

+
    +
    • +
    1. Set default font family to sans-serif.
      2. +
    +
    • +
    • +
    1. Prevent iOS text size adjust after orientation change, without disabling
      2. +
    +
    • +
  • user zoom.
    • +
+

*

+
    +
  • Remove default margin.
    • +

==========================================================================

html {
     font-family: sans-serif; /* 1 */
@@ -63,12 +81,18 @@ template {
 body {
     margin: 0;
 }

Typography

-

- 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.

+

*

+
    +
  • 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;
@@ -182,10 +228,14 @@ sup {
 sub {
     bottom: -0.25em;
 }

Embedded content

-

- Remove border when inside a element in IE 8/9.

-

- Correct overflow displayed oddly in IE 9.

+

*

+
    +
  • Remove border when inside a element in IE 8/9.
    • +
+

*

+
    +
  • Correct overflow displayed oddly in IE 9.
    • +

==========================================================================

img {
     border: 0;
@@ -195,52 +245,120 @@ sub {
 svg:not(:root) {
     overflow: hidden;
 }

Figures

-

- Address margin not present in IE 8/9 and Safari 5.

+

*

+
    +
  • Address margin not present in IE 8/9 and Safari 5.
    • +

==========================================================================

figure {
     margin: 0;
 }

Forms

-

- 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.

+

*

+
    +
  • Define consistent border, margin, and padding.
    • +
+

*

+
    +
    • +
    1. Correct color not being inherited in IE 8/9.
      2. +
    +
    • +
    • +
    1. Remove padding so people aren't caught out if they zero out fieldsets.
      2. +
    +
    • +
+

*

+
    +
    • +
    1. Correct font family not being inherited in all browsers.
      2. +
    +
    • +
    • +
    1. Correct font size not being inherited in all browsers.
      2. +
    +
    • +
    • +
    1. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
      2. +
    +
    • +
+

*

+
    +
  • 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
      2. +
    +
    • +
  • and video controls.
    • +
    • +
    1. Correct inability to style clickable input types in iOS.
      2. +
    +
    • +
    • +
    1. Improve usability and consistency of cursor style between image-type
      2. +
    +
    • +
  • input and others.
    • +
+

*

+
    +
  • Re-set default cursor for disabled elements.
    • +
+

*

+
    +
    • +
    1. Address box sizing set to content-box in IE 8/9/10.
      2. +
    +
    • +
    • +
    1. Remove excess padding in IE 8/9/10.
      2. +
    +
    • +
+

*

+
    +
    • +
    1. Address appearance set to searchfield in Safari 5 and Chrome.
      2. +
    +
    • +
    • +
    1. Address box-sizing set to border-box in Safari 5 and Chrome
      2. +
    +
    • +
  • (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. +
    +
    • +
    • +
    1. Improve readability and alignment in all browsers.
      2. +
    +
    • +

==========================================================================

fieldset {
     border: 1px solid #c0c0c0;
@@ -324,8 +442,10 @@ textarea {
     overflow: auto; /* 1 */
     vertical-align: top; /* 2 */
 }

Tables

-

- Remove most spacing between table cells.

+

*

+
    +
  • Remove most spacing between table cells.
    • +
table {
     border-collapse: collapse;
     border-spacing: 0;
diff --git a/package.json b/package.json
index 35a7fb8..f4609d0 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "Ribs",
   "title": "Ribs",
   "description": "The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "homepage": "https://github.com/nickpack/Ribs",
   "author": {
     "name": "Nick Pack",
@@ -33,7 +33,7 @@
     "grunt": "~0.4.1",
     "grunt-contrib-watch": "~0.3.1",
     "grunt-contrib-sass": "~0.3.0",
-    "grunt-contrib-csslint": "~0.1.1",
+    "grunt-contrib-csslint": "~0.1.2",
     "grunt-styleguide": "~0.2.6",
     "grunt-contrib-cssmin": "~0.5.0"
   }
diff --git a/src/scss/Ribs.scss b/src/scss/Ribs.scss
index 467a86f..1f668df 100644
--- a/src/scss/Ribs.scss
+++ b/src/scss/Ribs.scss
@@ -13,6 +13,11 @@
 @import "normalize/_normalize";
 @import "_mixins";
 
+/*
+EXAMPLE - Declare Open Sans font-face (Remember to add the font files to $font_path)
+@include declare-font-face("Open Sans", "opensans-regular-webfont");
+*/
+
 // #General body style
 body {
   background: #fff;
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 66eef2c..7e8fa2b 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -212,3 +212,19 @@
   display: none !important;
   visibility: hidden;
 }
+
+// @see http://pivotallabs.com/bulletproof-font-face-syntax-with-sass/
+// @see http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
+@mixin declare-font-face($font_family, $font_filename, $font_weight : normal, $font_style :normal, $font_stretch : normal, $font_path: $font_path) {
+   @font-face {
+      font-family: '#{$font_family}';
+      src: url('#{$font_path}#{$font_filename}.eot?#iefix') format('embedded-opentype'),
+           url('#{$font_path}#{$font_filename}.woff') format('woff'),
+           url('#{$font_path}#{$font_filename}.ttf') format('truetype'),
+           url('#{$font_path}#{$font_filename}.svg##{$font_family}') format('svg');
+
+      font-weight: $font-weight;
+      font-style: $font-style;
+      font-stretch: $font-stretch;
+   }
+}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index e0f758f..aaec0d4 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -123,6 +123,8 @@ $paragraph_lead_line_height: $paragraph_lead_font_size * 1.5 !default;
 $paragraph_lead_colour: #777 !default;
 
 // #General Text
+$font_path: "../fonts/";
+
 $em_font_style: italic !default;
 
 $small_font_size: 80% !default;