Stefan Imhoff kogakure

## SassMeister-input-HTML.html
<div class='holder'>
 <div class='block-a'>A</div>
 <div class='block-b'>b</div>
</div>

## Gruntfile.js
'use strict';

module.exports = function(grunt) {

    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);


    // configurable paths
    var paths = {

## gist:8647357
/* http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

## optimize.sh
#!/bin/sh

# script for optimizing images in a directory (recursive)
# pngcrush & jpegtran settings from:
# http://developer.yahoo.com/performance/rules.html#opt_images

# pngcrush
for png in `find $1 -iname "*.png"`; do
    echo "crushing $png ..."
    pngcrush -rem alla -reduce -brute "$png" temp.png

## bootstrap_glyphs_in_rails.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                kogakure
                / bootstrap_glyphs_in_rails.md
            
            
              Created
              December 16, 2013 15:22
                — forked from iamatypeofwalrus/bootstrap_glyphs_in_rails.md
            
          
    What

Bootstrap 3.0 gives you access to the awesome icon set icon set by these dudes but it's not obvious for a Rails newbie like myself to get it all working together nicely
How


Download the bootstrap-glyphicons.css from here. Save that file to RAILS_ROOT/vendor/assets/stylesheet/bootstrap-glyphicons.css
Save all the font files in /dist/fonts from the Bootstrap 3.0 download to a new folder in your Rails app RAILS_ROOT/vendor/assets/fonts
Add this folder to the asset pipeline by appending config.assets.paths << Rails.root.join("vendor","assets", "fonts") to application.rb after the line that has class Application < Rails::Application.
In bootstrap-glyphicons.css modify the the url paths in @font-face to read /assets/FILE_NAME instead of `.


## dabblet.css
/**
 * (C)Leanest CSS spinner ever
 */

@keyframes spin {
	to { transform: rotate(1turn); }
}

.progress {
	position: relative;

## inline-quotes-example.html
<!DOCTYPE html>
<html lang="de">
  <!-- On the html element -->
  <head>
    <title>Quote-Demo</title>
  </head>
  <body>
    <!-- or on another element -->
    <p lang="de">Luke führte weiter aus, <q>Und sie nannte ihn einen <q>total blöd-aussehenen Idioten</q>! Ich denke ich habe eine Chance!</q> Dieser arme Idiot …</p>
    <p lang="en">Luke conntinued, <q>And the she called him a <q>scruffy-looking nerf-herder</q>! I think I’ve got a chance!</q> The poor naive fool …</p>

## gist:6822967
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: none;
  }
}

## gist:6726031
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px) {
}

## gist:6595093
<div class="img-container">
<img src="http://cdn3.spiegel.de/images/image-545702-breitwandaufmacher-penw.jpg">
</div>
	<div class='holder'>
	<div class='block-a'>A</div>
	<div class='block-b'>b</div>
	</div>
	'use strict';

	module.exports = function(grunt) {

	// load all grunt tasks
	require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);


	// configurable paths
	var paths = {
	/* http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
	.element {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	}
	#!/bin/sh

	# script for optimizing images in a directory (recursive)
	# pngcrush & jpegtran settings from:
	# http://developer.yahoo.com/performance/rules.html#opt_images

	# pngcrush
	for png in `find $1 -iname "*.png"`; do
	echo "crushing $png ..."
	pngcrush -rem alla -reduce -brute "$png" temp.png
	/**
	* (C)Leanest CSS spinner ever
	*/

	@keyframes spin {
	to { transform: rotate(1turn); }
	}

	.progress {
	position: relative;
	<!DOCTYPE html>
	<html lang="de">
	<!-- On the html element -->
	<head>
	<title>Quote-Demo</title>
	</head>
	<body>
	<!-- or on another element -->
	<p lang="de">Luke führte weiter aus, <q>Und sie nannte ihn einen <q>total blöd-aussehenen Idioten</q>! Ich denke ich habe eine Chance!</q> Dieser arme Idiot …</p>
	<p lang="en">Luke conntinued, <q>And the she called him a <q>scruffy-looking nerf-herder</q>! I think I’ve got a chance!</q> The poor naive fool …</p>
	@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
	-webkit-text-size-adjust: none;
	}
	}
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width: 320px)
	and (max-device-width: 480px) {
	}

	/* Smartphones (landscape) ----------- */
	@media only screen
	and (min-width: 321px) {
	}
	<div class="img-container">
	<img src="http://cdn3.spiegel.de/images/image-545702-breitwandaufmacher-penw.jpg">
	</div>