Skip to content

Commit 18ac4e1

Browse files
sageworksstudiosageworksstudio
committed
adding css grid
1 parent 1d13c22 commit 18ac4e1

File tree

8 files changed

+269
-190
lines changed

8 files changed

+269
-190
lines changed

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2015 Chris Brown
3+
Copyright (c) 2018 Chris Brown
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎config.json‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎gulpfile.js‎

Lines changed: 131 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,151 @@
1-
var browserSync = require('browser-sync').create(),
2-
changed = require('gulp-changed'),
3-
config = require('./config.json').configuration,
4-
gulp = require('gulp'),
5-
gulputil = require('gulp-util'),
6-
gulpwatch = require('gulp-watch'),
7-
reload = browserSync.reload,
8-
sass = require('gulp-sass'),
9-
uglify = require('gulp-uglify');
10-
111
/**
12-
* Style
2+
* - - - - - - - - - - EDIT YOUR PATHS
3+
* - - - - - - - - - - - - - - - - - -
134
*/
14-
gulp.task('style', function () {
15-
return gulp.src(config.source.style)
16-
.pipe(changed(config.destination.style, {extension: '.css'}))
17-
.pipe(sass({'outputStyle': 'compressed'}))
18-
.pipe(gulp.dest(config.destination.style))
19-
.pipe(reload({stream:true}));
20-
});
5+
let paths = {
6+
styles: {
7+
src: 'src/scss/**/*.scss',
8+
dest: 'css/'
9+
},
10+
scripts: {
11+
src: 'src/javascript/**/*.js',
12+
dest: 'javascript/'
13+
},
14+
url: {
15+
dev: 'http://ladonnawitmer'
16+
}
17+
};
18+
19+
20+
21+
22+
23+
2124

22-
/**
23-
* Images
24-
*/
25-
gulp.task('image', function () {
26-
return gulp.src(config.source.img)
27-
.pipe(changed(config.destination.img))
28-
.pipe(gulp.dest(config.destination.img))
29-
.pipe(reload({stream:true}));
30-
});
3125

32-
/**
33-
* Script
34-
*/
35-
gulp.task('script', function () {
36-
return gulp.src(config.source.js)
37-
.pipe(changed(config.destination.js, {extension: '.js'}))
38-
.pipe(uglify())
39-
.pipe(gulp.dest(config.destination.js))
40-
.pipe(reload({stream:true}));
41-
});
4226

43-
/**
44-
* HTML
45-
*/
46-
gulp.task('html', function () {
47-
return gulp.src(config.source.html)
48-
.pipe(changed(config.destination.html, {extension: '.html'}))
49-
.pipe(gulp.dest(config.destination.html))
50-
.pipe(reload({stream:true}));
51-
});
5227

5328
/**
54-
* Server
29+
* - - - - - - - - - - INCLUDE YOUR MODULES
30+
* - - - - - - - - - - - - - - - - - - - - -
5531
*/
56-
gulp.task('server', function (){
57-
browserSync.init({
58-
proxy: config.devUrl
59-
});
60-
});
32+
33+
let prefix = require ('gulp-autoprefixer'),
34+
beeper = require ('beeper'),
35+
browserSync = require ('browser-sync').create (),
36+
//changed = require ('gulp-changed'),
37+
colors = require ('ansi-colors'),
38+
gulp = require ('gulp'),
39+
log = require ('fancy-log'),
40+
plumber = require ('gulp-plumber'),
41+
reload = browserSync.reload ,
42+
sass = require ('gulp-sass'),
43+
sourcemaps = require ('gulp-sourcemaps'),
44+
uglify = require('gulp-uglify');
45+
46+
47+
48+
49+
50+
51+
52+
53+
6154

6255
/**
63-
* Watch
56+
* - - - - - - - - - - FUNCTIONS
57+
* - - - - - - - - - - - - - - -
6458
*/
65-
gulp.task('watch', function (){
66-
67-
gulpwatch(config.source.style, ['style'], function () {
68-
gulp.src(config.source.style)
69-
.pipe(changed(config.destination.style, {extension: '.css'}))
70-
.pipe(sass({'outputStyle': 'compressed'}))
71-
.pipe(gulp.dest(config.destination.style))
72-
.pipe(reload({stream:true}));
73-
});
7459

75-
gulpwatch(config.source.img, ['image'], function () {
76-
gulp.src(config.source.img)
77-
.pipe(changed(config.destination.img))
78-
.pipe(gulp.dest(config.destination.img))
79-
.pipe(reload({stream:true}));
60+
// Log errors and don't break the stream.
61+
function onError(err) {
62+
console.log(err);
63+
beeper(2);
64+
};
65+
66+
// Create a new proxy server to view dest.
67+
function server() {
68+
browserSync.init ({
69+
proxy : paths.url.dev,
70+
notify : false
8071
});
72+
log(colors.redBright.bold.bgWhiteBright("Excelsior! We're up and running."));
73+
};
74+
75+
// Compile scss into css and reload proxy server.
76+
// 'production' mode will compress final css output.
77+
function styles(env) {
78+
if (env !== true) {
79+
return gulp.src(paths.styles.src)
80+
.pipe(sourcemaps.init())
81+
.pipe(sass({'outputStyle':'expanded'}))
82+
.pipe(plumber({
83+
errorHandler : onError
84+
}))
85+
.pipe(prefix({
86+
grid: true,
87+
flexbox: true
88+
}))
89+
.pipe(sourcemaps.write('./')) //maps are set relative to source
90+
.pipe(gulp.dest(paths.styles.dest))
91+
.pipe(browserSync.stream());
92+
} else {
93+
return gulp.src(paths.styles.src)
94+
.pipe(sourcemaps.init())
95+
.pipe(sass({'outputStyle':'compressed'}))
96+
.pipe(sourcemaps.write('./')) //maps are set relative to source
97+
.pipe(gulp.dest(paths.styles.dest));
98+
}
99+
}
81100

82-
gulpwatch(config.source.js, ['script'], function () {
83-
gulp.src(config.source.js)
84-
.pipe(changed(config.destination.js, {extension: '.js'}))
101+
// Save JavaScript to dest and reload browser.
102+
// 'production' task will uglify final JavaScript output.
103+
function scripts(env) {
104+
if (env !== true) {
105+
return gulp.src(paths.scripts.src)
106+
.pipe(plumber({
107+
errorHandler : onError
108+
}))
109+
.pipe(gulp.dest(paths.scripts.dest))
110+
.pipe(browserSync.stream());
111+
} else {
112+
return gulp.src(paths.scripts.src)
85113
.pipe(uglify())
86-
.pipe(gulp.dest(config.destination.js))
87-
.pipe(reload({stream:true}));
88-
});
114+
.pipe(gulp.dest(paths.scripts.dest));
115+
}
116+
}
117+
118+
// Watching
119+
function watch() {
120+
// watch source files
121+
gulp.watch(paths.scripts.src, scripts);
122+
gulp.watch(paths.styles.src, styles);
123+
}
124+
125+
126+
127+
128+
129+
130+
131+
89132

90-
gulpwatch(config.source.html, ['html'], function () {
91-
gulp.src(config.source.html)
92-
.pipe(changed(config.destination.html, {extension: '.html'}))
93-
.pipe(gulp.dest(config.destination.html))
94-
.pipe(reload({stream:true}));
95-
});
96-
});
97133

98134
/**
99-
* Default task
135+
* - - - - - - - - - - TASKS
136+
* - - - - - - - - - - - - -
100137
*/
101-
gulp.task('default', ['style', 'image', 'script', 'html', 'server', 'watch'], function () {
102-
gulputil.log(gulputil.colors.inverse("Excelsior! We're up and running."));
138+
139+
// Render production ready assets
140+
gulp.task('production', function(done) {
141+
styles(true);
142+
scripts(true);
143+
done();
144+
});
145+
146+
gulp.task('default', function() {
147+
styles();
148+
scripts();
149+
server();
150+
watch();
103151
});

‎package.json‎

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,43 @@
11
{
2-
"name": "StreamBuilder",
3-
"version": "0.1.0",
4-
"description": "Streaming, front-end build environment for automating mundane tasks.",
5-
"keywords": [
6-
"gulp",
7-
"jade",
8-
"scss",
9-
"sass",
10-
"node"
11-
],
12-
"repository": {
13-
"type": "git",
14-
"url": "https://github.com/digi-brains/StreamBuilder"
15-
},
16-
"author": {
17-
"name": "Chris Brown",
18-
"email": "chris@digitalbrains.io",
19-
"url": "https://digitalbrains.io"
20-
},
21-
"homepage": "https://github.com/digi-brains/StreamBuilder",
22-
"bugs": {
23-
"url": "https://github.com/digi-brains/StreamBuilder/issues",
24-
"email": "chris@digitalbrains.io"
25-
},
26-
"license": "MIT",
27-
"devDependencies": {
28-
"browser-sync": "^2.18.6",
29-
"gulp": "^3.9.1",
30-
"gulp-changed": "^1.3.2",
31-
"gulp-sass": "2.3.2",
32-
"gulp-uglify": "^1.5.4",
33-
"gulp-util": "^3.0.8",
34-
"gulp-watch": "^4.3.11"
35-
}
2+
"name": "StreamBuilder",
3+
"version": "1.0.0",
4+
"description": "Streaming, front-end build environment for automating mundane tasks.",
5+
"keywords": [
6+
"gulp",
7+
"scss",
8+
"sass",
9+
"node",
10+
"nunjucks"
11+
],
12+
"repository": {
13+
"type": "git",
14+
"url": "https://github.com/digi-brains/StreamBuilder"
15+
},
16+
"author": {
17+
"name": "Chris Brown",
18+
"email": "chris@digitalbrains.io",
19+
"url": "https://digitalbrains.io"
20+
},
21+
"homepage": "https://github.com/digi-brains/StreamBuilder",
22+
"bugs": {
23+
"url": "https://github.com/digi-brains/StreamBuilder/issues",
24+
"email": "chris@digitalbrains.io"
25+
},
26+
"license": "MIT",
27+
"devDependencies": {
28+
"beeper": "1.1.1",
29+
"browser-sync": "2.26.3",
30+
"ansi-colors": "3.1.0",
31+
"fancy-log": "1.3.2",
32+
"fs-extra": "7.0.0",
33+
"gulp": "4.0.0",
34+
"gulp-autoprefixer": "6.0.0",
35+
"gulp-changed": "3.2.0",
36+
"gulp-data": "1.3.1",
37+
"gulp-nunjucks-render": "2.2.2",
38+
"gulp-plumber": "1.2.0",
39+
"gulp-sass": "4.0.2",
40+
"gulp-sourcemaps": "2.6.4",
41+
"gulp-uglify": "3.0.1"
42+
}
3643
}

‎src/scss/_site-settings.scss‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
/**
2-
* - - - - [ Grid & Breakpoints - used with the column grid ]
3-
*/
4-
$container : 1200px; // Max width of grid.
5-
$row : 100%; // Max width of row.
6-
$gutter : 0; // Gutter width. Will be /2 for each col.
1+
/* Box Model */
2+
$box-sizing : border-box; // box model
73

8-
/**
9-
* Note: breakpoints are set to be that size and up.
10-
*/
11-
$breakpoint-map: (
12-
'xs' : ( min-width: 0px ), // XSmall up to Small.
13-
'sm' : ( min-width: 480px ), // Small up to Medium.
14-
'md' : ( min-width: 768px ), // Medium up to Large.
15-
'lg' : ( min-width: 960px ), // Large up to X-Large.
16-
'xl' : ( min-width: $container ) // X-Large and above.
17-
);
4+
$container : 1024px;
5+
6+
$rem-base : 18px; // Default font size
7+
8+
$font-step : 0.33333; // Font size increments = ($rem-base * $font-step)
9+
10+
/* Grid */
11+
$gutter : 30;
12+
$columns : 12;
13+
$breakpoint-map : (
14+
xs : 'only screen and (min-width: 0px )',
15+
sm : 'only screen and (min-width: 480px )',
16+
md : 'only screen and (min-width: 640px )',
17+
ml : 'only screen and (min-width: 768px )',
18+
lg : 'only screen and (min-width: 960px )',
19+
xl : 'only screen and (min-width: 1024px)'
20+
);

0 commit comments

Comments
 (0)