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?

CSS Hat

http://csshat.com/

How it works you can find here

How to make CSS more intelligent?

SASS

http://sass-lang.com/

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); }
}
	
.my-icons-sprite,
.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?
CSS3
Animation
CSS3
Transition
CSS3
unsupport
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