8 Sass mixins you must have in your toolbox #

Regardless if you’re using Compass, Bourbon, or you’re going full vanilla — these 8 Sass mixins are certainly among the top mixins needed.

Some of the mixins are included in Compass, but since I prefer not to use Compass in my projects, I decided to write them myself. So, here are the 8 mixins I think every developer should have in their toolbox.

Setting a rem font size with pixel fallback is priceless.

Find the right tools for your Sass projects with Sache #

Sache just launched — it’s a Sass library directory made by Chris Michel and Jared Hardy. They teamed up to create Sache because of their love for the Sass community and to help folks find the right tools to use in Sass/Compass projects.

Jared Hardy on why they built Sache:

Was inspired after SassConf by all the amazing stuff people were building and I wanted a place where we could feature and explore the cool stuff the sass community was producing.

Currently there are just 21 libraries listed. If yours is missing, add it to the directory.

On contributing:

We love open-source projects and community so we’ve kept this repo open for anyone to contribute to. Feel free to open an issue or submit a pull request with an additional feature or even a bug fix. If you are going to contribute: create a new branch off of master and open a pull request against that so we can check out your work. Please make sure you’ve tested your work thoroughly before finalizing your pull request.

Check out the Github repository to submit issues and learn how to contribute, and follow @sache_in on Twitter to stay up to date.

Compass Placeholders #

I’m a huge fan of Sass. Nico Hagenburger just got in touch with us to let us know about his newly released Sass library to use @extend instead of @include for Compass mixins to save file size and speed up rendering. In the readme Nico covers the traditional way with Compass, and then the optimized way via Compass Placeholders.

Free your HTML of .row & .col classes with Bourbon Neat #

Neat is my go-to grid framework for Sass. It’s perfect for prototyping responsive websites and web UI components, by letting you create a grid entirely in Sass (you don’t need those pesky .row and .col classes) so you can keep your HTML nice and semantic.

The syntax is straightforward:

$max-width: 90%;
$grid-columns: 9;

aside   { @include span-columns(3); }
section { @include span-columns(6); }

Creating:

Bourbon Neat Example

Awesome! If you go one step further and use a consistent HTML structure across your site you can now tweak your grid system from just Sass. In my experience this cuts out a lot of switching between HTML and Sass while prototyping.

Check out the docs and source on GitHub to get started.

Also, if you haven’t listened to episode #93 with Phil LaPier yet, you should add that to your list of things to do.

#94: Sass, libsass, Haml and more with Hampton Catlin

Adam Stacoviak and Andrew Thorp talk with Hampton Catlin about Sass, libsass, Haml, Tritium, Moovweb and more. You can tune-in LIVE on Tuesday’s at 5pm CST. hcatlin/libsass Tritium from Moovweb, the web transformation platform Moovweb Sass – Syntactically Awesome Stylesheets The Sass Way The Sass Jerk – Articles Getting started with Sass and Compass – […]

Namespace support is being added to Sass #

Namespace support has been long-requested by those writing CSS the Sass way. The feature is still in development and should hit a Sass version near you soon enough, but it looks to be a very simple and consistent way of dealing with the vast number of use cases for namespaces.

For a deeper take on the history, read this issue and this comment which summarizes the solution and some of the rejected alternative solutions.

Here’s an example use case shared by Chris Eppstein:

@function current-module() {
  @return nth(&, 1);
}

mymodule {
  @at-root {
    .#{current-module()}-header { ... }
    .#{current-module()}-footer { ... }
    .#{current-module()}-body   {
      a          { ... } 
      span       { ... } 
      p          { ... }
      form       {
        button.#{current-module()}-button { ... } }
    }
  }
}

And this would generate CSS like:

.mymodule-header { ... }
.mymodule-footer { ... }
.mymodule-body a { ... }
.mymodule-body span { ... }
.mymodule-body p { ... }
.mymodule-body form button.mymodule-button { ... }

Check out this Gist and this comment to learn more.

csscss parses your CSS and shows your duplicated declarations #

Yesterday, a neat little gem called csscss celebrated a 1.0 release!

csscss will parse any CSS or Sass file you give it and let you know which rulesets have duplicated declarations.

It’s super easy to use:

$ gem install csscss
$ csscss path/to/styles.css path/to/other-styles.css

{.contact .content .primary} and {article, #comments} share 5 rules
{.profile-picture}, {.screenshot img} and {a.blurb img} share 4 rules
{.work h2:first-child, .archive h2:first-child, .missing h2:first-child, .about h2, .contact h2} and {body.home h2} share 4 rules
{article.blurb:hover} and {article:hover} share 3 rules

Cool! This really helps when you’re trying to get a handle on refactoring. Maybe it’s just me, but I find remembering all of my CSS rules very complicated. There’s a reason I’m more of a back-end developer…

For those who write their CSS in Sass, csscss can also parse Sass files, as well. Just point it at one and it’ll go to town!

Check out the homepage or the source on GitHub for more details.


There’s one other neat part about this gem, but it’s not for users of the gem — it’s for developers. csscss contains, as you’d expect, a full CSS parser written in parselet. I’m sure that others could do need static analysis stuff with CSS if they had a parser that was pre-built for them, as well.

Easings.net helps select the right easing for an animation #

If you need help with selecting the right easing for an animation, Easings.net could be the help you’re looking for. It includes an explanation about easing, helpful animated graphs to visually demonstrate each easing as well as “how to” code for jQuery, Sass and CSS.

Since it’s open source, the tool has been forked and translated to European, Slavic and Asian languages.

Fork it and localize it to your language, or check out Easings.net to select the right easing for your next animation.

Flat UI user interface kit from Designmodo #

If you haven’t heard, flat design is pretty trendy right now.

Last September, LayerVault shared their thoughts (and some would say coined the term too) on The Flat Design Era. Since then, many sites and designers have taken to this new trend — including the folks at Designmodo.

A month ago they released Flat UI, a free and open source user interface kit. If you were paying close attention, you’d know that LayerVault slapped them with a DMCA take-down notice issued to GitHub saying “I am the exclusive rights holder for the artwork contained within Flat UI, Free Web User Interface Kit; These exclusive rights are being violated by material available upon your site at the following URL designmodo.github.com/Flat-UI” — but that take-down has since been lifted and the air is clear. In the end LayerVault was simply saying that a few of the icons were way too close to their original flat UI designs and had to defend themselves. It happens.

You should check out Flat UI — even if just to get some ideas on creating your own UI kit.

Font Awesome is an awesome open source icon-font kit #

Font Awesome by Dave Gandy is “the iconic font” designed for use with Twitter Bootstrap. But guess what? You don’t have to use Twitter Bootstrap. Font Awesome can be used with any site or framework.

Font Awesome

Beyond the 249 icons, my favorite thing about Font Awesome is how designer friendly it is. Just install FontAwesome.otf and visit the copy and paste page when designing. You can also contribute your own icons. Although to submit your icon, you’ll need to email Dave at dave@davegandy.com so he can approve your icon for submission vs sending a pull request. He’s keeping a very tight reign on quality.

Font Awesome’s licensing is a combination of the SIL open font license, MIT license for code, and the CC 3.0 license – making it completely free for commercial use. Attribution is no longer required for Font Awesome 3.0, but it is much appreciated.

Check out the source on GitHub and the integration details to get started.


UPDATE: Use icnfnt (The official subsetting tool of Font Awesome) to create a custom Font Awesome icon-font kit with only the icons you want. It even includes the CSS, Sass, SCSS, & LESS files. While you’re at it, check out the source for icnfnt as well.

ZURB Foundation turns 4.0 #

We originally covered Foundation back at 2.0. That was before Foundation 3.0 where they re-wrote the styles in Sass (SCSS) and Compass rather than pure CSS.

Now, ZURB is at it again with Foundation 4.0 and this is what’s new.

Mobile first.

We’ve retooled Foundation from the ground up to be Mobile First. This is no hack job; we didn’t just flip some media queries and call it a day. We went through the framework and rethought how grids should work, how components should work in a mobile-first paradigm, so we could be sure the solution we deliver in Foundation 4 is smart and sturdy.

Semantic.

We’ve built Sass mixins and extensions for almost every component of Foundation. Now you can write whatever markup is most semantic, most representative of what your content really is. Then, simply attach Foundation components to it in your Sass.

New (and Speedier) Javascript.

With Foundation 4, we wanted to make sure that not only were our Orbit, Reveal, Joyride, Clearing and Magellan plugins the best they could possibly be, but also that we were setting Foundation up for even greater plugins in the future. So, we rewrote them all.

We’re also using Zepto.js, a jQuery API compatible library. This dramatically reduces how much your users will need to load (especially on mobile devices) and provides the added benefit of using CSS for animations, taking advantage of hardware acceleration where possible.

HTML Templates.

We’ve created some common layouts for you to start from so you can cook your site faster.

Check out the source on GitHub and the docs to get started.

hint.css makes pure CSS tooltips too easy #

From the hint.css homepage:

hint.css is written as a pure CSS tooltip library which you can use to create cool tooltips for your site. It does not rely on JavaScript, but instead uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. hint.css uses BEM naming convention particularly for the modifiers.

The usage is simple. Download one of the 2 library versions to your project and include the CSS file in the <head> of your page.

  1. Full:
    https://raw.github.com/chinchang/hint.css/master/hint.css
  2. Minified:
    https://raw.github.com/chinchang/hint.css/master/hint.min.css

Then, the tooltip text is passed using the data-hint attribute on the element.

For example:

Hello Sir, <span class="hint hint--bottom" data-hint="Thank you!">hover me.</span>

If you’re wanting to contribute, hint.css is developed using Sass. The Sass source files can be found in the src directory of the project on GitHub.

Check out the homepage for more details and demos in action.

Sass Media Queries, a collection of useful media queries mixins for Sass #

From the project homepage:

Sass Media Queries is a collection of useful media queries mixins (including iOS devices like iPhones and iPads) for Sass 3.2.0+

TL;DR

Sass Media Queries adds support for @media query Sass mixins (including iOS devices like iPhones and iPads) for Sass 3.2.0+, and is also Compass and Bourbon safe.

Requirements:
  Sass 3.2.0+

Version:
  2.1                                     // developed on 16/02/2013

Variables:
  $units: 1px;                            // default units for 'screen' mixins - it must include a digit!

Mixins:
  @include min-screen(width)              // shortcut for @media screen and (min-width ...)
  @include max-screen(width)              // shortcut for @media screen and (max-width ...)
  @include screen(min-width, max-width)   // shortcut for @media screen and (min-width ...) and (max-width ...)
  ---
  @include iphone3                        // only iPhone (2, 3G, 3GS) landscape & portrait
  @include iphone3-landscape              // only iPhone (2, 3G, 3GS) only landscape
  @include iphone3-portrait               // only iPhone (2, 3G, 3GS) only portrait
  ---
  @include iphone4                        // only iPhone (4, 4S) landscape & portrait
  @include iphone4-landscape              // only iPhone (4, 4S) only landscape
  @include iphone4-portrait               // only iPhone (4, 4S) only portrait
  ---
  @include iphone5                        // only iPhone (5) landscape & portrait
  @include iphone5-landscape              // only iPhone (5) only landscape
  @include iphone5-portrait               // only iPhone (5) only portrait
  ---
  @include ipad                           // only iPad (1, 2, Mini) landscape & portrait
  @include ipad-landscape                 // only iPad (1, 2, Mini) only landscape
  @include ipad-portrait                  // only iPad (1, 2, Mini) only portrait
  ---
  @include ipad-retina                    // only iPad (3, 4) landscape & portrait
  @include ipad-retina-landscape          // only iPad (3, 4) only landscape
  @include ipad-retina-portrait           // only iPad (3, 4) only portrait
  ---
  @include retina                         // devices with retina

Now it’s easy to do stuff like:

@include min-screen(320)  { ... }
@include max-screen(1024) { ... }
@include screen(320, 640) { ... }

And get back this when compiled to CSS:

@media screen and ( min-width: 320px) ) { ... }
@media screen and ( max-width: 1024px ) { ... }
@media screen and ( min-width: 320px ) and ( max-width: 640px ) { ... }

Check out the project from Rafal Bromirski on GitHub and also the simple, yet neat “resize me” demo.

Discuss on Hacker News if you must.

Unsemantic, Nathan Smith’s fluid grid successor to 960.gs #

From the homepage:

Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages.

Having worked side-by-side with Nathan for several months, I can really appreciate his humour in naming his successor grid system to 960.gs, Unsemantic. That name is just perfect.

Unsemantic

Unsemantic is a fluid grid system based on percentages, SE-Oh? compliant, built with Sass and Compass (drink!), and also supports both @media queries and Adapt.js to respond and configure your breakpoints.

Check out Unsemantic’s homepage for more info, or dive into the demo to see it in action.

gradientD is a CSS3 Gradient Designer using Dojo #

Tom Pryor:

I wanted to try out Dojo’s new AMD pattern, as well as widigtize (finally) the gradient code spagetti I am currently using in my CSS3 Button Tool (Beta) and I finally got some time to play so I put this dojo widget/mashup together and put it on gitHub in case anyone was interested.

I’m psyched with the much better network performance, but even more importantly (for me) is that I have my first Dojo widget, and I think the next step is to just include it in the buttonMaker… but now I am thinking of upgrading it too to the AMD pattern, before installing this new Dojo AMD widget.

Wow. This is certainly useful, if you’re looking to easily visually create gradients of all types using CSS3/SCSS copy and paste-able code right into your project. The UI design Tom has chosen to go with for the generator could use some work (using Drew Wilson a barometer), but it’s certainly an awesome project that makes it too easy to create CSS3 gradients that’s for sure.

I like how you can double click the sliders to change their color or add new ones by clicking below the horizontal ruler.

Tom does mention support for SCSS in the description of the repo on GitHub, but based on his todo list, that’s not done yet.

Check out the CSS3 Gradient Designer to have some fun creating CSS3 gradients and the source on GitHub.

Fire.app – Sass and Compass, CoffeeScript, Auto Refresh, Static Builds and more #

As a throw-back to my post a few months back on LiveReload – I bring you Handlino’s Fire.app (they’re also the makers of Compass.app)

Fire.app - Dead easy HTML Prottyping

Fire.app is a menubar only app for dead easy HTML prototyping with some of my most favorite features all bundled in one. The best part? Fire.app was written in Java (JRuby) and works on Mac, Linux as well as PC.

Fire.app - New Project

While Fire.app comes with a price tag of $14.00 (10% of sales donated to UMDF), it’s GPLv2 licensed because the fine folks at Handlino love open source so much! The source code is on GitHub so you can build it your own, or even fork, modify it based on your needs as well contribute if you’d like. If you want to build your own copy, you’ll need JRuby and rawr.

Fire.app - Project Menu

One of the coolest features is that you don’t need to “install” Fire.app – you can put it anywhere, even Dropbox and sync it between computers.

Features

  • Sass + Compass
  • Template languages (Haml/ERB/Markdown)
  • CoffeeScript
  • Auto Refresh
  • Build Project (static HTML/Javascript/CSS with a single click)
  • Cross-Platform

Source on GitHubHomepageCHANGELOG

Fiddle Salad – Live editor with preprocessors, CSS, HTML and JavaScript and more #

A few days back, Yuguang Zhang reached out to us to let us know about his ambitious project, Fiddle Salad. It’s a little rough on the UX side of things …

I certainly like the problem it aims to solve. After playing with it for a bit my only gripe is that it feels a little clunky and hard to use. I wanted to create a sample document, save it and share it as an example in the post. I was bummed when I had to add 10 words or more for a description to save. Then the save button seemed to disappear. I was also bummed when I could only create an account by using a social profile (GitHub was not one of them). For all you Sass lovers out there, one thing I did love was that it seemed like Compass was being included by default.

Needless to say, Yuguang has done a great effort on what I think could be an awesome tool, and it’s even better that he shared his code for us all to learn from as well as contribute to.

Try it out for yourself.

Source on GitHubWebsiteTwitter

LiveReload – CoffeeScript, Sass, LESS and others just work #

LiveReload Screenshot

If you haven’t heard, LiveReload from Andrey Tarantsov is now 2.0 and is in the Mac App Store for $9.99!

Hey, LiveReload isn’t open source!

What’s that you say? Isn’t The Changelog about what’s fresh and new in open source?

While LiveReload may not be a true open source project, Andrey did opt to release the full source code of LiveReload 2 as well as livereload-plugins, livereload-js and livereload-extensions on GitHub.

Why did Andrey opt to open the code?

Because curiosity is the most basic and important quality of good developers.
I believe that everyone benefits from being able to study and tinker with other people’s software. – Andrey Tarantsov

So there’s no formal license attached to the code, but you are able to fork, hack and share your results on GitHub. Andrey’s only request? Don’t distribute binaries publicly without his permission and pay for a license of you use it.

If you would like to reuse parts of the code, Andrey did say in the newsletter that went out today that if you find a nice generic class or a piece of code you’d like to reuse, he will probably be happy to release it under MIT.

Congrats on the new son!

Andrey is expecting a new son any day now! So, if you’re on the fence about buying the app – that’s a good reason to support him and get a licensed copy.

Source on GitHubHomepage

Cassette – Web asset manager for .NET with support for Less and CoffeeScript #

Asset packaging is a hot topic these days. Andrew Davey brings the fun to .NET with Cassette, an asset bundler for .NET web apps. Much like Jammit or Sprockets for Ruby apps, Cassette concatenates, minifies, and manages dependencies between scripts:

@{
  Bundles.Reference("Scripts/app/page.js");
}
<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  @Bundles.RenderScripts()
</head>
<body>
  ...
</body>
</html>

… which yields individual scripts in debug mode:

<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  <script src="/Scripts/lib/jquery.js?a4babad4b" type="text/javascript"></script>
  <script src="/Scripts/lib/jquery-ui.js?53dd39212" type="text/javascript"></script>
  <script src="/Scripts/app/tools.js?4d03ae0b" type="text/javascript"></script>
  <script src="/Scripts/app/widgets.js?cf319fe0b" type="text/javascript"></script>
  <script src="/Scripts/app/page.js?485f05e21" type="text/javascript"></script>
</head>
<body>
  ...
</body>
</html>

… and concatenated, minified assets in production mode:

<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  <script src="/_assets/scripts/Scripts/lib_4bad47afb" type="text/javascript"></script>
  <script src="/_assets/scripts/Scripts/app_b7c29fecc" type="text/javascript"></script>
</head>
<body>
  ...
</body>
</html>

Cassette even supports Less and CoffeeScript. Please, someone fork this and bless the community with the pure goodness that is Sass.

#70: Foundation and other Zurb goodies

Wynn caught up with Jonathan and Matt from Zurb to talk about Foundation, their HTML5 front end scaffold and many projects from the Zurb playground. Items mentioned in the show: Jonathan Smiley – Design lead at Zurb Matt Kelly is a developer at Zurb The Zurb playground showcases many Zurb’s front end experiments. Zurb foundation […]

Bourbon: A set of vanilla Sass mixins that use SCSS syntax #

The designers at Thoughtbot have thoroughly impressed me with Bourbon, a set of vanilla Sass mixins that use SCSS syntax.

This isn’t the first time we have covered a project by Thoughtbot (search for Thoughtbot). However, this is the first project of theirs that specifically targets Sass. With the adoption of the SCSS syntax of Sass as the default in Rails 3.1, I’m sure that we can expect even more contributions from them to the Sass and Compass ecosystem.

The project was originally championed as sass-mixins by Chad Mazzola and co-conspirator Phil LaPier. 3 days ago it was moved to the Thoughbot org and renamed to Bourbon.

For more Sass related news follow @SassWatch and @TheSassWay.

What do you mean “Vanilla Sass”?

Bourbon was designed to provide a comprehensive framework of Sass mixins that are as vanilla as possible – which basically means they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.

I agree with Phil LaPier, I’m definitely a fan of Compass as well, but going vanilla Sass with this project as well as adhering to the SCSS syntax is a plus for those that are coming to Sass from CSS and requires less configs and more standard conventions.

So what do I get with Bourbon?

As stated in the readme, Bourbon is a work in progress, so feel free to fork it and help out.

// Custom Functions
@import "functions/compact";
@import "functions/golden-ratio";
@import "functions/tint-shade";

// CSS3 Mixins
@import "css3/animation";
@import "css3/border-radius";
@import "css3/box-shadow";
@import "css3/box-sizing";
@import "css3/flex-box";
@import "css3/inline-block";
@import "css3/linear-gradient";
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";

// Addons & other mixins
@import "addons/button";
@import "addons/position";

Examples!!

Bourbon does a lot so I expect you to inspect the source yourself, but I’ll list a few popular examples here.

Box Sizing

A new fav to my toolkit, box-sizing will change the box-model of the element it is applied to.

@include box-sizing(border-box);

Border Radius

Border-radius also takes short-hand notation.

@include border-radius(10px);
@include border-radius(5px 5px 2px 2px);

Position

I use position in every design. Instead of writing:

position: relative;
top: 0px;
left: 100px;

You can write:

@include position(relative, 0px 0 0 100px);

Transitions

Transitions supports multiple parentheses-deliminated values for each variable.

@include transition (all, 2.0s, ease-in-out);
@include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
@include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));

Addons and Functions

Bourbon also ships with a number of helpful addons and functions which will be extremely helpful to review for those who want to push the boundaries of their stylesheets.

Requirements and Installation

Whether you’re wanting to install Bourbon in a Rails 3.1.x project, Rails 3.0.9 and below or to a project other than Rails, such as a Serve project or a plain ol’ HTML project, there are instructions for that. Although I will say that I prefer to not copy code from a project like this into my project. I think Compass does this right by leading with including external extensions as gems and keeping them compartmentalized. Keeping it external also promotes any tweaks or changes that need to be made to be put back into the project for all to use and enjoy.

Checkout the readme for details on how to install Bourbon in your project. The only requirement (other than Ruby) is sass 3.1+.

Attention Compass users!

If you’re using Compass in your project you’ll likely hit some gotchas if you’re importing the css3 module. Bourbon and Compass both have mixins for border-radius, box-sizing, etc. You can pick and choose what to import, so go forth knowing that in some cases these 2 overlap and will collide.

Check out the project on GitHub and the readme for more details.

You can also discuss this on Hacker News.

Sass 3.1 released, now with functions, lists, and @media bubbling #

Sass continues to provide innovative new ways to DRY up our CSS. Version
3.1 is
out
and offers many new language features, compilation performance improvements, and some new command line options.

Sass, extend thyself with Sass-based functions

Rubyists have long had the ability to extend Sass, but now anyone can
create powerful functions using only Sass:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

Lists

Sass now includes some handy functions to work with lists introduced in
version 3.0 including nth, append, join, and length:

$ sass -i
>> nth(1px 2px 10px, 2)
2px
>> append(1px 2px, 5px)
(1px 2px 5px)
>> length(5px 10px)
2

There is also a new @each directive to iterate over lists:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

New command line utility and breaking changes

Sass 3.1 brings changes to command line tools and some breaking changes:

  • There is a new scss command line utility to compile stylesheets, defaulting to the SCSS syntax.
  • @import used with a path without a file extension will now throw
    an error
  • Old-style ! variable support has been removed
  • The css2sass command line utility has been removed in favor of
    sass-convert.

Check out the
Changelog
for complete release details. For a deeper look at Sass and Compass, check out our upcoming book Sass and Compass in Action from Manning, now in early access.

[Source on GitHub]