Skip to content

Instantly share code, notes, and snippets.

View chipcullen's full-sized avatar

Chip Cullen chipcullen

27 followers · 11 following
View GitHub Profile
@chipcullen
chipcullen / smacss_array.txt
Created December 2, 2016 14:11
["display",
"position",
"top",
"right",
"bottom",
"left",
"flex",
"flex-basis",
"flex-direction",
"flex-flow",
@chipcullen
chipcullen / icons.scss
Last active August 29, 2015 14:27
A Sass list and loop to output icons derived from an icon font. Based on hint from https://github.com/sass/sass/issues/659#issuecomment-71759457
// list of icons
$icons : (
twitter: e603,
facebook: e602,
retweet: e001,
reply-mail: e002,
favorite: e003,
instagram: e600,
pintrest: e601,
youtube: e605,
@chipcullen
chipcullen / smacss.txt
Last active February 5, 2024 18:10
SMACSS Property Order for SCSS Lint
# SMACSS Property Order
# http://smacss.com/book/formatting
# Box
display
position
top
right
bottom
@chipcullen
chipcullen / icons.scss
Created August 5, 2013 15:54
My power duo for dealing with icons and SASS - an extendable %icon that references your icon font. The mixin then allows you to specify the content (the unicode string for the icon), and optionally 'before' or 'after' which creates the respective pseudo element. #icons #iconfonts #scss
%icon {
font-family: $icon-font; //set as a variable - it's whatever your icon font name is
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
@chipcullen
chipcullen / prop-query.scss
Created April 28, 2013 06:27
Prop-Query
@mixin prop-query($min-size, $property, $value){
@media screen and (min-width: $min-size){
#{$property}: $value;
}
}
@chipcullen
chipcullen / gist:4530696
Created January 14, 2013 15:15
An HTML email centered layout - first described here: http://chipcullen.com/an-html-email-centered-layout/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>email Title</title></head>
<body style="margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;"><table width="100%" border="0" cellspacing="10" cellpadding="0" class="wrapper"><tr><td align="center" valign="top" style="text-align:center;"><table border="0" cellspacing="0" cellpadding="10" class="main" style="text-align: left; margin-left: auto; margin-right: auto;" width="600">
<!-- email contents go here -->
</table></td></tr></table></body></html>
@chipcullen
chipcullen / html.tpl.php
Created January 3, 2013 15:43
Opening HTML for Drupal themes. Based on HTML5 boilderplate conditional comments around the <html> tag that identifies IE7 and IE8. Useful for CSS targeting. Goes in html.tpl.php.
<?php print $doctype; ?>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="<?php print $language->language; ?>"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie7" lang="<?php print $language->language; ?>"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 ie8" lang="<?php print $language->language; ?>"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?> > <!--<![endif]-->
@chipcullen
chipcullen / gist:4276592
Created December 13, 2012 14:07
A fix for Drupal and Codekit. As described here - http://www.nickcomito.me/notebook/codekit-doesnt-refresh-after-compiling-sass-drupal - Codekit and Drupal don't get a long right out of the box. Add this to your html.tpl.php right after <?php print $styles; ?> and your SASS changes will be injected per normal via Codekit. Big shout out to Nick C…
<link rel="stylesheet" href="/<?php print path_to_theme(); ?>/css/style.css" />
@chipcullen
chipcullen / Drush_dl_en_command.txt
Last active October 13, 2015 01:28
My Drush DL & Enable command - grabs a bunch of standard modules quickly. I include: - views - ctools - context - date - fences - pathauto - token - views_bulk_operations - CKEditor - block_class - backup_migrate - admin_menu - module_filter - magic - features - strongarm - diff - features_extra - menu_block - menu_attributes **If you work in mo…
drush dl views ctools context date magic html5_tools blockify fences pathauto token views_bulk_operations ckeditor block_class backup_migrate admin_menu module_filter features strongarm diff features_extra menu_block menu_attributes && drush en -y views ctools context date magic html5_tools fences pathauto token views_bulk_operations ckeditor block_class backup_migrate admin_menu module_filter features strongarm diff features_extra menu_block menu_attributes
@chipcullen
chipcullen / gist:4057025
Created November 12, 2012 01:17
Simple jQuery diagnostic script that I put at the top of my JS file. Just proof in the console that jQuery is firing, and which version is loaded.
console.log('jQuery is firing - using Jquery Version ' + $().jquery);