I don't know if this is just laziness from my part or what, but is there any jquery plugin that takes a form (inputs) and build a stylized form with the colorset of the ui theme used in the page? Even better, there is a tut where it explains this idea? It's a little bit tricky to explain (trickier even with my poor english), but I hope that you got the idea.
Any suggestion?
Wijmo is a jQuery UI and jQuery UI theme based library and they offer form decorators in their free version.
Also have a look at the great jQuery UI CSS Framework documentation. You might just be able to solve your problem by just adding the appropriate classes to your form elements.
It is possible that you write a simple jQuery widget that traverse your inputs and add jQuery theme styles (ui-..... classes) to them.
You can find the idea at:
http://www.tuttoaster.com/enhancing-forms-using-jquery-ui/12/
The widget is ready at:
http://pastebin.com/bu68sDha
You may need to make some small changes in the widget.
This solution is very good if you have some server side components that build the form for you and make the final htmls ready (like jsp tags)
Related
After clicking on the Set tag/status on left, I want to open a card like this on the right.
What is the good solution for it in React? Regular CSS or material ui or react-bootstrap will be fine.
it is a nice question but depends on how much time you have and how much determinate you are.
Showing some solutions related about you asked.
Regular CSS
You will need to use Javascript to support you on the hide/show logic using CSS and JS tricks and proprieties.
It is more complicated because there is no pattern until you create yours or use someone's but on the other hand you can practice more Vanilla JS and improve your CSS skills.
Material UI
It is a good option if you want to use robust components to support you with customization and style patterns.
It has a learning scale to make the usage easier but after that it has a good flow to use its components and customize them.
Some tips if you choose Material UI, use its theme override to put your own theme into all Material UI stuff using the lib styled-components and try not to customize all components using only CSS, use props following the docs, it will be scalable.
react-bootstrap
If you are used to use bootstrap with HTML, CSS and JS I do recomend to use it because it will be faster to you to build it, but if not I recommend you to go with Material UI.
But why Material UI and not react-bootstrap, because if you have never worked with anyone so learning about Material UI using React you be more advantageous considering that its components are good to use and on almost every case them solve the problem.
Final
These are what I think about those options you gave.
I really like Material UI and what they build, the components are so easy to understand and customize using those props or classes. The lib has some integrations and tools to help on style guide creation using override patterns.
If you have never tried it, I recommend you to do that and use that.
Helo, I am new to reactJS. I am currently doing a full stack job on a forum-like website.
I was naively wondering if there is no way to just ignore the CSS step...
For example, I want to declare a standard component, let's say a button or a form. I just want to simply set the className so the it matches with the CSS stuff.
I did some search, and found nothing very convenient.
And of course, this "library" has to be open-source.
Don't know if I am clear.
Thank you.
Hi from the looks of it and the comments, it looks like you want a pre-built UI library. Basically, for React these are called UI Libraries, we have React-Bootstrap, Material UI and Kendo UI as UI libraries. They have pre-made React components with all the styling already implemented and any customization can be done separately.
You can have a look at React-Bootstrap for an easy solution to your problem.
After many fruitless days of trying to get JQuery Mobile and AngularJS routing to work together, I'm considering my alternative options..
Is there a way to use the JQM CSS without relying on JQuery's javascript?
Or is there a substitute CSS package that are recommended? something with all header/footers and lists that is available in JQM?
Of course, there is an CSS file in the package you downloaded. But all the sites functionality and the mobile adaption will be broken. You can rename the classes and the id's or directly use the classes from the css file.
Greets
There are quite a few jQueryMobile functionalities that rely solely on the CSS fole, eg. the grids. You won't get the interactions, but all the buttons looks, shapes and colors are totally useful without the JS.
Still - depends on your expectations.
And when using it like that you need to understand a bit how JQM works to know the classes and html structure that's expected, because some of these are generated by javascript.
[kind of digression]
But maybe you just dislike how big jquerymobile is?
Then you probably want to use: http://jquerymobile.com/download-builder/ to get only stuff you need, and also use tte themeroller here: http://jquerymobile.com/themeroller/index.php to create only one theme (global) and remove other themes (A,B,C)
That's how you get it a lot smaller.
You can reuse the CSS file inside he downloaded JQM package. The file jquery.mobile-1.x.x.css can be included, but make sure to include the images folder as well and have it at the same location at the destination.
If you aren't sure of which classes to include for which purpose, you can simply find it out by inspecting a JQM demo page to find out (View source will not work due to the JQM javascript).
JQS provides support for ui animations and user experience enhancement. Removing libraries will dispart you from accessing css contents created and used by javascript in order to 'manage' a front-end design. –
Yes you can use jquery mobile theme and adapt it to your needs.
Just reading there was adapter releases for your situation : https://groups.google.com/forum/?fromgroups#!topic/angular/oIxRxpkn3L0
Perhaps substitutes to css packages are documented. About heavier JQM templating and using, there are some introduction to what you'll need to take a look at like adobe theme-control-jquery-mobile.html ..
I am currently using the jQuery autocomplete feature. Functionality wise, it works awesome!
But in terms of styling (in addition to theme roller), I would really like to see something like
http://loopj.com/jquery-tokeninput/ and
http://www.emposha.com/demo/fcbkcomplete/
I am still reading the codes in these plugin, so that I can achieve similar look/behavior. Ideally, I would rather stick with jQuery UI library than switching over to other plugin. How would one go about making this happen?
EVERYTHING in Jquery is style-able via CSS. If you want to achieve a different look, simply build CSS that will override the default styles. If there's a specific style you're trying to achieve, I'm sure quite a few of us would be happy to help with ideas to make them happen.
BTW, the emposa.com site link you provided is completely dead. I'm hoping you're not trying to achieve THAT style....
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.