Cubie

## The little front-end companion

Cubie is an HTML5 starter kit that includes: package and task management, local server with browser synchronization, beautiful auto-generated documentation, styles pre-processor, files minification and images optimisation.

A collection of tools

• Gulp
• Bower
• HTML5 Boilerplate
• LibSass
• Susy
• Breakpoint Sass
• Autoprefixer
• Hologram
• BrowserSync

Requirements

You'll need to have the following items installed before continuing.

• Ruby: Use the installer provided on the website.
• Node.js: Use the installer provided on the NodeJS website.
• Gulp: Run [sudo] npm install --global gulp

Quickstart

Open you terminal, go to the folder: cd [your_path]/frontend-cubie/ And then install the dependencies:

npm install
bower install

While you're working on your project, run:

gulp to generate the pages

And you're set!

Directory Structure

• src/: The sources

• src/index.html: The content of the homepage

• src/assets: Images, fonts, icons...

• src/scripts: Javascripts

• src/styles: SASS files

• app/: The generated pages (overwritten overtime your run gulp)

• app/styleguide: The auto-generated documentation

How to add an icon?

• Start by creating or choosing a vector icon from the Entypo library
• Add the SVG-formatted icon in src/assets/icons/
• Link your icon in the html:

<svg class="icon-{name_of_you_icon}"><use xlink:href="#icon-{name_of_you_icon}"></use></svg>

• Run gulp again

##TODO

• Base grid system?
• HTML mininfied
• Images optimization
• SVG Icons
• Add ModernizR
• Create a Yeoman package generator
• Template system (assemble? handlebars?)
• Browser caching (filerev?)
• Tests (karma?)
• Better documentation

Author

Cubie was made by Pierre Fritsch for We Are Cube.³.

License

Front-end Cubie is licensed under the Apache 2.0 License