lucasmazza

class ProjectsController < ApplicationController
  def show
    respond_to do |format|
      format.html do |html|
        html.tablet # renders app/views/projects/show.html+tablet.erb
        html.phone { extra_setup; render ... }
      end
    end
  end
end

lucasmazza

label{
  display: block;
  margin: 10px 0;
  background-color: rgba(255, 0, 0, 0.3)
}

lucasmazza

div {
width: 80%;
height: 900px;
border: 1px solid #000;
background-image: url(http://css-tricks.com/wp-content/csstricks-uploads/fullpagebackground.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: bottom;
}

lucasmazza

p {
	font-family: -apple-system-font, Roboto, Lucida Grande;
}

lucasmazza

.foo { 
	width: 270px; 
	height: 80px; 
	float: left;
	background-color: white;
	margin: 10px;
	box-shadow: 3px 4px 1px 4px rgba(0,0,0,1);
}

lucasmazza

body { background-color: red; }
img, div { position: absolute; top: 20px; left: 20px; }

div { width: 160px; height: 160px; background-color: blue; }
img { box-sizing: border-box; }
img { border-bottom: 10px solid white; border-right: 10px solid white; }

lucasmazza

span {
 animation: bounce 0.7s infinite ease;
 position: relative;
 font-size: 3em;
}

@keyframes bounce {
  0% {
    opacity: 1;
    top: 0;

lucasmazza

SVG sprite generator, by Sérgio Lopes

• https://twitter.com/sergio_caelum
• http://sergiolopes.org

Requirements

• Python
• Inkscape (on command line path)
• ImageMagick

lucasmazza

div {
  height: 100px;
  width: 320px;
  font-size: 2em;
  text-align: center;
  line-height: 100px;
  margin: 10px;
  float: left;
  font-family: Arial;
}

lucasmazza

div {
  height: 100px;
  width: 320px;
  font-size: 2em;
  text-align: center;
  line-height: 100px;
  margin: 10px;
  float: left;
  font-family: Arial;
}