https://github.com/ayamflow/patchwork

A gulp-based, npm-oriented boilerplate
https://github.com/ayamflow/patchwork

Last synced: 8 months ago
JSON representation

A gulp-based, npm-oriented boilerplate

• Host: GitHub
• URL: https://github.com/ayamflow/patchwork
• Owner: ayamflow
• License: mit
• Created: 2014-06-18T19:52:12.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2015-02-09T17:28:34.000Z (over 11 years ago)
• Last Synced: 2025-06-08T05:09:40.622Z (about 1 year ago)
• Language: CSS
• Size: 377 KB
• Stars: 18
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
patchwork

=========

Patchwork - 1.1 (Vue v0.11+)

Boilerplate with my usual tools for development of interactive websites.

Breaking changes since v0.2:

- Updated Vue to v0.11.

- Replaced custom router with `v-route` directive, see [repo](https://github.com/ayamflow/vue-route).

- Replaced all window utils with windowsill, see [repo](https://github.com/ayamflow/windowsill).

- Flatter folders/files tree.

- Added some mixins for Vue (loader, [resize](https://github.com/nk-components/vue-resize-mixin), bind).

- Added /static folder for all static stuff (.htaccess, index.html, images...)

- Simple router component if you need specific control that `v-route` doesn't offer (I'm thinking with prototyping in mind and quick hacking).

- Simpler, lighter and more modular structure since it now relies on more external components. Easier to dive in.

- Transitions between pages are now natively handled by `v-route` so no need to extend a custom class.

-------

## Tasks (gulp)

- node-sass (fast compilation)

- browserify + watchify for node-style `require`

- napa and browserify-shim so every dependency comes from npm/github (no bower)

- bourbon neat as grid system

- ...

## Getting started

Cloning, setting git and installing dependencies:

`git clone https://github.com/ayamflow/patchwork.git && cd patchwork && rm -rf .git && git init && npm i`

- `/src/boot` contains the $root VM, containing the routes definition.

The `import.js` allows to configure the different libraries, for instance installing Vue.plugins, setting the default ease for TweenMax...

- `/src/sections` contains the main sections of the website. For subsections and ui components, use `/src/components`.

- `/src/utils` offer some additional utils like browser sniffing, the folder can basically be replaced with lodash + modernizr. It has an additional `debug.js` file containing some flags, and `simple-router.js` which is a light wrapper around page.js, if you need access to a more low-level router.