- Mini state machines for page state with sass/jquery and
html
orbody
classes. - double-layer color constants: layer one: color names ($olive-green), layer two: common uses of colors ($link-color).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Generate the factors of $n | |
// factors(24) #=> 1 2 3 4 6 8 12 24 | |
@function factors($n) { | |
$factors: (); | |
@for $i from 1 through $n { | |
@if $n % $i == 0 { | |
$factors: append($factors, $i) | |
} | |
} | |
@return $factors; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- content_for(:inner_content) do | |
= render :partial => "inner_content" | |
- if some_condition | |
%outertag1= yield :inner_content | |
- else | |
%outertag2= yield :inner_content |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
require "rubygems" | |
require "chunky_png" | |
require "base64" | |
module Sass::Script::Functions | |
def background_noise(c, noise = 0.5, opacity = 0.08, size = 200, mono = false) | |
# Convert SASS numbers to Ruby classes | |
noise = noise.to_s.to_f if noise.is_a? Sass::Script::Number |
In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.
For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
require 'fileutils' | |
def subsume_modules(*vendor_modules) | |
options = vendor_modules.pop | |
options[:modules] = vendor_modules + Array(options[:additional_modules]) | |
options[:module_names] = options[:modules].map{|m| m.capitalize.gsub(/_[a-z]/){|s| s[-1..-1].upcase}} | |
vendor_modules.each do |vendor_module| | |
copy_module vendor_module, options | |
subsume_module vendor_module, options | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module Sass::Script::Functions | |
def user_color | |
color_values = options[:custom][:user].color. | |
scan(/^#?(..?)(..?)(..?)$/).first. | |
map {|num| num.ljust(2, num).to_i(16)} | |
Sass::Script::Color.new(color_values) | |
end | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
require "rubygems" | |
require "base64" | |
require "haml" | |
require "chunky_png" | |
module Sass::Script::Functions | |
def rgbapng(color) | |
chunky_color = ChunkyPNG::Color.rgba(color.red, color.green, color.blue, (color.alpha * 100 * 2.55).round) | |
image = ChunkyPNG::Image.new(1,1, chunky_color) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body.standard #footer, | |
body.standard #header, | |
body.standard #sidebar, | |
body.standard #content, | |
body.standard #ads { | |
float: left; | |
margin-left: 10px; | |
margin-right: 10px; | |
} |