Skip to content

Instantly share code, notes, and snippets.

View renatocarvalho's full-sized avatar
💭
🤘✨

Renato Carvalho renatocarvalho

💭
🤘✨
View GitHub Profile
<!doctype html>
<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->
<html>
<head>
<title>iOS 8 web app</title>
<!-- CONFIGURATION -->
@renatocarvalho
renatocarvalho / mobile-meta-links.html
Created April 24, 2012 04:13
iOS Web App Configuration
@liamcurry
liamcurry / gist:2597326
Created May 4, 2012 19:56
Vanilla JS vs jQuery

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})
@micahgodbolt
micahgodbolt / gist:2936775
Created June 15, 2012 14:36
Proposed Susy syntax to create "The Fonmon" asymmetric grid layout
//Proposed Susy syntax to create "The Fonmon" asymmetric grid layout. http://gridsetapp.com/specs/fonmon.php?gridset=show
$total-columns: 5;
$column-width: 200px, 96px, 96px, 96px, 200px;
// could use relative units: 1, 1 would be 50/50%. 1, 2 would be 33/66%, 1, 1, 1 would be 33/33/33%
$columns: column padding, column padding, column padding, column padding, …; //suggested multi dimensional syntax
$gutter-width: 30px;
@dfadler
dfadler / get-sprite.sass
Created July 13, 2012 15:05
A SASS mixin for generating a sprite declaration block that will work with media queries
// http://compass-style.org/reference/compass/helpers/sprites/
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true)
//http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
$sprite-image: sprite-file($map, $sprite)
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-url
$sprite-map: sprite-url($map)
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-position
@ls-lukebowerman
ls-lukebowerman / sitemap.xml.erb
Created August 7, 2012 17:59
Sitemap (sitemaps.org) generator for Middleman
<% pages = sitemap.resources.find_all{|p| p.source_file.match(/\.html/) } %>
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<% pages.each do |p| %>
<url>
<loc>http://youdomain.com/<%=p.destination_path.gsub('/index.html','')%></loc>
<priority>0.7</priority>
</url>
<% end %>
</urlset>
@julioprotzek
julioprotzek / template.rb
Created October 8, 2012 14:39
Startaê Bootstrap
remove_file 'Gemfile'
create_file 'Gemfile'
add_source "http://rubygems.org"
gem 'rails', '~> 3.2.8'
gem 'jquery-rails'
if yes?('PostgreSQL on development?')
gem 'pg'
@markbrown4
markbrown4 / retina.sprite.scss
Created October 12, 2012 05:57
retina sprite mixin with Compass
@mixin icon-sprite-2x($sprite) {
$sprites: sprite-map("icon/*.png");
text-indent: -9999px !important;
@include icon-sprite($sprite);
background-position: 0 round(nth(sprite-position($sprites, $sprite), 2) / 2);
height: image-height(sprite-file($sprites, $sprite)) / 2;
width: image-width(sprite-file($sprites, $sprite)) / 2;
background-size: (image-width(sprite-path($icon-sprites)) / 2) auto;
.ie & {
background-image: image-url("icon-1x/#{$sprite}.png") !important;
@boriskaiser
boriskaiser / gist:3908158
Created October 17, 2012 21:02
Easy retina-ready images using SCSS + Compass
@mixin background-2x($background, $file: 'png'){
$image: #{$background+"."+$file};
$image2x: #{$background+"2x."+$file};
background: image-url($image) no-repeat;
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx){
@include handhelds {
table.responsive {
width: 100%;
thead {
display: none;
}
tr {
display: block;
}
td, th {