BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'release/rename'

Browse Source
This commit is contained in:
Nick Pack 2013-05-28 20:36:09 +01:00
commit db339dc5b2
12 changed files with 67 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.travis.yml
View File

@ -1,7 +1,6 @@
language: node_js language: node_js
node_js: node_js:
- "0.10" - "0.10"
- "0.11"
before_script: before_script:
- npm install -g grunt-cli - npm install -g grunt-cli
- gem install sass - gem install sass

10
Gruntfile.js
View File

@ -6,7 +6,7 @@ module.exports = function(grunt) {
sass: { sass: {
dist: { dist: {
files: { files: {
'css/skeleton.css': 'scss/skeleton.scss', 'css/Ribs.css': 'scss/Ribs.scss',
} }
} }
}, },
@ -16,7 +16,7 @@ module.exports = function(grunt) {
import: false, import: false,
csslintrc: '.csslintrc' csslintrc: '.csslintrc'
}, },
src: ['css/skeleton.css'] src: ['css/Ribs.css']
} }
}, },
cssmin: { cssmin: {
@ -25,7 +25,7 @@ module.exports = function(grunt) {
banner: '/* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("dd-mm-yyyy") %> */' banner: '/* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("dd-mm-yyyy") %> */'
}, },
files: { files: {
'css/skeleton.min.css': 'css/skeleton.css' 'css/Ribs.min.css': 'css/Ribs.css'
} }
}, },
}, },
@ -40,8 +40,8 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('lint', ['sass', 'csslint']); grunt.registerTask('test', ['sass', 'csslint']);
grunt.registerTask('minify', ['cssmin']); grunt.registerTask('minify', ['cssmin']);
grunt.registerTask('build', ['sass', 'cssmin']); grunt.registerTask('default', ['sass', 'cssmin']);
}; };

19
README.md
View File

@ -1,6 +1,6 @@
Skeleton SCSS Ribs
============= =============
> This is my opinionated fork 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. > 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? ## Whats 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. 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.
@ -11,21 +11,21 @@ As time goes by I will gradually extend the available options and build a packag
Either clone this repository and drop in manually, or install from bower: Either clone this repository and drop in manually, or install from bower:
``` ```
bower install --save Skeleton-SCSS bower install --save ribs
``` ```
## Build status ## Build status
The project is set up to build and run csslint on Travis: The project is set up to build and run csslint on Travis:
Master: [![Build Status](https://travis-ci.org/nickpack/Skeleton-SCSS.png)](https://travis-ci.org/nickpack/Skeleton-SCSS) Master: [![Build Status](https://travis-ci.org/nickpack/Ribs.png)](https://travis-ci.org/nickpack/Ribs)
Development: [![Build Status](https://travis-ci.org/nickpack/Skeleton-SCSS.png?branch=develop)](https://travis-ci.org/nickpack/Skeleton-SCSS) Development: [![Build Status](https://travis-ci.org/nickpack/Ribs.png?branch=develop)](https://travis-ci.org/nickpack/Ribs)
## Building ## Building
I've added grunt configuration to the repository for those of you that use it. I've added grunt configuration to the repository for those of you that use it.
There are 4 main tasks added: There are 4 main tasks added:
* build - 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 * 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
* lint - 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 skeleton that I need to fix!)
* minify - This literally just runs cssmin, useful if you've edited skeleton.css directly * 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) * 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 ### To get started with the grunt tools
@ -35,6 +35,7 @@ Then following that, from the root dir of this project, run `npm install` which
You should be good to go. You should be good to go.
## Changelog ## Changelog
* 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. * 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.
* May 17, 2013 - (v1.0.1) Added grunt build tools * May 17, 2013 - (v1.0.1) Added grunt build tools
* Apr 23, 2013 - (v1.0.0) Skeleton SCSS v1.0 - Additional variable conversions, changes based on feedback to the original project and bower submission. * Apr 23, 2013 - (v1.0.0) Skeleton SCSS v1.0 - Additional variable conversions, changes based on feedback to the original project and bower submission.
@ -53,5 +54,5 @@ Copyright (c) 2013 Nick Pack
Based on the original skeleton project which is Copyright 2011 Dave Gamache Based on the original skeleton project which is Copyright 2011 Dave Gamache
Licensed under the MIT license. Licensed under the MIT license.
[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/nickpack/Skeleton-SCSS/trend.png)](https://bitdeli.com/free "Bitdeli Badge") [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/nickpack/Ribs/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

6
component.json
View File

@ -1,7 +1,7 @@
{ {
"name": "Skeleton-SCSS", "name": "Ribs",
"version": "1.0.2", "version": "1.0.2",
"main": "css/skeleton.css", "main": "css/Ribs.css",
"ignore": [ "ignore": [
"**/.*", "**/.*",
"node_modules", "node_modules",
@ -9,6 +9,6 @@
], ],
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/nickpack/Skeleton-SCSS.git" "url": "https://github.com/nickpack/Ribs.git"
} }
} }

28
css/skeleton.css → css/Ribs.css
View File

@ -1,13 +1,11 @@
/* /*
* Skeleton SCSS V1.0.2 * Ribs V1.0.2
* Skeleton is Copyright 2011, Dave Gamache * Skeleton is Copyright 2011, Dave Gamache
* *
* SCSS Conversion and Mixins by Nick Pack * Ribs is the evolution of Skeleton by Nick Pack
*
* www.getskeleton.com
* Free to use under the MIT license. * Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* 6/20/2012 * 28/05/2013
*/ */
/* ul, ol with disc, square etc. */ /* ul, ol with disc, square etc. */
/* #Reset & Basics (Inspired by E. Meyers) /* #Reset & Basics (Inspired by E. Meyers)
@ -61,8 +59,6 @@ body {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; } -ms-text-size-adjust: 100%; }
/* #Forms
================================================== */
.container { .container {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
@ -118,6 +114,12 @@ body {
width: 300px; } width: 300px; }
.container .two-thirds { .container .two-thirds {
width: 620px; } width: 620px; }
.container .one-half {
width: 460px; }
.container .one-quarter {
width: 220px; }
.container .three-quarters {
width: 700px; }
.container .offset-by-one { .container .offset-by-one {
padding-left: 60px; } padding-left: 60px; }
.container .offset-by-two { .container .offset-by-two {
@ -188,6 +190,12 @@ body {
width: 236px; } width: 236px; }
.container .two-thirds { .container .two-thirds {
width: 492px; } width: 492px; }
.container .one-half {
width: 364px; }
.container .one-quarter {
width: 172px; }
.container .three-quarters {
width: 556px; }
.container .offset-by-one { .container .offset-by-one {
padding-left: 48px; } padding-left: 48px; }
.container .offset-by-two { .container .offset-by-two {
@ -226,13 +234,13 @@ body {
.container .omega { .container .omega {
margin-left: 10px; } margin-left: 10px; }
.alpha, .omega { .alpha-omega {
margin-right: 0; margin-right: 0;
margin-left: 0; } } margin-left: 0; } }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container { .container {
width: 90%; } 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, .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%; } width: 100%; }
.container .column, .container .columns { .container .column, .container .columns {
margin: 0; } margin: 0; }
@ -622,7 +630,7 @@ legend span {
max-width: 100%; max-width: 100%;
height: auto; } height: auto; }
/* #Media Queries /* #Example Media Queries
================================================== */ ================================================== */
/* Smaller than standard 960 (devices and browsers) */ /* Smaller than standard 960 (devices and browsers) */
/* Tablet Portrait size to standard 960 (devices and browsers) */ /* Tablet Portrait size to standard 960 (devices and browsers) */

2
css/Ribs.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
css/skeleton.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
index.html
View File

@ -18,7 +18,7 @@
<!-- CSS <!-- CSS
================================================== --> ================================================== -->
<link rel="stylesheet" href="css/skeleton.min.css"> <link rel="stylesheet" href="css/Ribs.min.css">
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
@ -42,12 +42,13 @@
<div class="container"> <div class="container">
<div class="sixteen columns"> <div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton-SCSS</h1> <h1 class="remove-bottom" style="margin-top: 40px">Skeleton-SCSS</h1>
<h5>Version 1.0.1</h5> <h5>Version 1.0.2</h5>
<hr /> <hr />
</div> </div>
<div class="one-third column"> <div class="one-third column">
<h3>About Skeleton?</h3> <h3>About Ribs</h3>
<p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p> <p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
<p>Ribs is the evolution of the original Skeleton Project.</p>
</div> </div>
<div class="one-third column"> <div class="one-third column">
<h3>Three Core Principles</h3> <h3>Three Core Principles</h3>
@ -60,7 +61,7 @@
</div> </div>
<div class="one-third column"> <div class="one-third column">
<h3>Docs &amp; Support</h3> <h3>Docs &amp; Support</h3>
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a> - this is the main set of docs for the original css project, but will provide all of the needed insight. Skeleton SCSS is also open-source and has a <a href="https://github.com/nickpack/Skeleton-SCSS">project on github</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:nick@nickpack.com">nick@nickpack.com</a>.</p> <p>The easiest way to really get started with Ribs is to check out the original skeleton docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a> - this is the main set of docs for the original css project, but will provide all of the needed insight. Ribs is open-source and has a <a href="https://github.com/nickpack/Ribs">project on github</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:nick@nickpack.com">nick@nickpack.com</a>.</p>
</div> </div>
</div><!-- container --> </div><!-- container -->

18
package.json
View File

@ -1,9 +1,9 @@
{ {
"name": "Skeleton-SCSS", "name": "Ribs",
"title": "Skeleton SCSS", "title": "Ribs",
"description": "Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.", "description": "The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.",
"version": "1.0.2", "version": "1.0.2",
"homepage": "https://github.com/nickpack/Skeleton-SCSS", "homepage": "https://github.com/nickpack/Ribs",
"author": { "author": {
"name": "Nick Pack", "name": "Nick Pack",
"email": "nick@nickpack.com", "email": "nick@nickpack.com",
@ -11,23 +11,23 @@
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git@github.com:nickpack/Skeleton-SCSS.git" "url": "git@github.com:nickpack/Ribs.git"
}, },
"bugs": { "bugs": {
"url": "https://github.com/nickpack/Skeleton-SCSS/issues" "url": "https://github.com/nickpack/Ribs/issues"
}, },
"licenses": [ "licenses": [
{ {
"type": "MIT", "type": "MIT",
"url": "https://github.com/nickpack/Skeleton-SCSS/blob/master/LICENSE-MIT" "url": "https://github.com/nickpack/Ribs/blob/master/LICENSE-MIT"
} }
], ],
"scripts": { "scripts": {
"test": "grunt lint" "test": "grunt test"
}, },
"main": "./index", "main": "./index",
"keywords": [ "keywords": [
"static" "static", "skeleton", "ribs"
], ],
"devDependencies": { "devDependencies": {
"grunt": "~0.4.1", "grunt": "~0.4.1",

14
scss/skeleton.scss → scss/Ribs.scss
View File

@ -1,13 +1,11 @@
/* /*
* Skeleton SCSS V1.0.2 * Ribs V1.0.2
* Skeleton is Copyright 2011, Dave Gamache * Skeleton is Copyright 2011, Dave Gamache
* *
* SCSS Conversion and Mixins by Nick Pack * Ribs is the evolution of Skeleton by Nick Pack
*
* www.getskeleton.com
* Free to use under the MIT license. * Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* 6/20/2012 * 28/05/2013
*/ */
@import "_variables"; @import "_variables";
@ -24,10 +22,6 @@ body {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} }
/* #Forms
================================================== */
@import "_grid"; @import "_grid";
@import "_typography"; @import "_typography";
@import "_links"; @import "_links";
@ -35,7 +29,7 @@ body {
@import "_forms"; @import "_forms";
@import "_images"; @import "_images";
/* #Media Queries /* #Example Media Queries
================================================== */ ================================================== */
/* Smaller than standard 960 (devices and browsers) */ /* Smaller than standard 960 (devices and browsers) */

8
scss/_grid.scss
View File

@ -27,7 +27,7 @@
& .omega { margin-left: 10px; } & .omega { margin-left: 10px; }
} }
.alpha, .omega { .alpha-omega {
margin-right: 0; margin-right: 0;
margin-left: 0; } margin-left: 0; }
} }
@ -53,7 +53,11 @@
& .fifteen, & .fifteen,
& .sixteen, & .sixteen,
& .one-third, & .one-third,
& .two-thirds { width: $mobile-column-width; } & .two-thirds,
& .one-half,
& .one-quarter,
& .three-quarters
{ width: $mobile-column-width; }
.column, .columns { .column, .columns {
margin: 0; margin: 0;

3
scss/_mixins.scss
View File

@ -140,6 +140,9 @@
.sixteen { width: (16*$grid-column-width - $grid-gutter); } .sixteen { width: (16*$grid-column-width - $grid-gutter); }
.one-third { width: ($grid-container-width/3) - $grid-gutter; } .one-third { width: ($grid-container-width/3) - $grid-gutter; }
.two-thirds { width: (($grid-container-width/3)*2) - $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-one { padding-left: $grid-column-width; }