Skip to content

Instantly share code, notes, and snippets.

anotheruiguy / extends-in-libsass.scss
Last active August 29, 2015 13:56
Where extended placeholder selectors go wrong in libsass
View extends-in-libsass.scss
// ----
// libsass (v0.7.0)
// ----
// Where extends go wrong in libsass
// In the following placeholder selector, all the selectors are created as
// such using the % syntax
%default-parent {
anotheruiguy /
Last active August 29, 2015 13:56
Because I can!

Aparently you can't keep a good guy down. At the behest of the public, Jed Foster, the man behind and came up with a new feature that really brisges these two apps together. The new <sassmeister> tag gives users the ability to directly embed a SassMeister gist right into the blog post.

And this is not limited to only your gists. Let's say, for example, that you come across this amazing new Gist that some briliant developer came up with and you really want to talk about it. Let's take the @function color-diff Gist built by HugoGiraudel. Simply put <sassmeister>8668994</sassmeister> in your markdown file and BOOM!


And there you go., one of the easiest blogging platforms on the plannet. Add a .md. gist to your Github account and you are pubslishing. Pretty cool!

anotheruiguy / SassMeister-input-HTML.html
Created February 10, 2014 23:37
Generated by
View SassMeister-input-HTML.html
<button class="image-stack"></button>
<button class="home"></button>
<button class="select-image"></button>
<button class="launch-camera"></button>
<button class="my-location"></button>
anotheruiguy / breakpoints.haml
Last active August 29, 2015 13:57
A simple exercise illustrating how breakpoints work.
View breakpoints.haml
Hi, I am responsive!
this is 800px wide, I am not ;(
this is 600px wide, I am not ;(
anotheruiguy / SassMeister-input.scss
Created April 7, 2014 16:00
Generated by
View SassMeister-input.scss
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
$beatles: John Paul George Ringo Fifth;
@mixin the-beatles {
@each $beatle in $beatles {
$lc-name: to-lower-case($beatle);
anotheruiguy /
Last active August 29, 2015 13:58
Setting the state of invalid

For the question of setting the state of 'invalid' when building interactive web apps, there are two options. Using the class of .is-invalid is an easy and common option, but semantically worthless.

HTML5 uses the pseudo element of :invalid, while this is better because we don't need to program against this, the fail is that everything is invalid until the user interacts with it when coupled with the attribute of required as shown in this example gist. There is also a JSBin version you can see too that is better for viewing on a device.


While I am comfortable with the common use case of the class of .is-invalid for the presentation of the state, I also advocate for adding all the appropriately semantic attributes.

In the end, for an invalid state we could end up with an <input> element like the following:

anotheruiguy /
Last active August 29, 2015 14:01
Why libsass is important to the community

Life is ever changing, right? Everything around us is always in a constant state of change. You learn early either to be flexible with these winds or you resist them.

Evangelizing beyond the Rails developer

Back in 2008 I heard about this thing called Rails and a fellow developer told me about a new CSS language called 'Sass'. At the time I was working for a company that heavily leveraged Microsoft technologies and Ruby was not something that we could plug into our environment. Sass was a ncoew toy I could read about, that's as far as it went.

Fast forward just a year, I moved on and began working with a Rails team. Their first question, "You know Sass?" I said, "Nope, but it's a great time to learn!"

Since then I have been a huge advocate for the use of Sass and still continue to promote awareness. Within the Rails community, this is pretty easy to evangelize, moving away from Rails, even today it is difficult to convince people. I went on various speaking engagements, and spoke about better ways t

anotheruiguy /
Created June 10, 2014 19:42
Let's do this together

Since I began this group, the scope of what it means to be a front-end developer has dramatically changed. There are so many more tools in our arsenal and there is equally as much confusion.

Adding to this confusion is the growing number of front-end frameworks that have the goal in mind to make our lives easier, but fail in their delivery.

Throwing technology and frameworks at the problems are not solving any of them. What's missing from the solutions are the discussion and community involvement needed to come to conclusions that address the problems that front-end developers deal with on a daily basis.

Truth is, discussions and involvement are hard. Reaching for some off-the-shelf software that solves all your issues is easy. Thus the rise of Bootstrap. The design API for front-end development. For those who don't know, they LOVE IT. For those who do know, this is the worst tool possible.

Zurb's Foundation and Bourbon's Bitters are good starts, but not everyone solves problems these ways. We need soluti


Hey everyone -

Just wanted to put this out there. Since I started thee first ever Sass Meetup in Seattle, it's been amazing watching others take the initiative in other cities.

In light of this, not to long ago I decided to offer up the @SassMeetup Twitter account to all other Meetups. Much like how UX Happy Hour does it, it's a great way for people to easily follow one account and be able to see everything that is happening in all the Sass communities.

I have published a list of all the Sass Meetups that I am aware of here:

It would be great for everyone to check this list out. Meetups are popping up all over the place, so if you are currently operating a Sass Meetup and are not on this list, I apologize. Please update the list with your information.