Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Do you have a plan?
  1. Your environment
  2. Text editor
  3. CSS Hat
  4. SASS
  5. Tweaks
  6. CSS 3 animation
Which kind of OS do you prefer?
  1. Windows
  2. Mac OS
  3. Linux
Which kind of text editors do you like?
  1. Sublime
  2. VIM
  3. Notepad++
Do you know about Hot Keys or you prefer ZEN Coding?
  1. Snippets
  2. Emmet
  3. Do it the best Hayaku
How can you save your time?


How it works you can find here

How to make CSS more intelligent?


How to install it?
gem install sass
mv style.css style.scss
sass --watch style.scss:style.css
$page-width:    800px;
$sidebar-width: 200px;
$primary-color: #eeeeee;

#contents {
  width: $page-width;
  #sidebar {
    float: right;
    width: $sidebar-width;
  #main {
    width: $page-width - $sidebar-width;
    background: $primary-color;
    h2 { color: blue; }
What we will have after?
#contents {
  width: 800px; }
  #contents #sidebar {
    float: right;
    width: 200px; }
  #contents #main {
    width: 600px;
    background: #eeeeee; }
    #contents #main h2 {
      color: blue; }
Get me more features
@import "my-icons/*.png";

.actions {
  .new    { @include my-icons-sprite(new);    }
  .edit   { @include my-icons-sprite(edit);   }
  .save   { @include my-icons-sprite(save);   }
  .delete { @include my-icons-sprite(delete); }
.actions .new,
.actions .edit,
.actions .save,
.actions .delete { 
	background: url('/images/my-icons-s34fe0604ab.png') 
			no-repeat; }

.actions .new    { background-position: 0 -64px; }
.actions .edit   { background-position: 0 -32px; }
.actions .save   { background-position: 0 -96px; }
.actions .delete { background-position: 0 0;     }
How will I do animations?
Where I can use it? Login forms!
Animated Buttons!
Animated menus!
JS and CSS3 animation&transition? Click and move

Use a spacebar or arrow keys to navigate