Hey troops, just starting out as a web designer / developer? Have we got the thing for you! What is it you may ask? Well, 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!
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.”
- 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.”
- 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.”
- Moustache – “Logic-less templates.”
- Handlebars – “Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.”
- 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
- 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.”
- CodeKit – “CodeKit helps you build websites faster and better.”
- 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.”
Well that about wraps it up for the front end. Remember to stay tuned for Part 2:
Okay guys, have fun!
Curious Craig McNamara
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.