Permalink
Browse files

complete re-write

  • Loading branch information...
1 parent b0afc8f commit e0db980d881b2d400ec425146385efa28dd90fd4 @blackfalcon blackfalcon committed Feb 26, 2014
Showing with 203 additions and 230 deletions.
  1. +0 −1 Procfile
  2. +7 −14 app.js
  3. +6 −0 bower.json
  4. +16 −0 bower_components/bower-bourbon/.bower.json
  5. +7 −0 bower_components/bower-bourbon/.gitignore
  6. +6 −0 bower_components/bower-bourbon/README.md
  7. +13 −0 bower_components/bower-bourbon/_bourbon-deprecated-upcoming.scss
  8. +3 −0 {sass/lib/bourbon → bower_components/bower-bourbon}/_bourbon.scss
  9. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/addons/_button.scss
  10. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/addons/_clearfix.scss
  11. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/addons/_font-family.scss
  12. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/addons/_hide-text.scss
  13. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/addons/_html5-input-types.scss
  14. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/addons/_position.scss
  15. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/addons/_prefixer.scss
  16. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/addons/_retina-image.scss
  17. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/addons/_size.scss
  18. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/addons/_timing-functions.scss
  19. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/addons/_triangle.scss
  20. +7 −0 bower_components/bower-bourbon/bower.json
  21. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_animation.scss
  22. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_appearance.scss
  23. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_backface-visibility.scss
  24. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_background-image.scss
  25. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_background.scss
  26. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_border-image.scss
  27. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_border-radius.scss
  28. +1 −3 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_box-sizing.scss
  29. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_columns.scss
  30. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_flex-box.scss
  31. +23 −0 bower_components/bower-bourbon/css3/_font-face.scss
  32. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_hidpi-media-query.scss
  33. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_image-rendering.scss
  34. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_inline-block.scss
  35. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_keyframes.scss
  36. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_linear-gradient.scss
  37. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_perspective.scss
  38. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_placeholder.scss
  39. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_radial-gradient.scss
  40. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_transform.scss
  41. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_transition.scss
  42. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/css3/_user-select.scss
  43. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/functions/_compact.scss
  44. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/functions/_flex-grid.scss
  45. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/functions/_grid-width.scss
  46. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/functions/_linear-gradient.scss
  47. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/functions/_modular-scale.scss
  48. +8 −0 bower_components/bower-bourbon/functions/_px-to-em.scss
  49. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/functions/_radial-gradient.scss
  50. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/functions/_tint-shade.scss
  51. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/functions/_transition-property-name.scss
  52. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/helpers/_deprecated-webkit-gradient.scss
  53. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/helpers/_gradient-positions-parser.scss
  54. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/helpers/_linear-positions-parser.scss
  55. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/helpers/_radial-arg-parser.scss
  56. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/helpers/_radial-positions-parser.scss
  57. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/helpers/_render-gradients.scss
  58. 0 {sass/lib/bourbon → bower_components/bower-bourbon}/helpers/_shape-size-stripper.scss
  59. +9 −6 gruntfile.js
  60. +16 −13 package.json
  61. BIN public/fonts/ico-fonts.eot
  62. +0 −13 public/fonts/ico-fonts.svg
  63. BIN public/fonts/ico-fonts.ttf
  64. BIN public/fonts/ico-fonts.woff
  65. +55 −15 readme.md
  66. +1 −1 sass/_reset.scss
  67. +0 −57 sass/_typography.scss
  68. +7 −19 sass/application.scss
  69. 0 sass/{_vendors.scss → buttons/_manifest.scss}
  70. 0 sass/colors/_manifest.scss
  71. 0 sass/forms/_manifest.scss
  72. +2 −0 sass/lib/_manifest.scss
  73. +0 −19 sass/lib/bourbon/css3/_font-face.scss
  74. +0 −13 sass/lib/bourbon/functions/_px-to-em.scss
  75. +0 −16 sass/lib/bourbon/readme.md
  76. +0 −20 sass/typography/_ico-fonts.scss
  77. +0 −19 views/index.ejs
  78. +16 −0 views/index.jade
  79. +0 −1 views/something.ejs
View
@@ -1 +0,0 @@
-web: node app.js
View
21 app.js
@@ -1,29 +1,22 @@
-
// set variables for environment
var express = require('express');
var app = express();
var path = require('path');
// views as directory for all template files
app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'ejs'); // replace with whatever template language you desire
+// use either jade or ejs
+app.set('view engine', 'jade');
+
// instruct express to server up static assets
app.use(express.static('public'));
-// Set up site routes
+// set routes
app.get('/', function(req, res) {
res.render('index');
});
-app.get('/foo', function(req, res) {
- res.render('something');
-});
-
-
-// With the express server and routes defined, we can start to listen
-// for requests. Heroku defines the port in an environment variable.
-// Our app should use that if defined, otherwise 3000 is a pretty good default.
-var port = process.env.PORT || 3000;
-app.listen(port);
-console.log("The server is now listening on port %s", port);
+// Set server port
+app.listen(4000);
+console.log('server is running');
View
@@ -0,0 +1,6 @@
+{
+ "name": "node-sass",
+ "dependencies": {
+ "bower-bourbon": "~3.1.8"
+ }
+}
@@ -0,0 +1,16 @@
+{
+ "name": "bower-bourbon",
+ "version": "3.1.8",
+ "main": "./_bourbon.scss",
+ "dependencies": {},
+ "homepage": "https://github.com/hmps/bourbon",
+ "_release": "3.1.8",
+ "_resolution": {
+ "type": "version",
+ "tag": "3.1.8",
+ "commit": "12ba22379616af069e605fd8094ca914400297d4"
+ },
+ "_source": "git://github.com/hmps/bourbon.git",
+ "_target": "~3.1.8",
+ "_originalSource": "bower-bourbon"
+}
@@ -0,0 +1,7 @@
+*swp
+*gem
+.sass-cache/
+/bourbon/
+demo/
+tmp/
+tags
@@ -0,0 +1,6 @@
+# BOURBON for BOWER
+
+Install Bourbon by Thoughbot via Bower.
+
+Bourbon: https://github.com/thoughtbot/bourbon
+Bower: https://github.com/bower/bower
@@ -0,0 +1,13 @@
+//************************************************************************//
+// These mixins/functions are deprecated
+// They will be removed in the next MAJOR version release
+//************************************************************************//
+@mixin box-shadow ($shadows...) {
+ @include prefixer(box-shadow, $shadows, spec);
+ @warn "box-shadow is deprecated and will be removed in the next major version release";
+}
+
+@mixin background-size ($lengths...) {
+ @include prefixer(background-size, $lengths, spec);
+ @warn "background-size is deprecated and will be removed in the next major version release";
+}
@@ -54,3 +54,6 @@
@import "addons/size";
@import "addons/timing-functions";
@import "addons/triangle";
+
+// Soon to be deprecated Mixins
+@import "bourbon-deprecated-upcoming";
@@ -0,0 +1,7 @@
+{
+ "name": "bower-bourbon",
+ "version": "3.1.8",
+ "main": "./_bourbon.scss",
+ "dependencies": {
+ }
+}
@@ -1,6 +1,4 @@
-$default-box-sizing: border-box !default;
-
-@mixin box-sizing ($box: $default-box-sizing) {
+@mixin box-sizing ($box) {
// content-box | border-box | inherit
@include prefixer(box-sizing, $box, webkit moz spec);
}
@@ -0,0 +1,23 @@
+// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
+
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
+ @font-face {
+ font-family: $font-family;
+ font-weight: $weight;
+ font-style: $style;
+
+ @if $asset-pipeline == true {
+ src: font-url('#{$file-path}.eot');
+ src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+ font-url('#{$file-path}.woff') format('woff'),
+ font-url('#{$file-path}.ttf') format('truetype'),
+ font-url('#{$file-path}.svg##{$font-family}') format('svg');
+ } @else {
+ src: url('#{$file-path}.eot');
+ src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+ url('#{$file-path}.woff') format('woff'),
+ url('#{$file-path}.ttf') format('truetype'),
+ url('#{$file-path}.svg##{$font-family}') format('svg');
+ }
+ }
+}
@@ -0,0 +1,8 @@
+// Convert pixels to ems
+// eg. for a relational value of 12px write em(12) when the parent is 16px
+// if the parent is another value say 24px write em(12, 24)
+
+@function em($pxval, $base: 16) {
+ @return ($pxval / $base) * 1em;
+}
+
View
@@ -1,26 +1,29 @@
module.exports = function(grunt) {
- grunt.initConfig ({
+ grunt.initConfig({
sass: {
dist: {
files: {
- 'public/stylesheets/application.css' : 'sass/application.scss'
+ 'public/stylesheets/application.css': 'sass/application.scss'
+ },
+ options: {
+ includePaths: [
+ './bower_components/bower-bourbon'
+ ]
}
}
},
-
watch: {
source: {
- files: ['sass/**/*.scss'],
+ files: ['sass/**/*.scss', 'views/**/*.jade'],
tasks: ['sass'],
options: {
- livereload: true,
+ livereload: true, // needed to run LiveReload
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
-
grunt.loadNpmTasks('grunt-sass');
grunt.registerTask('default', ['sass']);
};
View
@@ -1,23 +1,26 @@
{
- "name": "Node-Sass",
+ "name": "node-sass",
"version": "0.1.0",
- "private": true,
- "description": "This is a new boilerplate project",
+ "private": "true",
+ "description": "This is a bare bones node app with Sass installed",
"main": "app.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
- "postinstall": "./node_modules/.bin/grunt"
+ "test": "echo \"Error: no test specified\" && exit 1"
},
- "author": "",
- "license": "BSD-2-Clause",
+ "keywords": [
+ "Node",
+ "Sass",
+ "libsass"
+ ],
+ "author": "Dale Sande",
+ "license": "ISC",
"dependencies": {
- "grunt": "~0.4.1",
- "grunt-sass": "~0.8.0",
- "express": "~3.4.4",
- "ejs": "~0.8.4"
+ "express": "~3.4.8",
+ "jade": "~1.2.0"
},
"devDependencies": {
- "grunt-contrib-watch": "~0.5.3",
- "grunt-cli": "~0.1.11"
+ "grunt": "~0.4.2",
+ "grunt-sass": "~0.11.0",
+ "grunt-contrib-watch": "~0.5.3"
}
}
View
Binary file not shown.
View
@@ -1,13 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="ico-fonts" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
-<glyph unicode="&#xe600;" d="M733.143 641.714l-202.857-202.857 202.857-202.857 82.286 82.286q16.571 17.714 40 8 22.286-9.714 22.286-33.714v-256q0-14.857-10.857-25.714t-25.714-10.857h-256q-24 0-33.714 22.857-9.714 22.286 8 39.429l82.286 82.286-202.857 202.857-202.857-202.857 82.286-82.286q17.714-17.143 8-39.429-9.714-22.857-33.714-22.857h-256q-14.857 0-25.714 10.857t-10.857 25.714v256q0 24 22.857 33.714 22.286 9.714 39.429-8l82.286-82.286 202.857 202.857-202.857 202.857-82.286-82.286q-10.857-10.857-25.714-10.857-6.857 0-13.714 2.857-22.857 9.714-22.857 33.714v256q0 14.857 10.857 25.714t25.714 10.857h256q24 0 33.714-22.857 9.714-22.286-8-39.429l-82.286-82.286 202.857-202.857 202.857 202.857-82.286 82.286q-17.714 17.143-8 39.429 9.714 22.857 33.714 22.857h256q14.857 0 25.714-10.857t10.857-25.714v-256q0-24-22.286-33.714-7.429-2.857-14.286-2.857-14.857 0-25.714 10.857z" horiz-adv-x="878" />
-<glyph unicode="&#xe601;" d="M146.286 201.143v-109.714q0-7.429-5.429-12.857t-12.857-5.429h-109.714q-7.429 0-12.857 5.429t-5.429 12.857v109.714q0 7.429 5.429 12.857t12.857 5.429h109.714q7.429 0 12.857-5.429t5.429-12.857zM146.286 420.571v-109.714q0-7.429-5.429-12.857t-12.857-5.429h-109.714q-7.429 0-12.857 5.429t-5.429 12.857v109.714q0 7.429 5.429 12.857t12.857 5.429h109.714q7.429 0 12.857-5.429t5.429-12.857zM146.286 640v-109.714q0-7.429-5.429-12.857t-12.857-5.429h-109.714q-7.429 0-12.857 5.429t-5.429 12.857v109.714q0 7.429 5.429 12.857t12.857 5.429h109.714q7.429 0 12.857-5.429t5.429-12.857zM1024 201.143v-109.714q0-7.429-5.429-12.857t-12.857-5.429h-768q-7.429 0-12.857 5.429t-5.429 12.857v109.714q0 7.429 5.429 12.857t12.857 5.429h768q7.429 0 12.857-5.429t5.429-12.857zM146.286 859.428v-109.714q0-7.429-5.429-12.857t-12.857-5.429h-109.714q-7.429 0-12.857 5.429t-5.429 12.857v109.714q0 7.429 5.429 12.857t12.857 5.429h109.714q7.429 0 12.857-5.429t5.429-12.857zM1024 420.571v-109.714q0-7.429-5.429-12.857t-12.857-5.429h-768q-7.429 0-12.857 5.429t-5.429 12.857v109.714q0 7.429 5.429 12.857t12.857 5.429h768q7.429 0 12.857-5.429t5.429-12.857zM1024 640v-109.714q0-7.429-5.429-12.857t-12.857-5.429h-768q-7.429 0-12.857 5.429t-5.429 12.857v109.714q0 7.429 5.429 12.857t12.857 5.429h768q7.429 0 12.857-5.429t5.429-12.857zM1024 859.428v-109.714q0-7.429-5.429-12.857t-12.857-5.429h-768q-7.429 0-12.857 5.429t-5.429 12.857v109.714q0 7.429 5.429 12.857t12.857 5.429h768q7.429 0 12.857-5.429t5.429-12.857z" />
-<glyph unicode="&#xe602;" d="M925.714 717.714q-38.286-56-92.571-95.429 0.571-8 0.571-24 0-74.286-21.714-148.286t-66-142-105.429-120.286-147.429-83.429-184.571-31.143q-154.857 0-283.429 82.857 20-2.286 44.571-2.286 128.571 0 229.143 78.857-60 1.143-107.429 36.857t-65.143 91.143q18.857-2.857 34.857-2.857 24.571 0 48.571 6.286-64 13.143-106 63.714t-42 117.429v2.286q38.857-21.714 83.429-23.429-37.714 25.143-60 65.714t-22.286 88q0 50.286 25.143 93.143 69.143-85.143 168.286-136.286t212.286-56.857q-4.571 21.714-4.571 42.286 0 76.571 54 130.571t130.571 54q80 0 134.857-58.286 62.286 12 117.143 44.571-21.143-65.714-81.143-101.714 53.143 5.714 106.286 28.571z" horiz-adv-x="951" />
-</font></defs></svg>
View
Binary file not shown.
View
Binary file not shown.
View
@@ -194,7 +194,7 @@ Now that you have a bare bones project set up, we need to get things running. Ty
Now you should be able to navigate to `http://localhost:4000/` and see your project running. Run `PORT=9999 node app.js` to listen on any other port.
-### Grunt and Grunt watch with Sass
+### Grunt and Grunt Watch with Sass
It should be noted that when you run `grunt watch` on this project for the first time, the Sass will not be processed into CSS. Since we are using a watcher, it is waiting for the `application.scss` file to be saved before processing it to CSS.
@@ -209,26 +209,66 @@ Go ahead, try it.
## Install a Sass framework
-For this project I choose to use Thoughtbot's [Bourbon](http://bourbon.io/) library.
+For this project I choose to use Thoughtbot's [Bourbon](http://bourbon.io/) library. The current version of Bourbon has a dependency on Ruby to install it's Gem and then init the Bourbon library from the Gem. For the scope of this project I don't want to introduce a Ruby dependency if I don't have to.
-While this library is a Ruby Gem, this does not place a Ruby dependency on your project. The Gem installs a version of the Sass mixin library directly into your project.
+### Use BOURBON for BOWER
-Before installing the library, update your file structure to contain a `lib/` directory within your `sass/` directory.
+This is a fork of the official Bourbon repo, but is more ideal for using Bower to install. Since we are going to use this library as a dependency, we need to set up a `bower.json` manifest file. Just a couple simple steps:
- |- node_modules/
- |- public/
- |--- stylesheets/
- |- sass/
- |--- lib/
- |- views/
+At the root of the project, run:
+
+ $ touch bower.json
+
+Open this new file and add the following:
+
+ {
+ "name": "<project name>"
+ }
+
+That's it. The value for `"name":` can be what ever your project's name is.
+
+To install Bourbon from the Bower repo, run:
+
+ $ bower install bower-bourbon --save
+
+This will install the Bourbon library into a newly created `bower_components` dir in your project. Using the `--save` flag will add this to the `bower.json` manifest as a dependency.
+### Gruntfile updates
-### Let's install Bourbon.
+To make use of the Bourbon library, we have two choices. One is to create a relative path from the `application.scss` file to the library within the `bower_components/` dir, or we can pre-configure a load path. I am going to go with load path.
+
+In the Grunt-Sass API there is a function for `includePaths` that accepts an array. To make use of this, we need to update the `gruntfile.js` using this function like so:
+
+ sass: {
+ dist: {
+ files: {
+ 'public/stylesheets/application.css': 'sass/application.scss'
+ },
+ options: {
+ includePaths: [
+ './bower_components/bower-bourbon'
+ ]
+ }
+ }
+ }
+
+Note done yet. Next we need to import this library into our `application.scss` file:
+
+ @import "bourbon";
+
+To test this, open the `application.scss` file and add a simple mixin from Bourbon:
+
+ body {
+ @include backface-visibility(visible);
+ }
+
+When you save they file, two things should happen. In the terminal you want to see `Done, without errors.` and then if you open the `application.css` file in the `public` dir, you want to see this:
-* `$ gem install bourbon` or `sudo gem install bourbon` (if you are not running RVM)
-* `$ cd sass/lib` change directories to the new Sass lib directory
-* `$ bourbon install` to install the library
-* Open the `style.scss` file and add `@import "lib/bourbon/bourbon";`
+ body {
+ -webkit-backface-visibility: visible;
+ backface-visibility: visible; }
+
+If you don't see these success factors, then review your implementation against the files in this repo and make sure that everything is correct.
### Install UI foundational framework
View
@@ -12,7 +12,7 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
$box: border-box;
* {
- @include box-sizing;
+ box-sizing: border-box;
}
body {
View
@@ -1,57 +0,0 @@
-// Include @font-face references
-//* -----------------------------------------------------------------------
-@include font-face(ico-fonts, ico-fonts);
-
-// Customize the following to fit your specifications
-// Commented out styles represent Toadstool's default bootstrap styles
-//* -----------------------------------------------------------------------
-html {
- font: em($font_size, 16) $primary_font_family;
- line-height: baseline($font_size);
- color: $primary_text
-}
-
-// Heading CSS rules
-//* -----------------------------------------------------------------------
-
-h1, h2, h3, h4, h5, h6 {
- @include heading();
-}
-
-h2 {
- @include text($heading_2);
-}
-
-h3 {
- @include text($heading_3);
-}
-
-h4 {
- @include text($heading_4);
-}
-
-h5 {
- @include text($heading_5);
-}
-
-h6 {
- @include text($heading_6);
-}
-
-// Standard body text support
-// -----------------------------------------------------------------------
-p {
- margin-bottom: baseline-margin($font_size);
- text-indent: 0;
-}
-
-a {
- color: $href_color;
- text-decoration: none;
- &:hover, &:active {
- text-decoration: underline;
- }
- &:visited {
- color: $href_color;
- }
-}
Oops, something went wrong.

0 comments on commit e0db980

Please sign in to comment.