FireShell, fiercely quick front-end boilerplate and workflows

JavaScript Tagged in JavaScript Sep 15, 2013 1 min read by Todd Motto

Built for the modern developer. For teams and the individual, encouraging a better workflow. JavaScript task running, build processes, autominification and file concatenation, wrapped with an enhanced HTML5 boilerplated framework.

FireShell is something I’ve been working on over the last few weeks, but is the result of years worth of experience and wanting to enhance the workflow for teams and front-end development. FireShell is one little package that does exactly this.

check out the video below for a full overview on getting started with FireShell, or check out the site.

The main three aspects of FireShell include:

HTML5 Boilerplated

A cutting edge take on the HTML5 boilerplate with some HTML5 semantics and WAI-ARIA roles for baseline semantic markup and web accessibility.

Sass OOCSS setup

CSS structure for small projects and scaling big, a fantastic setup to get your Object-Orientated CSS scaling. Ships with fully adaptive folder hierarchies.

Grunt.js

Compiling Sass/SCSS, concatenating JavaScript files, connecting to a localhost server and live file reloads and injection. Auto-minification for production.

Features

  • HTML5 framework, WAI-ARIA roles and HTML5 semantics
  • Baseline HTML5 features, DNS prefetching, responsive meta
  • Encourages one-file CSS/JS in the view (HTML) for performance
  • Includes jQuery CDN and relative fallback
  • Includes Modernizr and HTML5 Shiv
  • Google Universal Analytics snippet
  • Open source workflow with Grunt.js running on Node.js
  • A grunt.command file for double-click command-line execution
  • Automatic Grunt dependency installation, directory relocation and grunt tasks
  • Dynamically appended copyright for JS/CSS
  • Livereloading the browser and file injection upon changes
  • Annotated Gruntfile.js for extending
  • Built-in build script for auto-minification of CSS and JavaScript files for production
  • Pre-setup Sass/SCSS files and folders for baseline project structure and imports
  • Includes .editorconfig for consistent coding styles in IDEs
  • Standard .gitignore to ignore minified files and standard ignorables such as .DS_Store
  • JSHint .jshintrc file for configuring JavaScript linting
  • No superfluous code comments
Angular Online Courses Angular shields
Ultimate Angular

Learn Angular the right way

Join my online courses to fully master Angular, TypeScript and NGRX.

Explore Courses Navigation arrow