Skip to content

Instantly share code, notes, and snippets.

@bpainter
bpainter / index.html
Created April 16, 2013 12:04
A CodePen by Bermon Painter. @extend directive
<h1>@extend Directive</h1>
<p>One issue with using mixins is it can create CSS & HTML that's not very DRY and may bloat your final output. As an alternative you can use the @extend directive, which outputs CSS that is a bit more natural.</p>
<div class="error">
<p>Something terrible happened with the system and we can't proceed.</p>
<div class="close">x</div>
</div>
<div class="message caution">
<p>Are you sure you want to do whatever you just did? It may not be a good idea..</p>
@bpainter
bpainter / index.html
Created April 16, 2013 12:04
A CodePen by Bermon Painter. Placeholder directive
<h1>Placeholder Directive</h1>
<p>We've started cleaning up our CSS but it's still not as clean as it needs to be. The placeholder directive is basically a silent class. It's output in our CSS, but in a comma delimted fashion so the output is just a bit cleaner.</p>
<div class="error">
<p>Something terrible happened with the system and we can't proceed.</p>
<div class="close">x</div>
</div>
<div class="caution">
<p>Are you sure you want to do whatever you just did? It may not be a good idea..</p>
@bpainter
bpainter / index.html
Created April 16, 2013 12:04
A CodePen by Bermon Painter. Functions
<h1>Functions</h1>
<p>If you have some simple or complex calculations you want to perform, a function will make it nice & easy. A good use of a function is calculating widths in a grid system.</p>
<article role="main">
<h2>Main content</h2>
</article>
<aside role="complementary">
<p>Some secondary content</p>
</aside>
@bpainter
bpainter / index.html
Created April 16, 2013 12:04
A CodePen by Bermon Painter. Color functions
<h1>Color Functions</h1>
<p>Our message boxes were a little boring. Based on Dribbble, gradients and shadows make everything better. We already have rounded corners. We have the trifecta of awesome.</p>
<div class="error">
<p>Something terrible happened with the system and we can't proceed.</p>
<div class="close">x</div>
</div>
<div class="caution">
<p>Are you sure you want to do whatever you just did? It may not be a good idea..</p>
@bpainter
bpainter / index.html
Created April 16, 2013 12:04
A CodePen by Bermon Painter. Control Directives - if, else if, else
<h1>Control Directives - if, else if, else</h1>
<p>One of the features that makes Sass more robust that other preprocessors is the wide variety of control directives.</p>
<button type="submit">Submit to our will</button>
<button type="reset">Start Over</button>
<button class="cancel">Give Up</button>
@bpainter
bpainter / index.html
Created April 16, 2013 12:04
A CodePen by Bermon Painter. Media Queries
<h1>Media Queries</h1>
<p>One of the nice things that Sass will let you do with media queries is nest them. This helps keep like sections of CSS chunked together and easier to maintain.</p>
<article role="main">
Main content
</article>
<aside role="complementary">
Secondary content
</aside>
@bpainter
bpainter / index.html
Created April 16, 2013 12:04
A CodePen by Bermon Painter. @content directive
<h1>@content directive</h1>
<p>We can take our media queries a step farther and create a mixin out of them. The @content directive in Sass allows you to pass entire sections of CSS rules back through a mixin.</p>
<article role="main">
Main content
</article>
<aside role="complementary">
Secondary content
</aside>
http://codepen.io/bpainter/pen/IkByq
A little nesting goes a long way.
http://codepen.io/bpainter/pen/aophg
- Only be as specific as you need to be.
- General rule of thumb - Don't nest more than 3 levels. It's a good indicator that you're being overly specific with your selectors.
- Always review your output (especially when you're first starting out). If the CSS being generated starts to look a bit off, review how you're writing your Sass.

Open Conference Expectations

This document lays out some baseline expectations between conference speakers and conference presenters. The general goal is to maximize the value the conference provides to its attendees and community and to let speakers know what they might reasonably expect from a conference.

We believe that all speakers should reasonably expect these things, not just speakers who are known to draw large crowds, because no one is a rockstar but more people should have the chance to be one. We believe that conferences are better -- and, dare we say, more diverse -- when the people speaking are not just the people who can afford to get themselves there, either because their company paid or they foot the bill themselves. Basically, this isn't a rock show rider, it's some ideas that should help get the voices of lesser known folks heard.

These expectations should serve as a starting point for discussion between speaker and organizer. They are not a list of demands; they are a list of rea

Possibly confusing dependencies found:
[lein-sass "0.3.0"] -> [com.cemerick/pomegranate "0.2.0"] -> [org.sonatype.aether/aether-connector-wagon "1.13.1"] -> [org.codehaus.plexus/plexus-utils "2.0.7"]
overrides
[lein-sass "0.3.0"] -> [com.cemerick/pomegranate "0.2.0"] -> [org.apache.maven.wagon/wagon-http "2.2"] -> [org.apache.maven.wagon/wagon-http-shared4 "2.2"] -> [org.apache.maven.wagon/wagon-provider-api "2.2"] -> [org.codehaus.plexus/plexus-utils "3.0"]
and
[lein-sass "0.3.0"] -> [com.cemerick/pomegranate "0.2.0"] -> [org.apache.maven.wagon/wagon-http "2.2"] -> [org.apache.maven.wagon/wagon-provider-api "2.2"] -> [org.codehaus.plexus/plexus-utils "3.0"]
and
[lein-sass "0.3.0"] -> [com.cemerick/pomegranate "0.2.0"] -> [org.apache.maven.wagon/wagon-provider-api "2.2"] -> [org.codehaus.plexus/plexus-utils "3.0"]
Consider using these exclusions: