outset
Minimal, unassuming, front-end foundation. Configured for HTML5 and Sass, built with Gulp.
Install
$ npm install outset -g
Use
In your terminal:
$ outset [path]
$ npm i
$ gulp
In your browser:
http://localhost:3000/
Get building! Work in the src
folder, deploy from the dist
folder. The index.html
file comes wired up.
Browser Support
What matters: IE9+.
Display reset provided for HTML5 elements in IE9.
Docs
HTML
Just an index.html
file.
<!DOCTYPE html>
<!--[if IE 9]> <html class="ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en-US"> <!--<![endif]-->
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
</div><!-- END wrapper -->
<script src="scripts.js"></script>
</body>
</html>
Sass
A custom reset, and mixins.
- Configured for
rem
(1rem
=10px
) - Disable transforms and opacity in IE9
JS
Just a namespace to build in (that you should rename). No libraries!
'use strict';
// constructor
function Outset(options) {
document.addEventListener('DOMContentLoaded', this.init(), false);
}
// methods
Outset.prototype.init = function() {
}
// instance
var outset = new Outset({
});
Gulp
Never refresh again!
Tasks:
- Minify HTML
- Compile Sass (
compressed
output) - Autoprefixer to add vendor prefixes (browser string:
> 1%, last 2 versions, Explorer >= 9
) - Concatenate and uglify scripts
- Optimize images:
gif
,jpg
,png
, andsvg
- Start local server on
port 3000
- LiveReload on change (no browser extension needed)
Error Handling:
- Plumber catches all errors - no more broken pipes!
- Native notifications for compilation failures
- Errors are logged to console as well
Watch:
- HTML, Sass, JS, and images