Lime-Topcoder

This repository uses Jade, SCSS, CoffeeScript, Angular, and Grunt.

Installation

If you don't have compass installed run the following:

Windows - gem install compass
Linux/OS X - sudo gem install compass

Install dependencies by running the following in the root of the project:

npm install
bower install

Build & Development

To run locally without minification: grunt serve
To build dist folder
dev: grunt build-dev
qa: grunt build-qa
prod: grunt build
To serve builds
dev: grunt serve:dev
qa: grunt serve:qa
prod: grunt serve:prod

Testing

Running grunt test will run the unit tests with karma.

Contributing

Pull Requests

To contribute to the repository, please create a feature branch off of the dev branch. Once you're finished working on the feature, make a pull request to merge it into dev. Then, delete the branch when it's no longer used.

Quick Description of Key Files and Folders

app.coffee - where our Angular app is created
app.constants.coffee - created from the Gruntfile's ngconstant task. Add constants to the Gruntfile.
app.routes.coffee - UI-Router states
index.jade - contains the header, content (ui-view), and footer
Content folder - contains CSS, Fonts, Images, and Locales, and Scripts (Non-Bower JavaScript files)

Adding new content

Bower JS/CSS Files

Make sure to add new bower files to index.jade

Jade Files

Use landing.jade and index.jade as a guide for syntax
You (usually) don't need to write the div tag

SCSS Files

Add new files to index.jade
Use SCSS syntax (nesting)
Use variables and mixins as much as possible
Store new variables and mixins in the appropriate file in app/content/css/partials
Use landing.scss as a guide

CoffeeScript

Add new files to index.jade
Use other coffee files in the repository as a guide. When in doubt, check our AngularJS style guide

Creating New Views/Pages

To add a new page, create a folder in the app directory and a new state in app.routes.coffee
Name the new folder the same as the state name
In order to keep the SCSS files modular, a class is automatically added with the name of the state to the ui-view div in index.jade. For example, if you create a new /feature1 state and navigate there, the div with the content will look like this: <div class="view-container feature1">. This allows you to have your own feature1.scss file. Use the landing.scss file as an example, where you can see how all the styles are nested in .landing.

topcoder-archive/appirio_tech-ap-lime-topcoder

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases 9

Packages 0

Contributors 8

Languages

Error
Looks like something went wrong!

Packages