generator-des-responsive-framework v1.2.0

generator-des-responsive-framework

Introduction

This is the Yeoman Generator for the eSolutions Responsive Framework. It will scaffold out a project structure for you and install a number of useful tools, so that you can skip the setup process and start developing!

Current Version

v1.2.0

Installation

Install the Generator

First you will need to install the Responsive Framework Yeoman Generator from npm:

$npm install -g generator-des-responsive-framework

*Note that if you get an error you may need to run this command as administrator (Windows) or using sudo (Mac)

Run the Generator

Initiate the generator in the desired location in your development environment. This will ideally be an empty folder. If you are going to maintain your project using git, then it is recommended that you setup your repository and clone it to your development environment before initiating the generator:

$yo des-responsive-framework

Wait a moment while Yeoman scaffolds your project...

Compiling the Project

Once the generator has finished run Grunt to compile your project:

$grunt

This will a generate a /dist folder that will include your compiled files for distribution (CSS, JS, HTML and libraries etc.).

Now you're ready to start developing!

What You Get

The generator will install, create and prefill a number of files for you including:

• Working files: A development structure will be created including basic files to start development
• Dependencies: bower and npm will install all project dependencies including the Responsive Framework automatically
• Configuration files: bower.json, .gitignore, .jshintrc, .jscsrc, package.json and README.md will all be created and prefilled. You will probably still need to edit the package.json and README.md files manually
• Grunt File: A working Gruntfile.js will be created to build your project.

Developing

Development Structure

Do all your dev work out of the /app folder. You'll notice that there is a predefined folder structure:

app/
    ├── html/
    ├── img/
    ├── js/
    │   └── main.js
    └── less/
        └── app.less

You are free to add new subfolders and files to this environment, but to avoid edits to the Gruntfile.js it is recommended that you maintain the same top level structure.

Development Files

Less

The app.less file is compiled to generate your CSS. You can therefore do all your styling within this file directly, or create any number of additional files and import them into this one.

JS

All files in the /js folder are compiled into one file for distribution. You can therefore add scripts to the main.js file directly, or create any number of additional files as desired.

HTML and Images

All HTML and images located in the /html and /img folders respectively will be copied into the distribution folder. The structure of these respective folders will be emulated in the distribution environment.

Grunt Tasks

Grunt is used to compile your project. There are a range of different Grunt tasks that you can call. Please refer to the Responsive Framework documentation for a full list of tasks.

Feature Requests and Bugs

Please send issues to timothy.randall@deakin.edu.au until the project is properly set up in JIRA.

Contributing

Contributions to the project are encouraged. Please create a branch of the project and create a pull request to submit your changes for review. When creating the pull request you must clearly explain what you have changed and why.

Copyright and License

All code and documentation is copyright Deakin University and released under the Creative Commons 4.0 License.

Creators

Created and maintained by the Channels and Platforms team, Deakin eSolutions.

Changelog

• v1.2.0 -
  • Added LICENSE and CONTACT files to generator
  • Prompts have been added to the generator to fill in CONTACT file
  • Bower now downloads the latest minor version of the des-responsive-framework to prevent potential conflicts and errors from updates
  • The generated Gruntfile now has a separate 'publish' task that cleans the 'dist' folder and then builds the project. All other 'clean' tasks have been removed as it was annoying to have it always run
  • Replaced 'grunt-autoprefixer' in the generated Gruntfile as it has been superseded. Now using 'postcss' instead
  • Removed html minification from the generated Gruntfile because it is unnecessary and kind of annoying
  • Deakin logos have been removed from the generator and are now copied from the des-responsive-framework downloaded from bower. A placeholder image has been placed into the 'img' folder to ensure that the folder is still created
  • Updated the index.html template with new navbar from des-responsive-framework v1.2.0. Simplified this page to only include basic screen elements rather than every component, in order to reduce maintenance load
  • Updated the Gruntfile to include 'underscore.js' as part of the 'bowercopy' task
  • Updated repo URL and author name.
• v1.1.1 - Added missing underscore.string package to dependency listing to prevent a crash.

• v1.1.0 -

  • Moved dev files into '/app' folder
  • A number of template and configuration files are now setup as part of the generator
  • Numerous improvements to Gruntfile.js and the structure of the generated '/dist' folder
  • Better support for Windows machines
  • Updated Responsive Framework version.

• v1.0.0 - Initial Release.