Hover.css - A collection of CSS3 powered hover effects

placido — 2014-07-08T13:46:14Z

A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

Voir en ligne : Hover.css - A collection of CSS3 powered hover effects

Compass + Guard + Livereload = :)

placido — 2014-06-04T15:36:54Z

Voici comment déployer (presque rapidement) un environnement Ruby pour bénéficier du compilateur css SASS via Compass et rechargement automatique de la page en fonction des modifications enregistrées, grâce à Livereload, le tout chapeauté par Guard.

Il faut installer gem et bundle au besoin :

sudo apt-get install gem sudo gem install bundle

Ensuite dans le dossier parent du projet on crée un Gemfile

#Gemfile source "http://rubygems.org" group :development do gem 'sass' # Sass. gem 'compass' # Framework built on Sass. gem 'compass-validator' # So you can <code class='spip_code spip_code_inline' dir='ltr'>compass validate</code>. gem 'oily_png' # Faster Compass sprite generation. gem 'css_parser' # Helps <code class='spip_code spip_code_inline' dir='ltr'>compass stats</code> output statistics. gem 'guard' # Guard event handler. gem 'guard-compass' # Compile on sass/scss change. gem 'guard-shell' # Run shell commands. gem 'guard-livereload' # Browser reload. gem 'bootstrap-sass' end

Puis on lance coup sur coup Compass et Guard via Bundle pour initier le projet (ici avec l'option bootstrap-sass)

bundle install bundle exec compass create mon_projet -r bootstrap-sass --using bootstrap

Je copie ici mes fichiers Guardfile et config.rb pour info :

# ~/.guardfile # More info at https://github.com/guard/guard#readme notification :off puts "Using default guard file." group :development do if File.exists?("./config.rb") # Compile on start. puts <code class='spip_code spip_code_inline' dir='ltr'>compass compile --time --quiet</code> # https://github.com/guard/guard-compass guard :compass do watch(%r{(.*)\.s[ac]ss$}) ignore %r{^tmp/} end end # Look for specified files in the current and child directories. # <code class='spip_code spip_code_inline' dir='ltr'>find</code> requires Ruby 1.9 or greater. require 'find' if Find.find(Dir.pwd).detect{|dir|dir=~/.+\.(css|js|html?|php|inc|theme)$/} guard :livereload do watch(%r{.+\.(css|js|html?|php)$}) ignore %r{^tmp/} end end end

#config.rb require 'bootstrap-sass' # Sass options: # http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#options sass_options = Hash.new sass_options[:debug_info] = false css_dir = "dev/css" sass_dir = "dev/css/sass" fonts_dir = "dev/css/fonts" javascripts_dir = "dev/js" images_dir = "dev/css/img" relative_assets = true output_style = (environment == :production ? :compressed : :expanded)

Il reste à installer le module Firefox LiveReload

Avec ça l'environnement doit être prêt et fonctionnel.

On lance Guard via Bundle depuis le dossier parent du projet

bundle exec guard start

Liens vers les ressources utiles
https://github.com/guard/guard-livereload
https://github.com/twbs/bootstrap-sass
https://addons.mozilla.org/en-US/firefox/addon/livereload/
https://gist.github.com/dvessel/1610551

blog.roxing.net

Hover.css - A collection of CSS3 powered hover effects

Compass + Guard + Livereload = :)