Skip to content

Commit 902c171

Browse files
author
Donovan Hutchinson
committed
Initial setup
0 parents  commit 902c171

File tree

9 files changed

+184
-0
lines changed

9 files changed

+184
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.DS_Store
3+
.sass-cache

‎README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Skeleton for simple HTML/JS projects
2+
3+
Includes Gulp to compile Sass into CSS, along with Autoprefixer and Browser Sync.
4+
5+
## Setup
6+
7+
Before starting, you'll need [Node](https://nodejs.org/) (which includes NPM).
8+
9+
Clone this repo, then run `npm install` to install dependencies.
10+
11+
## Usage
12+
13+
Edit CSS (Sass) and JavaScript in the `src/` folder. The Gulp script will process these and the stylesheets and javascripts folders will be automatically populated.
14+
15+
The command `gulp` will build the site, generating the CSS in the stylesheets folder, as well as combining JavaScript files into the javascripts folder.
16+
17+
## Questions
18+
19+
Drop me a line at [hello@cssanimation.rocks](hello@cssanimation.rocks) with any questions or thoughts. Pull requests welcomed!
20+
21+
### License
22+
23+
MIT

‎gulpfile.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
var gulp = require('gulp'),
2+
sass = require('gulp-ruby-sass'),
3+
autoprefixer = require('gulp-autoprefixer'),
4+
minifycss = require('gulp-minify-css'),
5+
jshint = require('gulp-jshint'),
6+
uglify = require('gulp-uglify'),
7+
rename = require('gulp-rename'),
8+
clean = require('gulp-clean'),
9+
concat = require('gulp-concat'),
10+
notify = require('gulp-notify'),
11+
cache = require('gulp-cache'),
12+
plumber = require('gulp-plumber'),
13+
browserSync = require('browser-sync'),
14+
cssshrink = require('gulp-cssshrink'),
15+
cp = require('child_process');
16+
17+
gulp.task('styles', function() {
18+
return gulp.src(['src/sass/*.scss', 'src/sass/*/**.scss'])
19+
.pipe(plumber())
20+
.pipe(sass({ style: 'expanded' }))
21+
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
22+
.pipe(gulp.dest('stylesheets'))
23+
.pipe(rename({suffix: '.min'}))
24+
//.pipe(minifycss())
25+
//.pipe(cssshrink())
26+
.pipe(gulp.dest('stylesheets'))
27+
.pipe(browserSync.reload({stream:true}))
28+
.pipe(notify({ message: 'Styles task complete' }));
29+
});
30+
31+
gulp.task('scripts', function() {
32+
return gulp.src(['src/javascripts/**/*.js'])
33+
//.pipe(jshint('.jshintrc'))
34+
//.pipe(jshint.reporter('default'))
35+
.pipe(plumber())
36+
.pipe(concat('app.js'))
37+
.pipe(gulp.dest('javascripts'))
38+
.pipe(rename({suffix: '.min'}))
39+
.pipe(uglify())
40+
.pipe(gulp.dest('javascripts'))
41+
.pipe(browserSync.reload({stream:true}))
42+
.pipe(notify({ message: 'Scripts task complete' }));
43+
});
44+
45+
gulp.task('clean', function() {
46+
return gulp.src(['stylesheets', 'javascripts'], {read: false})
47+
.pipe(clean());
48+
});
49+
50+
gulp.task('browser-sync', ['styles', 'scripts'], function() {
51+
browserSync.init(null, {
52+
server: {
53+
baseDir: './'
54+
},
55+
host: "localhost"
56+
});
57+
});
58+
59+
gulp.task('watch', function() {
60+
// Watch .sass files
61+
gulp.watch('src/sass/**/*.scss', ['styles']);
62+
// Watch .js files
63+
gulp.watch('src/javascripts/*.js', ['scripts']);
64+
});
65+
66+
gulp.task('default', ['clean'], function() {
67+
gulp.start('styles', 'scripts', 'browser-sync', 'watch');
68+
});

‎index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
6+
<title>Appeal</title>
7+
<link rel="stylesheet" href="stylesheets/screen.css">
8+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300)">
9+
</head>
10+
<body>
11+
<button class="show-card">
12+
<img src="https://avatars2.githubusercontent.com/u/853536?v=3&amp;s=48">
13+
Press here
14+
</button>
15+
<article class="card">
16+
<section class="close">
17+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 32 32">
18+
<path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z" fill="#aaa"></path>
19+
</svg>
20+
</section>
21+
<section class="details">
22+
<h2 class="name">Donovan Hutchinson</h2>
23+
<p class="description">Donovan is a Dublin-based front-end developer with a passion for CSS, animation and making the web fun.</p>
24+
</section>
25+
<section class="headshot">
26+
<img src="https://avatars2.githubusercontent.com/u/853536?v=3&amp;s=280">
27+
</section>
28+
<section class="icon-bar">
29+
<ul>
30+
<li>
31+
<a href="http://cssanimation.rocks">
32+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
33+
<path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z" fill="#fff"></path>
34+
</svg>
35+
</a>
36+
</li>
37+
<li>
38+
<a href="https://twitter.com/cssanimation">
39+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
40+
<path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z" fill="#fff"></path>
41+
</svg>
42+
</a>
43+
</li>
44+
<li>
45+
<a href="https://github.com/cssanimation">
46+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
47+
<path d="M0 17.388c0 1.45 0.136 2.762 0.407 3.935s0.647 2.193 1.127 3.059 1.090 1.627 1.831 2.285c0.741 0.657 1.544 1.195 2.41 1.612s1.854 0.756 2.965 1.017c1.111 0.261 2.245 0.443 3.403 0.548s2.431 0.156 3.818 0.156c1.398 0 2.676-0.052 3.834-0.156s2.295-0.287 3.411-0.548 2.11-0.6 2.981-1.017c0.871-0.417 1.68-0.954 2.425-1.612s1.361-1.419 1.846-2.285 0.863-1.886 1.134-3.059c0.271-1.174 0.407-2.486 0.407-3.935 0-2.587-0.866-4.825-2.597-6.713 0.094-0.25 0.18-0.535 0.258-0.853s0.151-0.772 0.219-1.361c0.068-0.589 0.042-1.27-0.078-2.042s-0.342-1.56-0.665-2.363l-0.235-0.047c-0.167-0.031-0.441-0.023-0.822 0.024s-0.824 0.141-1.33 0.282c-0.506 0.141-1.158 0.412-1.956 0.814s-1.64 0.905-2.527 1.51c-1.523-0.417-3.615-0.626-6.275-0.626-2.65 0-4.736 0.209-6.259 0.626-0.887-0.605-1.734-1.108-2.543-1.51s-1.453-0.673-1.933-0.814c-0.48-0.141-0.928-0.232-1.346-0.274s-0.681-0.055-0.79-0.039-0.196 0.034-0.258 0.055c-0.323 0.803-0.545 1.591-0.665 2.363s-0.146 1.453-0.078 2.042 0.141 1.043 0.219 1.361c0.078 0.318 0.164 0.602 0.258 0.853-1.732 1.888-2.598 4.126-2.598 6.713zM3.928 21.315c0-1.502 0.683-2.879 2.050-4.131 0.407-0.376 0.881-0.66 1.424-0.853s1.155-0.302 1.839-0.329c0.683-0.026 1.338-0.021 1.964 0.016s1.398 0.086 2.316 0.149c0.918 0.063 1.711 0.094 2.379 0.094s1.46-0.031 2.378-0.094c0.918-0.063 1.69-0.112 2.316-0.149s1.28-0.042 1.964-0.016c0.683 0.026 1.296 0.136 1.839 0.329s1.017 0.477 1.424 0.853c1.367 1.231 2.050 2.608 2.050 4.131 0 0.897-0.112 1.693-0.337 2.386s-0.511 1.275-0.861 1.745-0.834 0.868-1.455 1.197c-0.621 0.329-1.226 0.582-1.815 0.759s-1.346 0.316-2.269 0.415c-0.923 0.099-1.747 0.159-2.472 0.18s-1.646 0.031-2.762 0.031-2.037-0.010-2.762-0.031c-0.725-0.021-1.549-0.081-2.472-0.18s-1.68-0.237-2.269-0.415c-0.589-0.177-1.194-0.43-1.815-0.759s-1.106-0.728-1.455-1.197c-0.349-0.469-0.636-1.051-0.861-1.745s-0.336-1.489-0.336-2.386zM20 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3zM8 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3z" fill="#fff"></path>
48+
</svg>
49+
</a>
50+
</li>
51+
</section>
52+
</article>
53+
54+
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
55+
<script src="javascripts/app.js"></script>
56+
<script>
57+
// Custom scripting here
58+
59+
</script>
60+
</body>
61+
</html>

‎javascripts/app.js‎

Whitespace-only changes.

‎package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "Widget",
3+
"version": "0.0.1",
4+
"description": "",
5+
"main": "gulpfile.js",
6+
"directories": {
7+
"test": "test"
8+
},
9+
"author": "Donovan Hutchinson",
10+
"license": "MIT",
11+
"homepage": "https://github.com/donovanh/widget",
12+
"devDependencies": {
13+
"browser-sync": "^1.9.1",
14+
"gulp": "^3.8.7",
15+
"gulp-autoprefixer": "0.0.8",
16+
"gulp-cache": "^0.2.0",
17+
"gulp-clean": "^0.3.1",
18+
"gulp-concat": "^2.3.4",
19+
"gulp-cssshrink": "^0.1.4",
20+
"gulp-jshint": "^1.8.3",
21+
"gulp-minify-css": "^0.3.13",
22+
"gulp-notify": "^1.8.0",
23+
"gulp-plumber": "^0.6.4",
24+
"gulp-rename": "^1.2.0",
25+
"gulp-sass": "^1.3.3",
26+
"gulp-uglify": "^0.3.2"
27+
}
28+
}

‎src/javascripts/app.js‎

Whitespace-only changes.

‎src/sass/screen.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* Your styles (and Sass) start here */

‎stylesheets/screen.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)