Skip to content

Instantly share code, notes, and snippets.

View matthewcopeland's full-sized avatar

matt copeland matthewcopeland

41 followers · 57 following
View GitHub Profile
@matthewcopeland
matthewcopeland / 01_has_whitespace.html
Created October 10, 2012 19:56
Eliminate html whitespace with this little trick. Plus the simplified version in haml. Putting the closing-tag and next opening-tag on the same line kills the whitespace.
<div>
<p>These divs have white space between them.</p>
</div>
<div>
<p>Because html naturally creates whitespace on the line-breaks.</p>
</div>
<!-- with comments -->
<div>
@matthewcopeland
matthewcopeland / 00_application.scss
Created October 5, 2012 19:32
File structure of adding a source-sans-page to the sassy-seeds demo app.
// top of the main file
// google fonts/external files must be imported in the root file.
@import url(http:/\/fonts.googleapis.com/css?family=Exo:100,200,300,400,500,600,700,800,900,300italic,400italic,500italic,600italic,700italic,800italic,900italic,200italic,100italic);
// @import source sans link from google fonts.
@matthewcopeland
matthewcopeland / deploy.rb
Created September 29, 2012 07:09
Example capistrano deploy.rb, based on Ryan Bates' example http://railscasts.com/episodes/335-deploying-to-a-vps
require "bundler/capistrano"
server "96.126.100.112", :web, :app, :db, primary: true
set :application, "capteste"
set :user, "deployer"
set :deploy_to, "/home/#{user}/apps/#{application}"
set :deploy_via, :remote_cache
set :use_sudo, false
set :port, "3030"
@matthewcopeland
matthewcopeland / 0_checkbox_radio.haml
Created September 15, 2012 06:32
Custom checkboxes and radio buttons with haml and sass. For more, see http://github.com/matthewcopeland/sassy-seeds
%fieldset
%span.checkbox-wrapper
%input{ :type=>"checkbox" }
%span
%label A Checkbox
%fieldset
%span.checkbox-wrapper
%input{ :type=>"checkbox", :checked=>"checked" }
%span
@matthewcopeland
matthewcopeland / rwd-meta-tag.haml
Created September 8, 2012 21:20
rwd meta tag
%meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1")
@matthewcopeland
matthewcopeland / _category_style.scss
Created August 29, 2012 00:36
Adding a category class to your octopress blog so you can attached an icon/color to the cat. two methods
// Or use this method...
//
// E[foo$="bar"]
// an E element whose "foo" attribute value ends exactly with the string "bar"
//
// http://www.w3.org/TR/css3-selectors/#attribute-selectors
a.category[href$="css/"] {
padding-left: 20px;
background: url('your-icon.png') left center no-repeat;
@matthewcopeland
matthewcopeland / Mediables.scss
Created August 27, 2012 08:31
Using global and local variables in sass for media queries.
$page-padding: 20px;
$mobile-page-padding: 10px;
#content { padding: $page-padding; }
@media only screen and (max-width: 599px) {
$page-padding: $mobile-page-padding;
#content { padding: $page-padding; }
@matthewcopeland
matthewcopeland / display.css
Created August 19, 2012 00:56
Display vs Visibility: Avoid bg-image load delays for mobile users.
/*
* image loads on hover.
* users (think mobile) may experience a delay loading the image.
*/
.class {
background-image: url('some-image');
display: none;
}
.class:hover { display: block; }
@matthewcopeland
matthewcopeland / image_tag.rb
Created August 18, 2012 23:24
Octobox Lightbox for Octopress - MVP
# line 42 of image_tag.rb
+++ "<span class=\"image-wrapper #{@img['class']}\"><img #{@img.collect {|k,v| "#{k}=\"#{v}\"" if v}.join(" ")}></span>"
--- "<img #{@img.collect {|k,v| "#{k}=\"#{v}\"" if v}.join(" ")}>"
@matthewcopeland
matthewcopeland / repeatable-background-checker-thingy.html
Created August 17, 2012 23:39
A quick reference for checking repeatable background patterns.
<!DOCTYPE html>
<html>
<head>
<style>
body {
/* Replace your image in this spot. */
background-image: url("yourimage.png");
/* set a color here */
background-color: #efefef;