Hey troops, just starting out as a web designer / developer? We here at Design Pieces decided to scour the 2013 interwebs, searching for all the for all the key web design/development terms being bandied about. Oh, and then we wrote them down just for you!
So lets start at the very beginning, a very good place to start, with ‘Part 1: The Front End’. All the terms you might hear about front end web development. CSS Frameworks, Javascript MVCs, templating solutions, they are all here. Now keep in mind, no one uses everyone one of these technologies. No one. This is just to give you an idea of what’s out there. So don’t stress, and enjoy.
Front End CSS Frameworks
- 960gs – “The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.”
- Foundation – “Foundation is the most advanced front-end framework in the world. Foundation 3 is built with Sass, a powerful CSS preprocessor.”
- Twitter Bootstrap – “A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.”
- HTML5 Boilerplate – “HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.”
- CSSGrid 1140px – “The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.”
- inuit.css – “a powerful, scalable, Sass-based, BEM, OOCSS framework.”
Javascript Frameworks
- jQuery – “jQuery is a fast, small, and feature-rich JavaScript library for DOM manipulation.”
- jQuery UI – “jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.”
- Ext Core – “Ext Core is a JavaScript Library for enhancing websites.”
- Underscore – “Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.”
- Closure Library – “The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library.”
Javascript MVC
- Ember.JS – “A JavaScript framework for creating ambitious web applications.”
- Backbone.JS – “Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.”
- AngularJS – “AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!.”
Templates
- Moustache – “Logic-less templates.”
- Handlebars – “Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.”
- Underscore – “Compiles JavaScript templates into functions that can be evaluated for rendering.”
- {dust} – “Dust is a JavaScript templating engine designed to provide a clean separation between presentation and logic without sacrificing ease of use.”
- Closure Templates – “Closure Templates are a client- and server-side templating system that helps you dynamically build reusable HTML and UI elements.”
Front End Compilers
CSS
- Less – “LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).”
- Sass – “Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.”
- Closure Stylesheets – “Closure Stylesheets is an extension to CSS that adds variables, functions, conditionals, and mixins to standard CSS. The tool also supports minification, linting, RTL flipping, and CSS class renaming.”
Javascript
- Coffeescript – “CoffeeScript is a little language that compiles into JavaScript. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.”
- Closure Compiler – “The Closure Compiler parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.”
App
- CodeKit – “CodeKit helps you build websites faster and better.”
Fonts
- Google Fonts – “Hundreds of free, open-source fonts optimized for the web.”
- Typekit – “Add a line of code to your pages and choose from hundreds of web fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.”
- FontSquirrel – “Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We’ve done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format.”
Conclusion
Well that about wraps it up for the front end. Remember to stay tuned for Part 2: Electric Boogaloo The Back End. And to all the diligent designers out there, who feel we missed something out, let us know in the comments below. My guess is its probably a Javascript MVC framework. The world really needs another one of those 😛
Okay guys, have fun!
Curious Craig McNamara
Special Thanks
A McNamara always pays his debts, so I’d just like to give a quick shout out to skilful @simultech on Twitter for helping the folks over here at Design Pieces with this article.
