Merge branch 'release/rename'
This commit is contained in:
Nick Pack
commit
db339dc5b2
@ -1,7 +1,6 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "0.10"
|
||||
- "0.11"
|
||||
before_script:
|
||||
- npm install -g grunt-cli
|
||||
- gem install sass
|
||||
10
Gruntfile.js
10
Gruntfile.js
@ -6,7 +6,7 @@ module.exports = function(grunt) {
|
||||
sass: {
|
||||
dist: {
|
||||
files: {
|
||||
'css/skeleton.css': 'scss/skeleton.scss',
|
||||
'css/Ribs.css': 'scss/Ribs.scss',
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -16,7 +16,7 @@ module.exports = function(grunt) {
|
||||
import: false,
|
||||
csslintrc: '.csslintrc'
|
||||
},
|
||||
src: ['css/skeleton.css']
|
||||
src: ['css/Ribs.css']
|
||||
}
|
||||
},
|
||||
cssmin: {
|
||||
@ -25,7 +25,7 @@ module.exports = function(grunt) {
|
||||
banner: '/* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("dd-mm-yyyy") %> */'
|
||||
},
|
||||
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-watch');
|
||||
|
||||
grunt.registerTask('lint', ['sass', 'csslint']);
|
||||
grunt.registerTask('test', ['sass', 'csslint']);
|
||||
grunt.registerTask('minify', ['cssmin']);
|
||||
grunt.registerTask('build', ['sass', 'cssmin']);
|
||||
grunt.registerTask('default', ['sass', 'cssmin']);
|
||||
|
||||
};
|
||||
19
README.md
19
README.md
@ -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?
|
||||
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:
|
||||
|
||||
```
|
||||
bower install --save Skeleton-SCSS
|
||||
bower install --save ribs
|
||||
```
|
||||
|
||||
## Build status
|
||||
The project is set up to build and run csslint on Travis:
|
||||
Master: [](https://travis-ci.org/nickpack/Skeleton-SCSS)
|
||||
Development: [](https://travis-ci.org/nickpack/Skeleton-SCSS)
|
||||
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:
|
||||
* 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
|
||||
* lint - 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
|
||||
* 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!)
|
||||
* 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
|
||||
@ -35,6 +35,7 @@ Then following that, from the root dir of this project, run `npm install` which
|
||||
You should be good to go.
|
||||
|
||||
## 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.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.
|
||||
@ -53,5 +54,5 @@ Copyright (c) 2013 Nick Pack
|
||||
Based on the original skeleton project which is Copyright 2011 Dave Gamache
|
||||
Licensed under the MIT license.
|
||||
|
||||
[](https://bitdeli.com/free "Bitdeli Badge")
|
||||
[](https://bitdeli.com/free "Bitdeli Badge")
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "Skeleton-SCSS",
|
||||
"name": "Ribs",
|
||||
"version": "1.0.2",
|
||||
"main": "css/skeleton.css",
|
||||
"main": "css/Ribs.css",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
@ -9,6 +9,6 @@
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/nickpack/Skeleton-SCSS.git"
|
||||
"url": "https://github.com/nickpack/Ribs.git"
|
||||
}
|
||||
}
|
||||
@ -1,13 +1,11 @@
|
||||
/*
|
||||
* Skeleton SCSS V1.0.2
|
||||
* Ribs V1.0.2
|
||||
* Skeleton is Copyright 2011, Dave Gamache
|
||||
*
|
||||
* SCSS Conversion and Mixins by Nick Pack
|
||||
*
|
||||
* www.getskeleton.com
|
||||
* Ribs is the evolution of Skeleton by Nick Pack
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* 6/20/2012
|
||||
* 28/05/2013
|
||||
*/
|
||||
/* ul, ol with disc, square etc. */
|
||||
/* #Reset & Basics (Inspired by E. Meyers)
|
||||
@ -61,8 +59,6 @@ body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%; }
|
||||
|
||||
/* #Forms
|
||||
================================================== */
|
||||
.container {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
@ -118,6 +114,12 @@ body {
|
||||
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 {
|
||||
@ -188,6 +190,12 @@ body {
|
||||
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 {
|
||||
@ -226,13 +234,13 @@ body {
|
||||
.container .omega {
|
||||
margin-left: 10px; }
|
||||
|
||||
.alpha, .omega {
|
||||
.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, .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; }
|
||||
@ -622,7 +630,7 @@ legend span {
|
||||
max-width: 100%;
|
||||
height: auto; }
|
||||
|
||||
/* #Media Queries
|
||||
/* #Example Media Queries
|
||||
================================================== */
|
||||
/* Smaller than standard 960 (devices and browsers) */
|
||||
/* Tablet Portrait size to standard 960 (devices and browsers) */
|
||||
2
css/Ribs.min.css
vendored
Normal file
2
css/Ribs.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
css/skeleton.min.css
vendored
2
css/skeleton.min.css
vendored
File diff suppressed because one or more lines are too long
@ -18,7 +18,7 @@
|
||||
|
||||
<!-- CSS
|
||||
================================================== -->
|
||||
<link rel="stylesheet" href="css/skeleton.min.css">
|
||||
<link rel="stylesheet" href="css/Ribs.min.css">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
@ -42,12 +42,13 @@
|
||||
<div class="container">
|
||||
<div class="sixteen columns">
|
||||
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton-SCSS</h1>
|
||||
<h5>Version 1.0.1</h5>
|
||||
<h5>Version 1.0.2</h5>
|
||||
<hr />
|
||||
</div>
|
||||
<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>Ribs is the evolution of the original Skeleton Project.</p>
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<h3>Three Core Principles</h3>
|
||||
@ -60,7 +61,7 @@
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<h3>Docs & 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><!-- container -->
|
||||
|
||||
18
package.json
18
package.json
@ -1,9 +1,9 @@
|
||||
{
|
||||
"name": "Skeleton-SCSS",
|
||||
"title": "Skeleton SCSS",
|
||||
"description": "Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.",
|
||||
"name": "Ribs",
|
||||
"title": "Ribs",
|
||||
"description": "The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.",
|
||||
"version": "1.0.2",
|
||||
"homepage": "https://github.com/nickpack/Skeleton-SCSS",
|
||||
"homepage": "https://github.com/nickpack/Ribs",
|
||||
"author": {
|
||||
"name": "Nick Pack",
|
||||
"email": "nick@nickpack.com",
|
||||
@ -11,23 +11,23 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:nickpack/Skeleton-SCSS.git"
|
||||
"url": "git@github.com:nickpack/Ribs.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/nickpack/Skeleton-SCSS/issues"
|
||||
"url": "https://github.com/nickpack/Ribs/issues"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/nickpack/Skeleton-SCSS/blob/master/LICENSE-MIT"
|
||||
"url": "https://github.com/nickpack/Ribs/blob/master/LICENSE-MIT"
|
||||
}
|
||||
],
|
||||
"scripts": {
|
||||
"test": "grunt lint"
|
||||
"test": "grunt test"
|
||||
},
|
||||
"main": "./index",
|
||||
"keywords": [
|
||||
"static"
|
||||
"static", "skeleton", "ribs"
|
||||
],
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.1",
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
/*
|
||||
* Skeleton SCSS V1.0.2
|
||||
* Ribs V1.0.2
|
||||
* Skeleton is Copyright 2011, Dave Gamache
|
||||
*
|
||||
* SCSS Conversion and Mixins by Nick Pack
|
||||
*
|
||||
* www.getskeleton.com
|
||||
* Ribs is the evolution of Skeleton by Nick Pack
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* 6/20/2012
|
||||
* 28/05/2013
|
||||
*/
|
||||
|
||||
@import "_variables";
|
||||
@ -24,10 +22,6 @@ body {
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* #Forms
|
||||
================================================== */
|
||||
|
||||
|
||||
@import "_grid";
|
||||
@import "_typography";
|
||||
@import "_links";
|
||||
@ -35,7 +29,7 @@ body {
|
||||
@import "_forms";
|
||||
@import "_images";
|
||||
|
||||
/* #Media Queries
|
||||
/* #Example Media Queries
|
||||
================================================== */
|
||||
|
||||
/* Smaller than standard 960 (devices and browsers) */
|
||||
@ -27,7 +27,7 @@
|
||||
& .omega { margin-left: 10px; }
|
||||
}
|
||||
|
||||
.alpha, .omega {
|
||||
.alpha-omega {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
}
|
||||
@ -53,7 +53,11 @@
|
||||
& .fifteen,
|
||||
& .sixteen,
|
||||
& .one-third,
|
||||
& .two-thirds { width: $mobile-column-width; }
|
||||
& .two-thirds,
|
||||
& .one-half,
|
||||
& .one-quarter,
|
||||
& .three-quarters
|
||||
{ width: $mobile-column-width; }
|
||||
|
||||
.column, .columns {
|
||||
margin: 0;
|
||||
|
||||
@ -140,6 +140,9 @@
|
||||
.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; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user