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!
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.