mockups-creator v2
A NodeJS App that creates static HTML mockups using Grunt
Introduction
This was built because of my needs to always kickstart a mockup in the fastest way as possible. So, this will bring a very flexible but powerful mockup generator based on various technologies.
What is this?
This is a yeoman-like project. It will help you to kickstar mockups in no-time.
Why do you think this is so special
Because I want to create a platform for independent mockups that doesn't really belongs to some CMS or other technology. This is also different from the simple "static site generator" that you can find elsewhere.
I love to be flexible and indipendent from the platforms. That's why I built this tool.
What does the mockup start template have?
Backend
- Customizable Gruntfile.js.
- Swig Templates ( just like Twig, but for Javascript )
- Template custom data customizable via JSON file ( see app.json file )
- Web Fonts generator ( just place your TTF or OTF fonts in the fonts folder )
- Web Icons generator based on SVG files ( just place them in the icons folder )
- SCSS ( with map files support so you can see from your inspector directly the SCSS file reference )
- Autoprefixing for CSS rules ( this give's you the freedom to not use anymore -webkit-, -moz-, etc. )
- YUI compressor for CSS
- Google Closure Compiler for Javascript
- Auto-rebuild + Live Reload when editing swig, scss or js files
- Static file server. No more depending on Apache, Nginx, etc.
- Auto-update, of NPM packages, once a day on build
Frontend
- jQuery 3.x
- Bootstrap 4.x ( using NPM to keep it aligned with latest updates )
- Fontawesome 4.x ( using NPM to keep it aligned with latest updates )
- Ion Icons 3.x ( using NPM to keep it aligned with latest updates )
- Modernizr + Detectizr
- bootstrap-toolkit media-queries for Javascript
- Default template ( ready for IE10+, Chrome, Firefox, Safari, iOS, Android, etc. ) using the most awesome techniques out there to simplify the work for you :)
Deploy
Output
- TYPO3 extension output with Grunt script for building again all the "opened" files like SCSS, JS, Fonts and Icons
Requirements
To run this you need these binaries to be available in your system
fontforge
( required by grunt-fontgen and grunt-webfont )ttf2eot
( required by grunt-fontgen )batik-ttf2svg
( on OSX ) orttf2svg
( on Linux ) ( required by grunt-fontgen )
To test if they're working just type these names in your terminal and if they're working you're good to go. Otherwise you should look at your OS documentation on how to get these binaries working.
How to use
- Run
npm install
. - Run
grunt make --app=project_name
. - Wait for the cool stuff to be done
- Work inside the app/project_name/ folder that will be created.
- Configure your app/project_name/app.json with the desired values.
- Run one of the commands down below.
-
Normally when you start a project you should use
grunt make --app=project_name
-
While you're developing your mockup, run this task to build the project and watch for changes (usually you run this only once)
grunt build --app=project_name
-
If you want to build in Development mode your mockup but you don't want to watch it for changes
grunt rebuild --app=project_name
-
When you're finished and you're ready to deploy, but want to test it first
grunt build_deploy --app=project_name
-
When you're sure that everything is ok and want to deploy it using
rsync
grunt deploy --app=project_name
-
When you want to output your project as a TYPO3 extension
grunt typo3 --app=project_name
Arguments Reference
--app
is the option that says which app to run based on your chosen task.--customtask
is for custom tasks developed inside your app that doesn't belong to the core mockups-creator tasks.
Directories
reference
_apptpl
folder is used as a starter template when you rungrunt make --app=project_name
task. Everything from this folder will be copied 1:1 to theproject_name
folder that you got from thegrunt make
task.fonts
folder is used when you want to autogenerate webfonts based onttf
orotf
desktop fonts. When you'll place some files here you'll get all known webfonts formats + a CSS file that will be minified with your SCSS file that exists intpl
folder. This will give a big speed boost to work with custom fonts without needing to create the CSS manually or with external tools.icons
folder is used to autogenerate icons for your website based on SVG files. Just put them there and you'll get all the job done automatically. You can simply use them as 'project_name-icon-svgfilename' classes.rsc
folder is used for resources like images, and other things. All the items inside this folder will be copied to the root of youroutput.path
configuration ortypo3.path
configuration.tpl
folder is used for templating your app. Here will live the SCSS, the Swig template files and the Javascript code. Everything inside this folder will be compacted, minified, autoprefixed, etc. by Grunt Tasks._typo3
is used to copy 1:1 to the packaged typo3 extension that will be built using the relative task.
app.json
reference
{
"config" : {
"output" : {
// The output path of your project
"path" : "_release"
},
"livereload" : {
// The livereload port
"port" : 35729,
// The livereload host
"host" : "localhost"
},
"server" : {
// The static server port. -1 means disabled.
"port" : -1
},
"deploy" : {
// The rsync path on the remote server
"path" : "/var/www",
// The rsync host of the remote server
"host" : "localhost"
},
"typo3" : {
// Typo3 main folder where your extension is going to be saved.
// Inside this folder will be created based on your project_name and suffix property below.
"path" : "_typo3ext",
// Suffix to be appended to the project name when creating the folder
"suffix" : "_core"
}
},
// This will be the assets configuration
"assets" : {
// Tells to copy all the found fonts in these paths, in our {output.path}/fonts/ folder
"fonts" : [
"..."
],
// Tells to build/deploy tasks, the resources and their order to be compiled to a singular JS file
"js" : [
"bower_components/...",
"...",
"tpl/js/*.js"
]
},
// Custom template data
"data" : {
"foo" : "bar"
}
}
Basically the config.json
is the same as app.json
and will override its settings.
Moving from v1 to v2
cd app/project_name
(project_name
is your mockup project )mv config.json app.json
and adapt your settings to the new format ( see app.json )mv icons.css tpl/icons.css
- Copy
bower.json
,Gruntfile.js
andpackage.json
toapp/project_name
- Fix the
name
property insidepackage.json
using yourproject_name
npm install
bower install