New library to integrate any CSS framework with GWT

138 views
Skip to first unread message

Ltearno

unread,
Apr 1, 2015, 5:08:01 AM4/1/15
to google-we...@googlegroups.com
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.


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
twitter : @ltearno

Peter Donald

unread,
Apr 1, 2015, 6:30:05 AM4/1/15
to GWT Mailing List
This is fantastic and something I have felt the need for. Looking
forward to giving it a go.
> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to google-web-tool...@googlegroups.com.
> To post to this group, send email to google-we...@googlegroups.com.
> Visit this group at http://groups.google.com/group/google-web-toolkit.
> For more options, visit https://groups.google.com/d/optout.



--
Cheers,

Peter Donald

David

unread,
Apr 1, 2015, 8:45:14 AM4/1/15
to google-we...@googlegroups.com
Very interesting, great work!

Vassilis Virvilis

unread,
Apr 1, 2015, 10:24:35 AM4/1/15
to google-we...@googlegroups.com
What a terrible day (April fools) to announce such an interesting library.
Vassilis Virvilis

Arnaud TOURNIER

unread,
Apr 1, 2015, 10:51:01 AM4/1/15
to google-we...@googlegroups.com
Yes, i just realized it was April fool's day !!!

Really funny because it's been a long time i wanted to announce that, by coincidence it happens today :)

I might re-announce it next week, just to kill the confusion !

Thanks !
Arnaud

You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/DWgZoxJyuFs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.

Ed

unread,
Apr 3, 2015, 8:57:24 AM4/3/15
to google-we...@googlegroups.com
Awesome work.
How is your experience with using it in production ? (Load/size/etc...)
Message has been deleted

Ed

unread,
Apr 3, 2015, 9:19:35 AM4/3/15
to google-we...@googlegroups.com
I am curious to the reaction of the gwt dev team member.
Maybe you should drop this in the contributor gwt forum.

I like your approach but ......
In my experience css/html should be put as much as possible outside of gwt, and the html/css should by lazy loaded when needed, a bit like RedHat errai is using. Some advantages:
1) Flexibility: changing html/css with changing code. 
2) Css/Html experts are much easier to find.
3) Faster changing of css. Css changes in gwt are not always fast because java isn't well suited for it, java is verbose, especially when working with themes (references from css to static methods for example).
4) Better integration/binding of the html/css with existing published cms files (json/xml)
...

This results in a much higher productivity, especially when you have all clients wanting their own themes/styling, and gwt developers are very hard to find. (I tried different approaches: putting all css/html inside gwt (cssresource), outside, a mixture, etc..)

I would love to see that GWT core incorporate some of the Errai templating/binding mechanisms in the future.
(I am planning to play with some of the errai mechanism and make it work with my current cms xml files I use... I just have to find some time :(

just my 50 cents.

Arnaud TOURNIER

unread,
Apr 4, 2015, 5:38:13 AM4/4/15
to google-we...@googlegroups.com
Hi Ed,

This project is indeed used in one big application in production (100k+ loc on the client side).
I use it mainly to maintain 3 different themes for the application (testing env, preproduction and production). This allows my users to visually know which platform they are using.

Because it works well, i had the idea to extract it from the main project and give it to the community.

So of course, there might be some work to be fully industrialized, in order to adapt to any context.

Any contribution, idea and so on is of course welcome !

Thanks
Arnaud Tournier

Le ven. 3 avr. 2015 à 14:57, Ed <post2...@gmail.com> a écrit :
Awesome work.
How is your experience with using it in production ? (Load/size/etc...)

--

Arnaud TOURNIER

unread,
Apr 4, 2015, 5:45:40 AM4/4/15
to google-we...@googlegroups.com
Hi again Ed, sorry i realize i didn't really answer your question !

So as for the size, the generated CSS file size for the whole app is ~20ko so i consider it is ok to download it from a <link> tag in the host page.

I see a potential optimization where the server could embed the default theme in the host page, in order to avoid the network round-trip to load the css file. But since the production application i made with this project is accessed from a LAN, i didn't yet put any effort in that direction.

I shall soon produce a roadmap for this HexaCss, so that if people are interested, i can prioriticize the features and organize contributions...

Thanks
Arnaud

Le sam. 4 avr. 2015 à 11:37, Arnaud TOURNIER <lte...@gmail.com> a écrit :
Hi Ed,

This project is indeed used in one big application in production (100k+ loc on the client side).
I use it mainly to maintain 3 different themes for the application (testing env, preproduction and production). This allows my users to visually know which platform they are using.

Because it works well, i had the idea to extract it from the main project and give it to the community.

So of course, there might be some work to be fully industrialized, in order to adapt to any context.

Any contribution, idea and so on is of course welcome !

Thanks
Arnaud Tournier
Le ven. 3 avr. 2015 à 14:57, Ed <post2...@gmail.com> a écrit :
Awesome work.
How is your experience with using it in production ? (Load/size/etc...)

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/DWgZoxJyuFs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-toolkit+unsub...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages