Is there a sort of css framework which i can add to a gwt project, and this will completely set a new UI to my gwt application. Sort of changing the look and feel.
I love GWT, but others like Vaadin are so good styled, if there were a complete set of css librarys that would make my app a lot nicer would we great.
I think we can be great developers but not so good designers.
Thanks!
I would recommend starting with http://gwtbootstrap.github.io/
As well as: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss
I would then dive deeper into the GWT docs to get a good handle on creating your custom themes. At some point any styling theme/framework will fail your needs and you will need to have some fundamentals for styling yourself.
Personally, I highly recommend using UiBinder and ClientBundle:
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder
http://granitode.wordpress.com/2012/04/19/gwt-uibinder-using-a-clientbundle-with-cssresources/
#fguespe, I'm not aware of something such for example twitter bootstrap that you 'just' plug.
Eventually the 'web designer' needs to know about specific gwt CSS classes that impact the look and feel. If importing the GWT 'non plain' themes, you'll need to write customizations.
Yes indeed Vaadin and GXT provide a default nicer look and feel... Let's just fire all Google devs for a lack of focus :-)
Related
I have something on my mind for quite a while but couldn't find an answer to it. Consider the following:
You like to build a fancy website with React and have to decide which front-end framework you should use. In my example I have chosen Material-UI.
Now you came to a point where you need more features like a responsive grid system, show/hide styles etc. Instead of implementing them on your own (or copying it from bootstrap/foundation, for example) you think: 'Hey, why wouldn't I include another framework beside Material-UI'.
Now comes the question. I know that most of the css frameworks available have their own normalisation css and basic styles for typography and other elements.
Can I safely include another (more featured) css framework beside Material-UI without breaking fundamental things or should I avoid that?
Furthermore, what is a good practice approach to extend the css features without copying parts from other frameworks and without reinventing the wheel all the time. Did you ever had a case or project where you had to combine multiple front-end frameworks and how did you solve this problem?
Thanks for your feedback.
Cheers
Gregor
FYI, there's a Material Design version of Foundation, you can check it out at http://eucalyptuss.github.io/material-foundation/
Now, talking about your doubts... one should be very careful when mixing and/or using more than one framework at the same time... one issue can be conflict, other can be unnecessary bloating which could make load time heavier.
However, if you are aware of that, most of modern frameworks (as Foundation) can be compiled partially, so you will be loading only the stuff you'll use, minimizing all possible issues.
Have been thinking this exactly thing lately.. I would choose one that has most of the features i need in my project. I usually go just with Bootstrap (sass version) and use only the styling part of that (css grids mostly).
Mixing frameworks will eventually be hard to maintain and you have to include lot of extra (unused) features into your application. When using some "cool", full featured components like Material-UI has, there will still be times when some component doesn't have just the property you would need.
So my opinion is:
Use some framework for styling only. This way you have uniform look in your site. Or even just some responsive grid library could be enough.
Usually basic html components are enough to fill basic needs, you can just build your own custom components for special needs (or use some from npm library). This way you have just the features you need.
This way my site is not depending just some single framework. I can change the styling part anytime, i can change one component to another etc. without having to re-write my whole application just because it's been developed entirely with some "full featured" framework.
I have implemented a Rails project which has a lot of forms, but they do not look good. The new, edit, and destroy buttons are very close to each other. Listing the items in each form is also ugly as the columns are very close; they definitely need CSS and styling. Is there any sample or template that I can use?
For general styling you can use Bootstrap, there is even a gem to make it easier to integrate.
For better layouts and automating the form building process such as new, edit actions, you can use Formtastic.
Another one that's as popular is simple_form.
You can find even more form builders at the ruby toolbox site.
As you have mentioned little about your application, its hard to tell what styling you should chose. However as #olive_tree mentioned, bootstrap is simpler and a convenient option. You may want to check this rails cast
http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast
Bootstrap is definitely a good place to start. Personally I prefer ZURB Foundation, though, but that is mostly a matter of preference. Here is a link on how to integrate Foundation the easiest way:
http://foundation.zurb.com/docs/applications.html
I'm developing a ASP .NET web project that uses: jQuery, jQuery UI, reset/normalize css stylesheets. Most of the CSS is crap, so I'm going to rewrite it + I will have a budget to it :)
I came across two fancy solutions that I would like to learn:
SASS
Bootstrap
I wonder, how to "mix" my existing application with these solution. When it comes to SASS, it seems to me pretty obvious - just rewrite CSS and be proud of new clean meta CSS, however I'm not sure about Bootstrap. What are the advantages of it if I don't want to change the layout of my site?
Another thing: can I run into possible issues when including Bootstrap / SASS into my site?
Twitter Bootstrap (TBS) is a CSS framework and its original purpose was for website and web app prototypes. So if you want to start from scratch with very thorough and well styled CSS, then bootstrap is great.
Twitter Bootstrap is NOT necessarily the right solution if you want to keep the majority of your existing UI, especially if your existing UI doesn't match up well with their scaffolding, grid system, and other elements of their UI styles (forms inputs, buttons, typography etc). You'll find yourself having to override a lot the framework's properties, which kind of defeats the purpose.
As #Nathron mentioned, if you try to mix TBS with your existing code, you could run into conflicts. Creating a customized build of TBS that includes only the elements of their framework that you want would be the best approach there: http://twitter.github.com/bootstrap/customize.html.
Regarding SASS, if you want to use it in combination with TBS, check out https://github.com/jlong/sass-twitter-bootstrap.
From their site: The Boostrap JS is for "interactive components for things like tooltips, popovers, modals, and more". So if you are using any of those, make sure you don't have conflicting JS functions.
You could run into issues with the CSS if your class names are the same as the ones that Bootstrap uses. Many of them are a little obscure like "darkwell", but some of them are common like "dropdown", so you just have to keep an eye out for that.
Easiest way to see is to download it and play around with it :)
What framework is more friendly and open towards css customisation? How ugly will it get? Ideally they should look and behave exactly like their kendo counterparts.
(To give some context: I have to choose between the two frameworks and maybe later
will hire a webdesigner to mimick Kendo's web UI look & feel.)
As an example: Kendo's calendar picker UI
http://demos.kendoui.com/web/calendar/index.html
That date picker seems pretty standard fair. Dojo's picker (the one I am most familiar with) will handle it.
The skinning will be the trickier part. Dojo has good theme support, so you should be in good shape there, but it will still require a lot of effort to get things looking the way you want. (Having a web designer will be a big help).
What I would do if I were you is look at your project, and see what widgets are must have, then make sure whatever toolkit you go with has them.
I would be surprised if any prime-time JS framework didn't include skinning support that would handle the look and feel you want to add. Still, you are going to have to dig into that support and learn it, and end up dealing with a lot of pretty involved layout and CSS.
It's still in its early stages, but you can try playing with the theme editor at http://maqetta.org to customize Dojo's Claro theme.
Yesterday I used jQuery UI for the first time and I think I'm going to switch from Dojo to jQuery UI.
I noticed that jQuery UI comes with a set of CSS themes.
Can I use them in my pages for non-jQuery related stuff?
Are the CSS class names subject to frequent changes?
Are there any other things and/or best practices I should be aware of?
Yes, you can use them wherever you feel like, just specify the classes you're interested in using.
JQueryUI doesn't make a habit of changing its class names, so that shouldn't be much of a concern.
Not much more to say except to make sure JQueryUI already handles a particular styling you're looking for before you go to code your own.
Can I use them in my pages for
non-jQuery related stuff?
Yes you can. They are just CSS / images that follow particular naming conventions.
Are the CSS class names subject to
frequent changes?
Probably not. I don't see the UI team changing them in any big way without prior announcement of the changes and reasons for the changes.
Are there any other things and/or best
practices I should be aware of?
Have a look at themeroller if you haven't already - it's the easiest way to build themes for your UI components.