uxd_frontend: A CSS repository from prokhatskiy

##UXD_frontend##

The project building framework for UXD-group

###Getting started### To use the framework you need a task manager [Grunt] (http://gruntjs.com/) to be installed on your computer. Grunt and Grunt plugins are installed and managed via [npm] (https://www.npmjs.org/), the [Node.js] (http://nodejs.org/) package manager.
In order to get started, you need to install Grunt's command line interface (CLI) globally. (You may need to use sudo or run your command shell as Administrator to do this)

npm install -g grunt-cli

The job of the Grunt CLI is to run the version of Grunt which has been installed next to a Gruntfile in the the project folder.

Also a package manager [Bower] (http://bower.io/) is requied. It's installed globally using npm:

npm install -g bower

Bower runs over [Git] (http://git-scm.com/), thus make sure that Git is installed too.

###Preparing a new project### To start building a new project, copy [uxd frontend] (https://github.com/prokhatskiy/uxd_frontend) repository files to your project’s folder. Change to the project's root directory at the command line and run

npm install

This will install the correct version of Grunt and the Grunt plugins listed as [devDependencies] (https://www.npmjs.org/doc/json.html#devDependencies) in the package.json file. When you need to add Grunt plugins or other node modules to your project run

npm install <module> --save-dev

This will install <module> locally as well as automatically add it to the devDependencies section in the package.json file.

To install all the packages, listed as dependencies in bower.json run

bower install

The path for installation is set in .bowerrc

The Gruntfile.js belongs in the project root directory next to the package.json and is used to configure or define tasks and load Grunt plugins. At the command line run

grunt

Running grunt at the command line will run the default tasks listed in Gruntfile. When running grunt command for the first time, the build task creates a build folder, where release project version will be located. Dev-version of the project is in the folder named sourse.

####Assemble and Handlebars.js#### The most popular site generator for Grunt.js, [Assemble] (http://assemble.io/), is used in this framework. It allows to carve HTML code up into reusable fragments ([partials] (http://assemble.io/docs/options-partials.html)) and to use [layouts] (http://assemble.io/docs/options-layout.html) to wrap your pages with commonly used elements and content. Assemble uses [Handlebars.js] (http://handlebarsjs.com/) as a template system. Handlebars templates look like regular HTML, with embedded handlebars expressions. A handlebars expression is a {{, some contents, followed by a }}. In order to insert partials into your code you should use a symbol >:

{{> file_name }}

There are two special directories in a sourse folder – layout and blocks. You can store templates of reusable site fragments (such as buttons, inputs, logo etc.) in a blocks directory. In a layout directory there is a default_layout.hbs file, where <DOCTYPE>, <html> tags and <head> section of all pages are described. In this file you can also find a unique tag {{> body }}, which links the template index.hbs. Although layouts are optional, the {{> body }} tag is required for content to be pulled into a layout. You should also save all templates of commonly used page structures or sections in a layout folder.

Handlebars.js allows us to use data, stored in JSON files. To refer to a required variable you may use a simple path

{{variable}}

or a nested path (with dot notation)

{{file_name.variable}}

You can create new JSON files and save them in a data folder (in the project root), which is set as target for all templates in Gruntfile. Global variables are located in a config folder.

####Stylus#### [Stylus] (http://learnboost.github.io/stylus/) is used as a CSS-preprocessor. stylus task in Gruntfile initialize the conversation of two files main.styl and block.styl into CSS-files, which are then concatenated into the final file – styles.css. All compiled CSS-files are stored in release-folder build/css. main.styl is located in the dev-folder sourse/css and contains all general styles as well as imported layout, normalize and state styles.
block.styl is a file that picks together the code of all separate blocks (i.e. styles for partial templates). When creating a new partial you should first create appropriate folder with a handlebar template and a stylus file in it. Then it is necessary to add this file to a block.styl

@import 'folder_name/file_name';