Merge branch 'release/1.0.12'

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']);
 
 };

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)

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "Ribs",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "main": "build/css/Ribs.css",
   "ignore": [
     "**/.*",

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;

docs/index.html

@@ -31,11 +31,13 @@
 </ul>
 <h2 id="building">Building</h2>
 <p>I&#39;ve added grunt configuration to the repository for those of you that use it.</p>
-<p>There are 4 main tasks added:
-<em> 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
-</em> 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!)
-<em> minify - This literally just runs cssmin, useful if you&#39;ve edited Ribs.css directly
-</em> 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)</p>
+<p>There are 4 main tasks added:</p>
+<ul>
+<li>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</li>
+<li>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!)</li>
+<li>minify - This literally just runs cssmin, useful if you&#39;ve edited Ribs.css directly</li>
+<li>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)</li>
+</ul>
 <h3 id="to-get-started-with-the-grunt-tools">To get started with the grunt tools</h3>
 <p>You need to install grunt-cli globally (<code>npm install -g grunt-cli</code>) to start with, otherwise you wont have a runner!
 Then following that, from the root dir of this project, run <code>npm install</code> which will set up all of the required dependencies.</p>

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"
   }

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;

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;
+   }
+}

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;