As of the responsive design, usually we will pick a responsive framework like Twitter Bootstrap as the start point and build our own on top of it.

But Liferay 6.1 does not play well with Twitter Bootstrap. Since Liferay 6.1, Liferay has a new feature which supports SASS in your CSS files. It validates and parses your CSS using Dynamic CSS filter. But the SASS parser library that Liferay 6.1 using has a issue in handling the transparent keyword. When there is a transparent keyword in your CSS, an "Sass::SyntaxError: Invalid CSS" error will occur and your CSS will not be parsed. Unfortunately Twitter Bootstrap uses a lot of transparent keywords in its CSS file.

To solve the issue, we can upgrade the SASS parser library to a newer version. I wrote a blog post for detailed steps: http://www.liferay.com/web/kzhang/blog/-/blogs/resolve-the-sass-syntaxerror-invalid-css-error-in-liferay-6-1

Hope it helps.