Skip to content

Instantly share code, notes, and snippets.

View cbfrance's full-sized avatar
💚

Chris B. France cbfrance

💚
83 followers · 103 following
View GitHub Profile
@cbfrance
cbfrance / index.html
Created April 25, 2013 04:18 — forked from darwin/index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cmx.io/v/0.1/cmx.css"/>
<script src="http://cmx.io/v/0.1/cmx.js"></script>
<body>
<scene id="scene1">
<label t="translate(0,346)">
<tspan x="0" y="0em">One lazy morning</tspan>
</label>
<drawing t="translate(0,31)">
@cbfrance
cbfrance / gist:5249790
Created March 26, 2013 22:11
<article class="report">
<header>
<h3>
<span class="source-url"><a href="http://www.facebook.com/photo.php?fbid=515039308564048&amp;set=a.217603604974288.576..." title="http://www.facebook.com/photo.php?fbid=515039308564048&amp;set=a.217603604974288.576...">facebook.com/photo.php...</a></span> أضيف من قبل <a href="http://www.facebook.com/217514361649879">Occupy Wall St.</a>
</h3>
<div id="report-actions">
<ul class="content-actions">
<li class="share-on dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">شارك</a>
<ul class="dropdown-menu">
@cbfrance
cbfrance / rbenv_binstubs.md
Last active December 14, 2015 21:19
@cbfrance
cbfrance / bootstrap-integration.scss
Last active December 12, 2015 02:38
comparison of a couple of common styles, how to use them together
// Baseline styles which should apply to all decent form markup
// Assume well-marked up forms
form input[type="submit"] {
// ... submit button styles
}
// Twitter bootstrap style buttons
// uses the placeholer % to avoid a needless render of the button class
// ... we do want to put btn classes on things!
@cbfrance
cbfrance / gist:4498825
Created January 10, 2013 02:18
<nav role="navigation">
<ul id="main-menu" class="nav">
<li style="list-style: none; display: inline">
<h2 class="element-invisible">
Main menu
</h2>
</li>
<li class="menu-477 first active home">
<a href="/"></a>
</li>
@cbfrance
cbfrance / grids.md
Last active December 10, 2015 00:28
Proportion-based responsive layouts

Susy layouts with breakpoints

illustrating a common problem and a solution

OK, we're assuming we have this configuration:

$container-width: 6; // columns width
$break-small: 12; // larger than a smartphone, holds 12 computed columns
$break-medium: 24; // full desktop screen, holds 24 columns

Here's our pretty basic layout strategy

@cbfrance
cbfrance / config.rb
Created December 19, 2012 01:21
example compass configuration
require "susy" # how to require this in bowerbird?
require "logger" # custom logger with pass/fail
require "pry"
require "rake" # for filelist
require "modular-scale" #for ratios
drupal_dir = "drupal"
themes_dir = "sites/all/themes/"
extensions_dir = "bowerbird/extensions/"
bowerbird_extension_dir = "bowerbird/"
@cbfrance
cbfrance / notification.scss
Created November 25, 2012 00:57
Notification mixin
// Notification banner with dynamic color size and vertical baseline
//
// $color - used to dynamically set background, borders, font color.
// $adjustment - tweak the adjustment of the hues
// $font-size - adjust the size of the notification
@mixin notification($color: $light-gray, $adjustment: "lighten", $font-size: $medium-font-size) {
margin: 0;
padding-left: rhythm(1/2, $font-size);
padding-right: rhythm(1/2, $font-size);
@cbfrance
cbfrance / main-styles.scss
Created September 21, 2012 04:47
Semantic Fontawesome Icons + Compass Fancy Buttons
@import fontawesome;
@import fancy-buttons;
@import icons;
// now look, a semantic selector!
// you don't have to add .icon-envelope-alt to your markup
// use any of webfont-based icons at fortawesome.github.com/Font-Awesome/
// The result will be buttons like this: http://cl.ly/image/2c1t1q0W0t3P
a.request-invite {
@cbfrance
cbfrance / 0_selector_hacks.scss
Created March 31, 2012 02:31 — forked from chriseppstein/0_selector_hacks.scss
This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.
@mixin ie6 { * html & { @content } }
#logo {
background-image: url("/images/logo.png");
@include ie6 { background-image: url("/images/logo.gif"); }
}