Skip to content

Instantly share code, notes, and snippets.

@anotheruiguy
anotheruiguy / extends-in-libsass.scss
Last active August 29, 2015 13:56
Where extended placeholder selectors go wrong in libsass
// ----
// 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
anotheruiguy / readme.md
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 Roughdraft.io and Sassmeister.com 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!

8668994

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

@anotheruiguy
anotheruiguy / SassMeister-input-HTML.html
Created February 10, 2014 23:37
Generated by SassMeister.com.
<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
anotheruiguy / breakpoints.haml
Last active August 29, 2015 13:57
A simple exercise illustrating how breakpoints work.
.block
Hi, I am responsive!
.hard-width-800
this is 800px wide, I am not ;(
.hard-width-600
this is 600px wide, I am not ;(
@anotheruiguy
anotheruiguy / SassMeister-input-HTML.haml
Created March 20, 2014 18:31
Generated by SassMeister.com.
%h1
MMMMMMMMMM
@anotheruiguy
anotheruiguy / SassMeister-input.scss
Created April 7, 2014 16:00
Generated by SassMeister.com.
// ----
// 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
anotheruiguy / aria-role-invalid-state.md
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.

9942957

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
anotheruiguy / why-we-need-libsass.md
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
anotheruiguy / seattle-fe-community.md
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.