generator-one-pager

Generator One Pager

A Yeoman generator for quickly scaffolding a static one page website. Useful for things like landing pages and coming soon pages.

Dependencies

• Yeoman: npm install -g yo
• Grunt: npm install -g grunt-cli

Installation

To install and use this generator simply run npm install -g generator-one-pager.

Usage

Running this generator is as easy as typing yo one-pager.

It has plenty of options to get the build to your taste, but all versions use Jade as the html templating engine.

Included

These libraries/extensions/tasks are included in every build.

• Modernizr
• SCSS
• Autoprefixer
• Normalize.css
• Imagemin
• JSHint
• Livereload

Options

The options which can be turned on or off are:

• Using Compass
• Using Foundation
• Using jQuery
• Using Outdated Browser
• Using Google Analytics

Project Structure

The Structure of this app is a a little opinionated to my current workflow but currently looks like this:

one-pager
|-- dist
|-- src
|   |-- index.jade
|   |-- images
|       |-- yo.png
|   |-- js
|       |-- scripts.js
|   |-- partials
|       |-- _header.jade
|   |-- scss
|       |-- components
|           |-- _footer.scss
|           |-- _global.scss
|           |-- _manifest.scss
|           |-- _navbar.scss
|           |-- _typography.scss
|           |-- _variables.scss
|       |-- pages
|           |-- index
|               |-- _content.scss
|               |-- _manifest.scss
|           |-- _manifest.scss
|       |-- vendor
|           |-- _manifest.scss
|           |-- _normalize.scss
|       |-- styles.scss

SCSS Structure

Currently one-pager is set up to use the manifest pattern, where every section of the scss structure is broken up semantically and all can be imported at once by simply importing the manifest file in every directory.

Note

This is the first generator I've built and as such mistakes are expected, any feedback would be appreciated.

License

MIT License