I am building a web application using Angular 4. For designing, I am using material design lite. However, I want to implement an interactive carousel using MDL that gives me smooth look and feel and goes well with my navbar but I cannot find any documentation for it on the web. Is it possible to do so? mynavbar-mdl
Is that what you're looking for? http://leifoolsen.github.io/mdl-ext/demo/carousel.html
Related
I'm building a web application using ReactJS.
I would like to know if it's a good idea to combine React and Bootstrap or if it's completely useless? Are there things I can do with one and I can't do with the others?
I know that Bootstrap is a Framework and React is a library but I'd like to know what's the difference between the two, since I read some articles explaining the difference between a library and a framework and couldn't really understand!
I would recommend going through this tutorial:
https://ourcodeworld.com/articles/read/561/how-to-use-components-of-bootstrap-4-in-reactjs
Basically, they aren't meant for the same purpose: you can write the business logic (~how your app will work) in ReactJS and then you can show it to the end user with some custom CSS class magic written in Bootstrap 4.
Hope that helps!
The difference between a library and a framework is explained really well in the following Stackoverflow post: What is the difference between a framework and a library?
If you want to use Bootstrap 4 in ReactJS you can use the following super easy and nice to use library: Reactstrap.
I hope this helps you.
Bootstrap is a CSS framework, It is used to make responsive and beautiful websites.
React js is a view library and makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
You can use them together if you want to build interactive and beautiful
websites.
To include bootstrap in React,
First refer this, Bootstrap webpack
This is one way of using bootstrap in reactjs projects.
The advantage of this is that you get access to latest bootstrap css.
The disadvantage of using this is its complicated to use jquery plugins in reactjs. However if you are only interested in css, then it's perfect.
Using this you can directly use bootstrap classes from documentation and get more control.
Just use className instead of class
If you want simple setup, then you can use reactstrap link
Other frameworks include react-bootstrap link
This does not mean, that you have to use bootstrap only. You can use any other css framework like Bulma, Foundation etc.
Is it worth it using jQuery with React ?
My opinion is not to use jQuery with React, as jQuery or jQuery plugins changes DOM structure, This in turn causes problems with reactjs virtual DOM.
This does not mean you cannot use jQuery, you can, but its little different than normal use.
Reactjs has provided a way to use jQuery and other plugin here Integrating with Other Libraries
I was looking to make my page better, and I coundn't find many examples of how can I add more complex components to the MDL design. I found single component "mdl-select" and that's it.
Is there any page or gallery of components, even paid, that I can browse and take a look at some showcases other than the main framework provides?
I have browsed the page getmdl.io completely and I find the showcases not that inspiring in comparition to some other material design frameworks such as materializecss.com for example.
Material Design Lite is not a framework. It is an implementation of Material Design for web by Google and there is no any paid service in Material Design Lite. Here is the full components provided by Material Design Lite: https://getmdl.io/components/index.html
Edit: Here is the custom unofficial mdl-select components by CreativeIt: http://creativeit.github.io/getmdl-select/
Try darkboard as showcase of material design library
https://github.com/CreativeIT/material-dashboard-lite
My web app is built using Zurb Foundation for the UI layer. The more I read about Material Design (getmdl.io) the more I like it. I also understand that the Material Design toolkit is not comprehensive as Foundation or Bootstrap maybe. So my question is - is it possible for me to use both? For example - use Foundation for layout etc and use Material Design for stylesheet and components?
Or am I completely missing the point and would be creating an application that would be a nightmare to maintain? Advice welcome..
The short answer to your question is yes you could use both but the work required to get them both playing nice together would be a huge undertaking.
Personally, I think using both is more trouble then it's worth as they essentially are the same thing (Front-end frameworks) however, one admittedly is more aesthetically appealing. Since you're already using Foundation I would stick with it.
You can always take specific components from Material Design that you like and include them with Foundation although this would be much easier if you were using the scss version.
Hope that helps.
Maybe the project referred below will help, if that's the direction that you want go.
Material Design version of Foundation Framework by Zurb
http://eucalyptuss.github.io/material-foundation/
The Visual Style Guide of the Web Starter Kit provides a couple of elements as reference for your own development. However, I wonder why no forms are provided. In contrast, Bootstrap offers handy form helpers. Why is there no such thing for Web Starter Kit.
Note, I have found these two guides:
Forms and User Input
Create Amazing Forms
But where is the tl;dr copy paste solution?
In the next version of Web Starter Kit we are hoping to add some things around this:
Form elements from the material design spec.
Change the styleguide to have some example forms.
This should be out late january with any bit of luck. You can see the work on the material-sprint branch if you are super keen: https://github.com/google/web-starter-kit/tree/material-sprint
At this date, Web Starter Kit uses Material Design Lite.
What you are looking for, is the style guide / reference of Material Design Lite:
Components: https://getmdl.io/components/index.html
Styles: https://getmdl.io/styles/index.html
EDIT: Looks like Material Design Lite is deprecated and being replaced by Material Design Components. See Why was material design lite(MDL) deprecated with MDC?
I´m planing to use Cordova v3 to develop a generic application to target mobile devices using HTML/CSS. Which is the best solution in order to reuse most of the html but having the visual style for each mobile platform? Which will be the best css/framework to use in this case (preferably free)?
Thanks in advance.
As you said "but having the visual style for each mobile platform?" I understand you are searching for a native look in the apps. the other answers are good frameworks however unless you want to spend time tweaking css they will not look similar to a native UI (visually).
I have worked with Twitter bootstrap and jQM. So far so good but for a native UI look I will go for the following options which I think are the best.
These are my top choices after spending a considerable time looking for a jQM alternative as I am not really happy with it in specific aspects.
EDIT: I am adding two new options based on my experience and what I have found so far (ionic and onsen ui).
Ionic Framework
http://ionicframework.com/
Intended to develop hybrid app using Angular JS is a really gem.
I have been working with it and it has really helped me to develop faster than when using jQuery.
It also was UI elements that you can use out of the box and they are styled properly for iOS and Android although I think its style is more iOS-lish.
Pros
Angular JS based framework
Speed up the development process because of angular JS powers
Very well documented and a lot of examples and tutorials and recipes.
You could use the CSS without using angular if it is required
Free and open source
theming is done via CSS or SASS
Enough components out of the box to start building and app.
Cons
Maybe reading the ionic documentation and the Angular ties if you want to enjoy all of its powers, but it worth it.
Onsen UI
http://s.onsen.io/
I have not work yet with it but it looks like a really complete UI option for hybrid apps.
Pros
Work with Angular and jQuery was well
Free and Open SourceFree and Open Source
It has a theming tool which make easier to customize the look in case you are afraid of CSS or SASS.
Kendo UI mobile
http://www.kendoui.com/mobile.aspx
Pros
It help you create a native look with already native UI looking elements for Android, iOS, Windows Phone, BB.
Incorporates an MVC framework
Theming machine like jQM theme roller
Looks solid (I am looking forward to use it soon)
jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.
Cons
It is not free for commercial use.
PhoneJS
http://phonejs.devexpress.com
Pros
jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.
Optionally support Knockout.js for MVVM user interface development
Cons
Seems like its community is far less reduced in comparison with kendo, so I am not sure how much people are out there using it and that could help later.
It is not free for commercial use.
Chocolate chip UI
http://chocolatechip-ui.com
Pros
iOS 7, Android Jelly Bean and Windows Phone 8 UI looking
Open Source and the project looks active
jQuery compatible
ChocolateChip-UI uses its own JavaScript library, ChocolateChip, for DOM manipulation, Ajax requests, etc. It is very similar to jQuery. (they claim have better performance than jQuery and Zepto)
Cons
Doesn´t seems that have a wide community out there
Steroids
http://www.appgyver.com/steroids
If you feel like a adventure explorer take a took at steroids, which is cordova compatible and they claim you UI will perform as well as native.
It is quite new, I haven´t give it a try but I seems promising, however as still is not widely used I did not decided to use it as having a lot of people using it is helpful when you face problems.
NOTE: If other have interesting alternatives to experiences with this or other UI frameworks for cordova/phonegap please share!
My suggestion would be jQuery Mobile which supports almost all mobile devices in the market.
For the list of supported devices: http://jquerymobile.com/gbs/
1) It provides a native feel for each device platform.
2) Supports all platform
3) Easy support and 3rd party plugins
It's been said by some that jQuery mobile might be slow.. but you can tweak its settings to make it good.
You could use Onsen UI. It claims to be faster than jQuery and has its own theme roller and is built to be compatible with PhoneGap/Cordova.
try you using twitter bootstrap, http://getbootstrap.com..
might be a solution for you, because twitter bootstrap is framework for html and responsive code for all device,, check resolution web in http://quirktools.com/screenfly.. and you can convert web with phonegap..