Sep 1, 2013
GSoC weeks 10-11 | Creating sassy CSS
The primary task going into week 10 (after my last blog post) was to complete the flipswitches (keeping in mind the accessibility of course) so that it could be integrated into the ATutor system preferences page.
One of the things was to make it look different in the off position. I couldn't divulge into the CSS much as it was quite a big (and complex) file and that would have taken a lot of my time. One thing that struck me one night was adding a grayscale filter to the switches in the off position. True that it would not work in old browsers (without CSS3), but that is something that I had to live with. Also, if the radio switches were disabled, I added a separate opacity filter to make them look disabled.
It still didn't look so good. I finally decided to add ON and OFF labels in place of the default ones. It finally looked good. If time remains, maybe I could add some more things to it.
With all those over, I was left with something I was really looking forward to- the recoding of the CSS using SASS. Although coding a 3000 line CSS file is not easy, I am glad I took up the task because I came to know SASS is a wonderful language! More on it next week.
Liked this post? Have any suggestions? Just let me know. Feel free to comment below!