A well-tested, boilerplate for developing new internet projects.
Rough at its core is a gulp workflow based on these three tasks:
servestarts a server, everything will compile and live-reload on changes
buildmoves everything to
/dist— compiled, minified and optimized
serve:diststarts a server to test your build
Below the hood the following tasks are used. You can always call them directly, although it shouldn't be necessary.
templateswith Handlebars (and handlebars-layouts)
styleswith Sass (and libsass, autoprefixer & sourcemaps)
iconswith Grunticon for SVG icons
imagesoptimizes images and generates SVG icons with
criticalis used by build to inline critical-path CSS
See http://rough.surge.sh for a demo.
You can either download or clone the project:
If you clone it, remember to remove the .git history (unless you're looking to contribute, of course).
cd roughrm -rf .gitgit init
Finally install the dependencies:
npm install; bower install
That's it. Check the features listed above or dive directly into the
gulpfile.babel.js to see what tasks are available.
It also contains a few, optional features:
And base styles to cover many edge-cases.
We use the Sass preprocessor written in .scss - all tabs, no spaces. All selectors and properties should be on their own lines.
Styles are divided into:
Base styles can not contain any classes. This is the default elements and configuration as colors, layout measures etc.
Layout is your main site layout and grid systems.
Utilities are helpers to build your project. Could be for alignment, spacing or clearfixing etc.
Components are the parts that make up your project. They are based on the 'base', build with 'utilities' and placed into 'layout'. Components can also contain layout. Most components are unique to a project.
We closely follow SUIT's naming convention.
We are using grunticon-cli to handle icons and svg sprites. There's a
gulp icons task that compiles all .svg (and png) images from
.tmp/styles/icons/ that contains all icons as inline images, referenced with a CSS class. It automatically runs when you
gulp serve or
For example, to use a
example-icon.svg icon, you could add an element
<i class="icon icon-example-icon"></i>.
Grunticon includes a
grunticon.loader.js which is referenced in the head of your
index.html. It will load the appropriate sprite method depending on your browser. Don't worry, it works.
app/styles/base/_icons.scss file contains a few base styles to make styling icons easier.
Here's the nuclear method:
rm -rf bower_components node_modules; npm cache clean; bower cache clean; npm install; bower i