Skip to content

README.md

Latest commit

 

History

History
90 lines (82 loc) · 3.46 KB

README.md

File metadata and controls

90 lines (82 loc) · 3.46 KB
Raw

Lake

Single page EcmaScript5 web application skeleton.

AngularJS 1.3, LESS, and Grunt are powerful tools for single page web application development for 2014. This repository shares the skeleton I use to start front end projects. The assets it builds are perfect for usage with Github's Electron. It's also a great starting point for a Parse application.

Prerequisites

  • Node.js
  • Git installed, use 'git --version' to check.
  • Additional commands:
npm install -g grunt-cli

Setup

git clone https://github.com/meanJim/lake.git && cd lake && npm install
grunt      # do this in it's own tab.
node .     # do this in it's own tab.

Use in browser

View localhost:8001 in your browser.

File Organization

root
 |-- build
 |    |-- css
 |    |    +-- styles.js
 |    |-- js
 |    |    |-- client.js
 |    |    +-- client.map
 |    +-- index.html
 |-- client
 |    |-- base
 |    |    |-- angular
 |    |    |    |-- angular-file-name.service.js
 |    |    |    +-- angular-file-name.any-type.js
 |    |    |-- html
 |    |    |    +-- base.template.html
 |    |    |-- styles
 |    |    |    +-- base.styles.less
 |    |    +-- _base.module.js
 |    |-- components
 |    |    |-- component_name
 |    |    |    |-- angular
 |    |    |    |    |-- component_name.controller.js
 |    |    |    |    +-- component_name.directive.js
 |    |    |    |-- html
 |    |    |    |    +-- component_name.partial.html
 |    |    |    |-- styles
 |    |    |    |    +-- component_name.less
 |    |    |    +-- _component_name.module.js
 |    |    |-- _components.module.js
 |    |-- vendor
 |    |    |-- angular
 |    |    |    +-- angular-ui-router.js
 |    |    |-- styles
 |    |    |    |-- lesshat.less
 |    |    |    +-- murtaugh.reset.less
 |    |    +-- _vendor.module.js
 |    |-- client.module.js
 |    +-- routes.config.js
 |-- .gitignore
 |-- gruntfile.js
 |-- package.json
 +-- server.js

Features

  • A setup for an EcmaScript5 project.
  • A front end codebase without dependency on a database.
  • A development CLI command, and a production CLI command provided by Grunt.
  • The assets can be included in any project with any server framework.
  • Minification, cache busting, compressed CSS, and source mapping.
  • Because we use Angular, we are using the closest thing to Web Components in an EcmaScript 5 codebase.
  • The ability to watch file changes and rebuild assets immediately.
  • A HTML5 CSS reset via Tim Murtaugh.
  • A clean file & folder organization, where it is suggested that CSS, HTML, and JS are isolated per abstraction of a component.
  • Flexibility to name files names however you like within the folder structure.
  • Modules to provide a lightweight dependency hierarchy.
  • An UI Router for state and routes.
  • LESS Hat for LESS mixins to avoid manually writing vendor prefixes.

Influencers