Using CSS frameworks i.e. 960js, Bootstrap with Liferay?

[Paul Solecki, módosítva 11 év-val korábban]

Hi folks,

I'm new to this whole theming/layout thing in Liferay. I noticed that it has it's own layout css similar to that used in 960js, Bootstrap etc.

I have a design to implement across various systems including Liferay.

All the other systems don't have their own frameworks so I will use either 960js or Bootstrap to implement. My problem is how is this likely to clash with Liferays layout system? Will they work nicely together or am I going to have to have a separate layout/CSS just for the Liferay instance?

Does anyone have any experience of this?

Any pointers about the best way to implement would be great

Cheers,
Paul.

[Sami Mikkonen, módosítva 11 év-val korábban]

If you are developing for Liferay 6.1 (GA2) you can use Compass, which has Blueprint included.

More about Compass and Liferay
http://www.liferay.com/web/bavithra.rajendran/blog/-/blogs/12120953

More about Compass it self
http://compass-style.org/

Only bad thing is that compass configuration file is not easily (if ever possible?) to configure and for that reason you cannot use for example Sprites or use extension libraries for Compass (such as Susy) but otherwise I recommend trying it out .

[Aidil Goh, módosítva 11 év-val korábban]

I've had the chance to work on liferay themes, most recently with Twitter's Bootstrap.

While it seems hard at first to use bootstrap entirely, it did not take me long to use it. The best way to integrate bootstrap, is to make sure you create an entirely new theme and not overwriting an existing theme... I've had to refer to this book to do custom themes http://www.packtpub.com/liferay-user-interface-development/book

About clashing, yes it does clash with Liferay's default css. Some clashes that you'd notice are how bootstrap buttons can go wonky because Liferay has its own buttons css.

One way for me to ensure no clashing, is to only load Liferay's css if admin is logged in. Else, the public will only see site using bootstraps css. However, if this is done, you may not be able to use certain default portlets properly...