https://github.com/laras126/angular-wireframes

A set up for content reference wireframes in AngularJS.
https://github.com/laras126/angular-wireframes

Last synced: 2 days ago
JSON representation

A set up for content reference wireframes in AngularJS.

• Host: GitHub
• URL: https://github.com/laras126/angular-wireframes
• Owner: laras126
• Created: 2014-10-07T14:39:03.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2014-10-08T15:31:36.000Z (about 10 years ago)
• Last Synced: 2024-11-09T03:08:03.363Z (about 2 months ago)
• Language: CSS
• Homepage: http://dijifi-wireframes.herokuapp.com/
• Size: 246 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Wireframing with AngularJS

This is a site setup for HTML wireframes. Each view has associated JSON files for storing demo content. Intended for static-ish business brochure sites.

There are very, very few styles - the layout is based on [Brad Frost's HTML wireframes](bradfrostweb.com/blog/post/html-wireframes/) for the Food Bank project, and the concept comes from Stephen Hay's "content reference wireframes" in his RWD workflow - nice write up by Brad Frost [here](http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/) (what would we do without him?!).

Good stuff! The repo is currently set up for one of my projects, the redoing of [dijifi.com](http://dijifi.com), hopefully the structure will be similar to something you are working on.

The wireframes for that project are [here, on Heroku](http://dijifi-wireframes.herokuapp.com/).

### What's here?

The project was started with the [Yoeman Angular App generator](http://yeoman.io/codelab.html), so all technologies are what's included with that - Grunt, Bower, Sass, et al.

It also includes the Bootstrap grid for easy layout work (but don't do any layout until later! Mobile first, baby!).

### How to use it

No guarantee this will work out of the box, and these are probably vague instructions, but here's the gist:

1. ```npm install```

2. ```bower install```

3. ```grunt serve```

4. Adjust the naming of the views and controllers to your liking

5. Add your own JSON test data

6. Adjust the templates to correlate with that data

Note that in order to deploy on Heroku, you need to track the dist/ directory - not ideal, but based on my Google findings, that's the case.

### Enjoy!