Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

SASS mixin for grid generation

posted in CSS3 on 2013-08-20   div wrapper grid sizing border box box sizing border columns mixin div div width sass

The mixins in SASS are really helpful. Here is something really short which I just start using. It's a mixin which I apply on the grid's container.

read more

SASS mixins covering media queries

posted in CSS3 on 2013-08-15   point media content media query min width break points media queries means sass mixins

These days I'm working on this little thing. It's a CSS micro framework following atomic concept. My preprocessor of choice is SASS. That's why I wrote several articles on this subject. Today's post is about media queries mixin.

read more

Two handy and advanced SASS features and their limitations

posted in CSS3 on 2013-08-13   mixin margin item reset list include extend sass items interpolation

I really like SASS and I use it a lot in my daily job. There are tons of useful features. However there are some things which I want to do, but I can't. There are limitation in the syntax and missing functionalities. Sharing what I found, I want to know if you meet those limitation and how you get around them.

read more

SASS: universal mixin for box model properties

posted in CSS3 on 2013-08-09   border left bottom mixin values border top padding margin property

I'm currently working on OrganicCSS - a micro framework based on atomic CSS concept. I'm thinking a lot for name conventions, classes and of course mixins. I decided to combine three mixins in a file called _box-model.scss. They will provide a shortcuts for margin, padding and border properties.

read more

SASS: @content directive is a wonderful thing

posted in CSS3 on 2013-08-06   button font size 20px color mixin content border font size 30px 20px text decoration size 20px text block font size display block font

I just started using SASS and I love it. A bunch of cool features, which will help me to improve my CSS coding. @content directive is one of them.

read more

SASS: differences between mixins, extends and placeholders

posted in CSS3 on 2013-08-05   awesome width height mixin body placeholders radius css sass extend awesome

I used LESS a lot. These days I decided to try SASS and to be honest it's a better choice for CSS preprocessor. It just gives me more functionalities and better control on my code. There are few instruments for architecting your CSS logic - @mixin, @extend and placeholders. However there are differences between them and specific use cases.

read more