はてなブックマーク

The other day, I was having a look at featured pens from CodePen to kill some time before getting a haircut. I ended up checking a pen from Yelp Devs’ (in the person of Benjamin Knight) in which they featured their star-rating system we can see pretty much all over their site. Star-rating widget from Yelp I was both surprised and pleased to see they are using Sass for their CSS codebase, and more

Edit (2014/11/16): please, don’t use this in a live project. If you come up with a case where you need to parse/encode JSON in Sass, consider having a Ruby/C/whatever helper function for this. If you are a reader of CSS-Tricks, you might have come across this article a while back about making Sass talk to JavaScript with JSON. The main idea behind this write up is to provide a way for JavaScript t

The code explained in this article has been slightly revisited in the pen afterwards. For the ultimate version of the code, check the pen. You know how much I love playing with Sass lists. I think they are the most powerful and useful feature in Sass. It’s a shame there is so few functions to deal with them. This is why I made SassyLists. Most importantly, I always wanted a console.log() for Sass.

Edit (2014/11/16): I have changed my mind again and no longer use Sass to “remify”. In most projects, I’ve noticed it’s better to use a postprocessor such as px_to_rem. Edit (2014/05/13): this article is getting old and while it still is perfectly valid, I have kind of changed my mind about this whole px to rem thing. I now use something simpler, like this mixin. About REM Everybody loves relative

Edit (2014/05/13): it looks like Internet Explorer is not the only browser to support the Grid Layout anymore since Chrome 34+ seems able to handle it quite well without any prefix. To the future! In the last few days/weeks, I have been helping Chris Coyier with CSS-Tricks’ Almanac. It seems he doesn’t have enough time to fill the last remaining entries, so we’ve been a few to help him out by writ

If you like to experiment or do a little bit of webdesign, then you have probably already tried to put elements on a circle. Unless you’re a CSS hacker, you’ve probably set a class/ID per item, then used left and top accordingly to position everything around the circle. 5 images positioned along a circle with CSS But in most cases, you would have ended doing this with JavaScript, or jQuery. There