Skip to content

Instantly share code, notes, and snippets.

@darren131
darren131 / config.rb
Created May 9, 2014 03:43
Default compass config file
require 'autoprefixer-rails'
require 'breakpoint'
require 'scut'
require 'sass-media_query_combiner'
http_path = "/"
sass_dir = "sass"
css_dir = "public/css"
http_stylesheets_path = "/css"
/**
* Setup images sprite having high resolution variant for retina displays.
*
* It will create class names for all available icons.
*
* This uses custom function to prefix selectors from array. To get it working you will need to include following snippet in your config.rb
*
* module Sass::Script::Functions
* def prefix_each(array, prefix)
* return Sass::Script::String.new array.to_a.map{|item| prefix.value + item.value}.join(", ")

INSTALLATION

  1. Save script to e.g. /usr/local/bin/media-query-combiner
  2. chmod +x /usr/local/bin/media-query-combiner

USAGE

Reads from stdin and writes to stdout.

@darren131
darren131 / config.rb
Created March 24, 2014 02:14
Dev vs prod compass compiling
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "css"
images_dir = "images"
javascripts_dir = "js"
// Social Colors
// ====================================================================
$facebook_color: #365397;
$twitter_color: #00a9f1;
$linkedin_color: #006db3;
$apple_color: #737373;
$google_color: #4285f4;
$google_plus_color: #e0452c;
$youtube_color: #ff3333;
@darren131
darren131 / gist:7634185
Last active December 29, 2015 07:09
Sass Project Setup

File organisation

The file organisation is broken down into these main groupings.

  • Global
    This contains site configuration variables and a _shame.scss file which contains any hacks.

  • Elements

@darren131
darren131 / background vs colour
Created October 9, 2013 03:02
Change the text colour of an element based on the darkness of the background colour
@mixin set-color($background-color: #c00) {
@if lightness($background-color) > lightness(#aaaaaa) {
color: $dark;
} @else {
color: $light;
}
background:$background-color;
}
# best path for assets in Wordpress project
http_path = "/wp-content/themes/TheFold/"
css_dir = "."
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"
output_style = :expanded
environment = :development
@darren131
darren131 / config.rb
Created April 17, 2013 05:58
Compass and Wordpress Automating folder name and theme name Note in style.scss comment section we call wp_theme_name()
# get the name of your theme folder
WP_THEME_FOLDER = File.basename(File.dirname(__FILE__))
# best path for assets in Wordpress project
http_path = "/wp-content/themes/#{WP_THEME_FOLDER}/"
css_dir = "."
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"
@darren131
darren131 / _spacing.scss
Last active December 14, 2015 05:29
OOSCSS Spacing Module
// This is based on Nicole Sullivan's OOCSS spacing module
// with a slight modification, namely:
//
// 1. there's no vertical or horizontal
//
// Produces the following placeholder selectors
// %mtn {
// margin-top: 0;
// }
// %mbn {