A new library to integrate GWT with any CSS Framework

[Arnaud TOURNIER]

Hello Everyone,

I come up here to let you know about a library i build, aiming at integrating efficiently any CSS framework with GWT.

This allows your application to type-safely use Sass, Less, Susy, GSS, vanilla css or any other.

From the developper point of view, it works almost the same way as CssResource which is the default in GWT.

Link : http://www.lteconsulting.fr/hexacss/

Benefits :

 - you can use any css framework and not only GSS (especially Sass and Less have a very good variable and mixin systems)

 - you can bind multiple CSS files to one GWT application. This allows you to theme your application in a very effective way

 - you can then switch your application theme dynamically without reloading the application

 - there is still optimization happening : non used CSS classes will be pruned. Also there is name obfuscation, for reducing CSS file size

 - the API is very similar to CssResource so you don't have much to learn to use it.

The product page is here : http://www.lteconsulting.fr/hexacss/

The product page tells you how to use it, how to build it. It has three use case demos.

The project is hosted on github : https://www.github.com/ltearno/hexa.tools

Of course, it is open source and will stay so !

Stay tuned, because i have other announcements to make soon

Please tell me if you find the idea interesting and if it might help you. I also very much welcome anyone wishing to contribute to this project !

Thanks

Arnaud Tournier

www.lteconsulting.fr

twitter : @ltearno

[Daniel Kurka]

Hi Arnaud,

great work!

Have you considered using a APT generator instead of hooking into the
old GWT Generator API?

-Daniel

> --
> You received this message because you are subscribed to the Google Groups
> "GWT Contributors" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to google-web-toolkit-co...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/google-web-toolkit-contributors/d3e08dc9-c6ee-4648-9234-eb8dee137745%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.



--
Google Germany GmbH
Dienerstr. 12
80331 München

Registergericht und -nummer: Hamburg, HRB 86891
Sitz der Gesellschaft: Hamburg
Geschäftsführer: Graham Law, Katherine Stephens

[Arnaud TOURNIER]

Hi Daniel, 

Not yet, i wrote the project well before use APT in GWT was hype !

But that's definitely something i will do on all my projects, as time goes by.

If i manage to migrate to APT for this project, that will replace the whole chain of gwt generators + gwt linker (which i use in this library)...

Thanks

Arnaud

> email to google-web-toolkit-contributors+unsubscribe@googlegroups.com.

> To view this discussion on the web visit
> https://groups.google.com/d/msgid/google-web-toolkit-contributors/d3e08dc9-c6ee-4648-9234-eb8dee137745%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.



--
Google Germany GmbH
Dienerstr. 12
80331 München

Registergericht und -nummer: Hamburg, HRB 86891
Sitz der Gesellschaft: Hamburg
Geschäftsführer: Graham Law, Katherine Stephens

--
You received this message because you are subscribed to a topic in the Google Groups "GWT Contributors" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit-contributors/nR2HqBTo0v4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-toolkit-contributors+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit-contributors/CALLujirghXxptfJ3KkSbhgfwPhb4GP_ss3ep%2BG47vpSofq2fyQ%40mail.gmail.com.

[Arnaud TOURNIER]

Hi Everyone,

I've just added the possibility to import any existing CSS file with HexaCss and still benefit with the name obfuscation and pruning. It is an annotation which forces the name of the CSS class name corresponding to a method instead of using the standard HexaCss naming.

To test the idea, i've bounded almost all of the Bootstrap CSS class names to an HexaCss interface. Then i built a sample which uses standard GWT widgets (it also works with pure HTML elements) associated with class names coming from the interface (in the say way as with CssResource).

The demo shows a theme switcher switching between themes found on BootstrapZero and Bootswatch in a regular GWT application ! It both uses UiBinder and programmatic creation of the UI.

Here is the link :

http://www.lteconsulting.fr/hexacss/demo/sample4/index.html

I've updated the github and the doc :

http://www.lteconsulting.fr/hexacss/

I think this might be interesting because one can rapidly benefit from a good ui looking while still having a type safe way to use the various CSS classes. Of course, it can used to wrap any other CSS library and is not limited to the well-known bootstrap. It took me about one hour to wrap the bootstrap rules.

I hope this is useful ;)

Arnaud

[Rocco De Angelis]

Hi Arnaud,

very nice work!

Short question: We have a bigger product which we have splitted in seperated GWT modules.

Each module will also be compiled separately but used on the same page.

Are the generated obfuscated css name stable so that I can reuse the CSS between the different GWT modules

without compiling them together? Or do you see some other way to share the css between them?

BR

Rocco

[Arnaud TOURNIER]

Hi Rocco,

Yes the generated names are stable and only depend on the interface's fqn and of the method name. So you can safely reuse the same interface accross different modules. Anyway you can force the name if needed with the @HexaCssExtra annotation.

Thanks

Arnaud

--

You received this message because you are subscribed to a topic in the Google Groups "GWT Contributors" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit-contributors/nR2HqBTo0v4/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-web-toolkit-co...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit-contributors/cc5136d2-51e5-4237-a852-0e3c9040bcff%40googlegroups.com.