Wherever possible, we should avoid nested rules in less/sass. When you start using less/sass and the way you can create nested rules to compile to full css, it is so Cool, but I found my team creating nested and overqualified rules automatically. We were happy about it, thinking all the css for a section will . . . read more
Articles in the Year 2013
Neat & clean html conditional classes
We have been using html conditional classes for a couple of years now. We have always talked about neat and clean code. Out of all the things, your html conditional classes should be neat and clean, precise, compact and targeted correctly. After-all, this is the very first thing you serve. Lets look at the most . . . read more
Progress Bar / Profile Completeness Meter with the Text Cut in Two Colors
What are we Creating today ? This is one of the first innovations. This dates back to around January 2011. At that time, when I was able to code this, it looked so cool to me. Lets get to it: We are going to create a cool Progress Bar ( or in specific case, we . . . read more
@content block in mixins, Sass vs Less css
There are numerous discussions on Sass Vs Less out there, I am not getting into that. In this article I will just discuss the practical usecase of @content in Sass mixins, Less do not have anything like that and how we can find a workaround for Less Update 10-04-2014: feature released in lesscss v1.7.0, we can . . . read more
compass-animation saves all the time and efforts
Just wanted to introduce the compass animate plugin. It great and saved our lots of efforts. A normal css animation looks like this: But that’s not the reality, you need to include all the vendors 😡 , your code gets from 1x to 4-5x of lines immediately. Multiple times copy pasting the same code and . . . read more
Things to keep in mind before embedding web fonts & hosting them on a CDN 1
Web fonts served from Amazon S3 are not working in Firefox. We face this issue every time we deploy a new project and S3 bucket. We found the solution here. I am just summarizing the main points in the following article. We are looking into this very specific case. You need to enable Cross Origin . . . read more
Checklist before merging / pushing changes to main branch
In the various git workflows you use, you always have a main branch, reserved for the stable code, the mainstream deployments and the version tagging. We touch these branches with precaution and care, right. Now in the agile development process we need to do rebases and merges often. That’s the necessary part. Now these rebases . . . read more
Transparent link overlay, z-index may not work in older Internet Explorers
We have worked on all sorts of user interfaces, designs and specs. Now there are certain sections in which we need a link on the whole block. The easiest way to do this is to wrap the whole block in an anchor tag. Now if you have complex markup in your code block, you can . . . read more