Una Kravets

I blog about code & design. Interning @nclud, prev. @viget, president of @AUDesignClub & co-founder @ukravedesign

Read this first

Buttons: A Look at Module Mixins, Compass Color-Contrast, and Sass Boolean Functions

Recently, I’ve been coding websites via a modular approach – meaning, focusing on styling distinct (repeated) elements (like sidebars, buttons, entry fields, etc.), and reusing them throughout the page. Modules ensure consistency throughout your project, and increase efficiency since you’re reusing as much code as possible.

Right now I want to focus on buttons.

Screen Shot 2013-10-31 at 9.25.27 AM.png

(click the buttons to open their Codepen)

Mixing Modules

When I began creating the buttons for the website that inspired this post, I originally styled them individually, but quickly realized, I can do better than that! Why not create a module mixin to make the code more universal and efficient? With this mixin, the only thing I’d need to do to create new buttons is specify their color and size (big or small): much more human and semantic. .button1 {
@include button($toad-blue, big);
}

I’m using @if statements and color...

Continue reading →

Shape: A Sass Mixin

CSS shapes are really fun, and making images out of them is awesome! We see shapes being used everywhere on the web these days, from icons to navigation to tooltips. And its great! I mean, doesn’t typing a bit of code and getting a cool image out of it without touching Illustrator make you feel like a badass?

Well, it definitely makes me feel like one. Which is why I made this (based on this dribbble shot):

Screen Shot 2013-10-28 at 8.13.17 PM.png

Click on that image to open the code pen for it!

And most of the markup looks like some variation of this:

.neck {

  @include shape(circle, 180px, $tan);

  margin: 200px 210px;

}

What? That’s like … two lines. Yep, its pretty easy to make shapes without much effort when you use Sass and a really simple little mixin I wrote called “Shape”

The CSS that the above code compiles to looks like this:

.neck {

  width: 180px;

  height: 180px;

  background-color: f4e5be;

  border-radius:
...

Continue reading →