Minimal, unassuming, front-end foundation. Configured for HTML5 and Sass, built with Browserify and Gulp.
$ npm install outset -gIn your terminal:
$ outset [path]
$ npm i
$ gulpIn your browser:
http://localhost:3000/
Work in the src folder, deploy from the dist folder.
A minimal index.html file, with CSS and JS loaded.
<!DOCTYPE html>
<html lang="en-US">
<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>
<script src="bundle.js"></script>
</body>
</html>You can import files into HTML files - without dependence on a templating engine - using the following syntax:
@include('path/to.html')
@include('path/to.svg')Note that paths are relative to the src folder.
A minimal set of partials for building modular, reusable components.
sass/
├── components/
│ ├── _keyframes.scss // empty partial, for storing reusable @keyframe animations
├── _font.scss // html font size declaration, skeleton for body font styles
├── _layout.scss // container style
├── _mixins.scss // custom mixins - clearfix, media query, image replacement, and @font-face
├── _reset.scss // custom, minimal reset
├── _vars.scss // central variable file
├── _z-index.scss // central z-index file
└── style.scss // all @imports
Just an entry point to build around. No libraries!
Outset supports ES6/7 syntax via Babel.js, and bundles modules via browserify/watchify.
Never refresh again!
Tasks:
- HTML - file include, minify
- Sass - compile, autoprefix, minify, sourcemaps
- JS - transpile, bundle, minify, sourcemaps
- Images - minify
- Fonts
- Server - auto refresh, serve sourcemaps
- Watch
Error Handling:
- No more broken pipes!
gulp-plumbercatches all errors. - Error handler emits native system notification and logs to terminal.
Targeting evergreen browsers and IE10+.
Note that this boilerplate doesn't detect browsers or their features.
