Getting Started

What you'll need to get going

Awesomeness provides a lot of cool tools but you'll have to connect the dots yourself. We'll try to provide all the necessary information on this page but it might be useful to read some documentation and tutorials related to each tool (i. e. Sass/Compass, Susy, RequireJS, etc.).

Requirements

Due to its nature of being a design and development framework, Awesomeness does not work out of the box. It heavily relies on other tools and frameworks and combines them to provide great flexibility and power.

Ruby

If you're a Mac user it's easy — Ruby is already installed on your machine. If you happen to be using Windows, please go to the Ruby download page, where you can find an installer and further instructions on how to proceed.

Ruby Gems

Awesomeness is built upon Sass and Compass and uses the Susy grid framework for layouting and normalize.css to softly reset browser default CSS. Hence you need to install the following gems: sass, compass, compass-normalize, susy and breakpoint.

Simply fire up Terminal (or Command Prompt on Windows) and type in this command:

How To

Instantly work with Awesomeness

Install the awesomeness generator. This command will set up your Awesomeness project for you. As you install this npm package globally, you will have to use the prefix sudo prompting you for your computer's administrator password.

$ sudo npm install -g generator-awesomeness

Create a new directory for your project

$ mkdir my-new-project && cd $_

Run the generator

$ yo awesomeness

Run grunt and start building great things! This will automatically open a new browser window that updates as you make changes to your project. Neat!

$ grunt serve

Import Static Components

Create a <custom-name>.html HTML page, add the component code to it, for example

<div class="msg">
Content
</div>

Add a <custom-name>.scss Sass file and import base styles and the component like so

Attention

The Button Dropdown component is special. There is no init method. You just have to require the component in your JavaScript and it will initialize itself.

Build your application

At some point you might want to lift your application from a development to a production stage in order to improve performance and upload it to a live server. Grunt can do the heavylifting, building the app, removing all unnecessary files and concatenating & minifying JavaScript and CSS.

When you're ready to build your application just run

$ grunt build

Grunt will compile the optimized application to the directory /dist/

Attention

You have to define new modules for RequireJS in your Gruntfile.js. There you must include the JavaScript modules which need to be available in production stage, like so:

Awesomeness

Awesomeness is a mobile-first framework that uses sass and compass to allow building fast responsive websites. We designed this framework for modern browsers and include many helpful modules that use current technologies to make styling your own site or application fun and easy. Awesomeness is available under the MIT license.

intuio

Established in 2008, intuio is a consultancy and design studio based in Vienna, Austria. Our team has extensive international project experience through working with organisations like NASA, London Metropolitan Police, Lufthansa, A1 Telekom Austria and many more.