WORMHOLE

A yeoman generator for scaffolding responsive multipages webapps and websites.

SIMPLE USAGE

npm install -g generator-wormhole

yo wormhole

FOLDERS TREE

project
    \css
    \imgs
    \js
        \controllers
            pageOne.js
            pageTwo.js
        \libs
            angular.js
            jquery.js
            analytics.js
        \plugins
            jquery.tooltip.js
            textResize.js
            formValidation.js
        \views
            pageOne.js
            pageTwo.js
    \scss
        \framework
            _core.scss
            _forms.scss
            _input.scss
            _mixins.scss
            _variables.scss
        \layouts
            _all.scss
            _phablets.scss
            _tablets.scss
            _desktop.scss
            _desktop-large.scss
            _retina.scss

            \pageOne
                _all.scss
                _phablets.scss
                _tablets.scss
                _desktop.scss
                _desktop-large.scss
                _retina.scss

            \pageTwo
                _all.scss
                _phablets.scss
                _tablets.scss
                _desktop.scss
                _desktop-large.scss
                _retina.scss
        \libs
            _animate.scss
            _normalize.scss
            _reset.scss
        \plugins
            _jquery.tooltip.scss
            _jquery.fancyInput.scss

FOLDERS EXPLANATION

imgs

Put here all images files: .png , .jpg , .jpeg , wallpapers etc.

  EXAMPLE

• icon.png
• home-background.jpeg
• userAvatar.jpg

js

This folder contains all .js files, organized in subfolders as following:

\ controllers

Put here all angular controllers, each one with the same name of the corresponding view. For example if your home.html needs an angular controller, create a file like this: project\js\controllers\home.js.

EXAMPLE

• home.js
• user-registration.js
• user-login.js

\ libs

Put here all javascript libraries.

EXAMPLE

• jquery-latest.js
• angular.js
• googleAnalytics.js

\ plugins

Put here all javascript and jquery plugins.

EXAMPLE

• jquery.fancyInput.js
• jquery.tooltips.js
• animate.js
• customHomePagePlugin.js

\ views

Put here all presentational stuff. Each file must have the same name of the corresponding view. For example if your home.html needs some effects, stuff, and plugins initializazion create a file like this: project\js\views\home.js, that has is own document ready.

EXAMPLE

• home-animations.js
• user-registration.js
• user-login.js
• site-animations.js

css

Contains all generated css files from main scss files. For example home.scss will generate the corresponding home.css file in this folder.

scss

\ libs

Put here all css libraries.

EXAMPLE

• _normalize.scss
• _reset.scss
• _animate.scss

\ plugins

Put here all css necessary to make javascript libraries work.

EXAMPLE

• _jquery.fancyInput.scss
• ```_jquery.tooltips.scss````

\ framework

In this directory, will be scss files shared across all project pages.

THE FOLDER IS ORGANIZED AS FOLLOWING

• _variables.scss (project variables declaration — colors, spacings, etc.)
• _mixins.scss (project mixin declaration — typography, clearfix, animations, etc.)
• _forms.scss (custom form styling & reset)
• _input.scss (custom input styling & reset)

\ layouts

Files in this directory are organized in that way to cover all screens resolutions, following a mobile first principle. So, you should start declaring your own styles using _all.scss file. Rules declared in this file are valid for all screen sizes and all views. If you want your website to be adaptable, than just rewrite rules declared for any other screen resolution.

THE FOLDER IS ORGANIZED AS FOLLOWING

• phablets (481up) _phablets.scss
• tablets and small laptops (768up) _tablets.scss
• desktops (1030up) _desktop.scss
• desktops with large screens (1204up) _desktop-large.scss
• retina displays exceptions (@2x) _retina.scss

These files will handle layout exceptions and are called by mediaqueries.

  Please note: those files are shared across all views (html pages). That's why you need to create a new folder under scss\layouts to give specific style to a specific page.

EXAMPLE - you want to style a responsive home page and a responsive user-login page

1. Create under scss\layouts a new folder naming it with the same name of the views you want make adaptive (ex. home and userLogin) so: scss\layouts\home and scss\layouts\userLogin
2. Put into these folders the same files listed up above: _all.scss , _phablets.scss , _tablets.scss , _desktops.scss , _desktop-large.scss and _retina.scss.
3. The final result will be as follow

project
    \scss
        \framework
        \layouts
            _all.scss
            _phablets.scss
            _tablets.scss
            _desktop.scss
            _desktop-large.scss
            _retina.scss

            \home
                _all.scss
                _phablets.scss
                _tablets.scss
                _desktop.scss
                _desktop-large.scss
                _retina.scss

            \userLogin
                _all.scss
                _phablets.scss
                _tablets.scss
                _desktop.scss
                _desktop-large.scss
                _retina.scss
        \libs
        \plugins

SEE IT IN ACTION

Just install it by command line and explore __example folder.