Skip to content

Instantly share code, notes, and snippets.

Chris Eppstein chriseppstein

Block or report user

Report or block chriseppstein

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@chriseppstein
chriseppstein / gist:2416833
Created Apr 18, 2012 — forked from metaskills/gist:2416795
Custom Sass Function For stringinclude(a, b)
View gist:2416833
module Sass::Script::Functions
def includes_string(string, substring)
assert_type string, :String
assert_type substring, :String
Sass::Script::Bool.new(string.value.include?(substring.value))
end
declare :includes_string, [:string, :substring]
end
View percentage_grid.sass
//
// How I would approach a fluid grid:
//
// [1] Let the name reflect the % width,
// eliminating "1 of 12" guesswork.
//
// [2] Also, put 10px of padding to either
// side, to stack and make a 20px gutter.
//
// [3] Make the box-sizing = border-box, so that
@chriseppstein
chriseppstein / Sass-gradient.sass
Created Oct 6, 2011 — forked from scottkellum/Sass-gradient.sass
Create gradients with ease using Sass
View Sass-gradient.sass
=gradient($startcolor, $endcolor, $startpos: top)
background-color: $startcolor / 2 + $endcolor / 2
@if $startpos == "top"
filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')")
-ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')")
background-image: -webkit-gradient(linear, top left, bottom left, from($startcolor), to($endcolor))
@if $startpos == "left"
filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')")
-ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')")
background-image: -webkit-gradient(linear, top left, top right, from($startcolor), to($endcolor))
@chriseppstein
chriseppstein / readme.md
Created Aug 31, 2011 — forked from mislav/Gemfile
How to integrate Compass with Rails 3.1 asset pipeline
View readme.md

This gist is no longer valid. Please see Compass-Rails for instructions on how to install.

View responsive_grid_container.scss
@mixin grid_container {
margin: auto;
width: 960px;
// Tablet Layout: 768px.
@media only screen and (min-width: 768px) and (max-width: 991px) {
width: 764px;
}
// Mobile Layout: 320px.
@media only screen and (max-width: 767px) {
View input-placeholder.sass
// Mixins ---------------------------------------------------------------
=placeholder
&::-webkit-input-placeholder
@children
&:-moz-placeholder
@children
&.placeholder
@children
View input-placeholder_mixin.sass
// Style this how you want it to look
.input-placeholder-text
color: #777
=input-placeholder
&.placeholder, &:-moz-placeholder, &::-webkit-input-placeholder
@extend .input-placeholder-text
form#login input
View test.rb
require 'sass'
require 'compass'
require 'fileutils'
str = '@import "blueprint/reset";'
Compass.add_project_configuration("path/to/config")
result = Sass::Engine.new(str, Compass.configuration.to_sass_engine_options.update(:syntax => :scss)).render
View for-loops.scss
// An example for:
// http://blog.rebeltix.com/2011/04/css-sass-and-how-to-improve-the-mess/
@for $i from 1 through 6 {
h#{$i} {font-size: 12pt + (14 - $i*2);}
}
@for $i from 1 through 3 {
box-level-#{$i} {background-color: #333 + ($i * #333);}
}
View generategrid.css
body > div {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0px, rgba(0, 0, 0, 0)), color-stop(0px, rgba(0, 0, 0, 0.25)), color-stop(40px, rgba(0, 0, 0, 0)), color-stop(50px, rgba(0, 0, 0, 0)), color-stop(60px, rgba(0, 0, 0, 0.25)), color-stop(100px, rgba(0, 0, 0, 0)), color-stop(110px, rgba(0, 0, 0, 0)), color-stop(110px, rgba(0, 0, 0, 0.25)), color-stop(150px, rgba(0, 0, 0, 0)), color-stop(160px, rgba(0, 0, 0, 0)), color-stop(160px, rgba(0, 0, 0, 0.25)), color-stop(200px, rgba(0, 0, 0, 0)), color-stop(210px, rgba(0, 0, 0, 0)), color-stop(210px, rgba(0, 0, 0, 0.25)), color-stop(250px, rgba(0, 0, 0, 0)), color-stop(260px, rgba(0, 0, 0, 0)), color-stop(260px, rgba(0, 0, 0, 0.25)), color-stop(300px, rgba(0, 0, 0, 0)), color-stop(310px, rgba(0, 0, 0, 0)), color-stop(310px, rgba(0, 0, 0, 0.25)), color-stop(350px, rgba(0, 0, 0, 0)), color-s
You can’t perform that action at this time.