A yeoman generator for scaffolding responsive multipages webapps and websites.
Yeoman generator available on NPM
npm install -g generator-wormhole
yo wormhole
https://www.npmjs.org/package/generator-wormhole
Wormhole comes with grunt to minify, concat, then uglify your scripts.
Wormhole comes with compass to help you styling things faster.
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
Put here all images files: .png
, .jpg
, .jpeg
, wallpapers etc.
icon.png
home-background.jpeg
userAvatar.jpg
This folder contains all .js
files, organized in subfolders as following:
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
.
home.js
user-registration.js
user-login.js
Put here all javascript libraries.
jquery-latest.js
angular.js
googleAnalytics.js
Put here all javascript and jquery plugins.
jquery.fancyInput.js
jquery.tooltips.js
animate.js
customHomePagePlugin.js
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
.
home-animations.js
user-registration.js
user-login.js
site-animations.js
Contains all generated css
files from main scss
files. For example home.scss
will generate the corresponding home.css
file in this folder.
Put here all css libraries.
_normalize.scss
_reset.scss
_animate.scss
Put here all css necessary to make javascript libraries work.
_jquery.fancyInput.scss
- ```_jquery.tooltips.scss````
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)
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
- 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
andscss\layouts\userLogin
- Put into these folders the same files listed up above:
_all.scss
,_phablets.scss
,_tablets.scss
,_desktops.scss
,_desktop-large.scss
and_retina.scss
. - 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
Just install it by command line and explore __example
folder.
Based on timewarp https://github.com/mcarella/timewarp