FireShell, fiercely quick front-end boilerplate and workflows blog post

FireShell, fiercely quick front-end boilerplate and workflows

Todd Motto

15 Sep, 2013

2 minutes read

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.


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


  • 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

About the author

Todd Motto

GDE Google Developer Expert

Todd is the Founder of Ultimate Courses. With a passion for Angular, TypeScript and JavaScript, Todd leads the online courses creation and has written hundreds of articles on front-end web development and beyond. He specialises in breaking down complex topics and understands the critical mission of learning new technology fast, comprehensively and the right way.

Love the post? Share it!

Lots of time and effort go into all our blogs, resources and demos,
we'd love it if you'd spare a moment to share them!

Explore our JavaScript courses

Get started today and join over 50,000 developers.