Archive for the ‘sass’ Category

Build a Style Guide Straight from Sass

Posted on: No Comments
Last fall, our dev team wanted to get started with style guides. We had added a new member to the team, and as he was getting up to speed, we realized how lacking our project documentation was. If you've ever been a new developer on a team with weak do...

Front-End Tooling Trends for 2017

Posted on: No Comments
Do you have more than two years' development experience? Are your advanced CSS skills aided with Sass and Autoprefixer? Is your JavaScript knowledge reasonable and you're happy using Gulp, npm, and jQuery? If so, you're a typical developer, according ...

A Thing To Know about Gradients and “Transparent Black”

Posted on: No Comments
Say you have a gradient in CSS that goes from red to transparent. Easy, right? Like this: .element { background: linear-gradient( to bottom, red, transparent ); } There is a pretty big gotcha here, though. In Chrome (also Android), Fi...

From Sass to PostCSS

Posted on: No Comments
Tyler Gaw documents his process of moving off Sass and onto PostCSS, but keeping most of the code the same. That meant making sure he was using PostCSS plugins that would replicate most of Sass' functionality, like nesting and mixins and whatnot. Tyler...

Loops in CSS Preprocessors

Posted on: No Comments
If you've ever watched old sci-fi flicks, you know how powerful loops can be. Feed your robot nemesis an infinite loop, and kaboom. Robo dust. Preprocessor loops will not cause dramatic explosions in space (I hope), but they are useful for writing DRY...

inStyle (Modifying the Current Selector `&` in Sass)

The following is a guest post by Filip Naumovic. Filip has built a Sass tool to help with an issue I know I've experienced many times. You're happily nesting in Sass. You're maybe a level or two deep, and you need to style a variation based on some par...

Animated Animals in CSS and SVG

Posted on: No Comments
View demo Download source Today we want to show you how the clever use of HTML, CSS sequenced animations, and SVG filters can bring to life one of the most unlikely (yet adorable) things to be seen on a web page – animals. We’ll exp...

Building & Maintaining OUI (Optimizely’s UI Library): Part 1/2

Posted on: No Comments
The following is a guest post by Tom Genoni. Tom is going to introduce us to the thinking and process behind Optimizely's new UI library / Sass framework. Part 2, by Daniel O'Connor, looks at some of the technical and integration bits. When I first sta...

Front-end Tools: Some of My Favorite Finds of 2015

Posted on: No Comments
We’re just about at the end of 2015 and I’m sure you’d all agree it’s been another year jam-packed with new tools for web design and development. While doing my newsletter I’ve come across lots of interesting things, so I thought it would be ...