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
Related
I would like advice on how best to move my company toward using VMWare's Clarity system, or something very much like it. Should we use it as a template? Fork it? Integrate parts of it over time?
By Q4 of 2018 we would like to:
have a decent Design System
develop in Angular 2
use Bootstrap 4
Currently we are here:
No Design System
Bootstrap 3.3.7
AngularJS
Any suggestions will be helpful!
The Clarity Design System is composed of several parts.
There are Design resources - sketch templates for the light and dark themed components as well as documentation and guidelines for using them. In addition, we publish three packages
#clr/icons - an icons library that can be used standalone. The icons are web-components and can be used like any other element in a project after you integrate it into the app
#clr/ui - standalone html/css for clarity themed components. For obvious reasons more advanced components like the datagrid or wizard are not part of this
#clr/angular - Clarity components for Angular applications.
To answer a few of your questions.
Q. Should we use it as a template?
A. No, Clarity (#clr/angular) should be integrated into your Angular application so you can use the components to build up the application with them.
Q. Fork it?
A. you are welcome to fork the code, its open source software (MIT License). If you want to stay up to date with the latest bug fixes and enhancements though I would suggest integrating it into a project and keeping up with the incremental releases. We generally try to release once a week and callout breaking changes at least two versions with deprecations.
Q. Integrate parts of it over time?
A. I (as a Clarity UI Engineer) would recommend adopting it fully from the beginning when you start your next Angular app. If not, you run the risk of competing design systems and conflicting styles and UX patterns.
We do not recommend using Clarity with Bootstrap 4. Even though our grid is based on an earlier beta version of Bootstrap 4. We would like to remove that as a dependency in the future.
I am involved in a project that several people working on a react native project.
I need to find a way to separate the styling tasks form code, in a way that UI develop can work without the need of code developer (from my point of view, a style is a person who define the structure of UI, place components on screen and also define their color and visual representation).
my questions are:
Is there any tools that the style developer can use to create styles and export suitable files for inclusion to project?
How can I make sure that the two team work without duplicating their work by other team? I came from a WPF and Web development, and in that systems, there is a good separation between the UI and codes. For example, In MVVM, the only agreement that stylist and coder should have is the name of component, and the stylist can make all of the styles and coder can do all of the coding without repeating their work (I know that this is over simplified, but the concept is there and a good team can use it). In a web development, stylist create the HTML and CSS, and the coder use angolarJS or JQuery to control the component and attach to their events.
In our styling team we are using skitch, can this tool generate suitable style code for react native? If yes, what would be the workflow?
Any other suggestion on how best to separate styling from coding in react native.
I don't have the best answer for this question, But I can provide you some feedback & tips from my experience.
For separating UI & Business code like in MVVM, you can separate the classes as
Container class (handles all business logic) and
View class (Only responsible for presentation) with styles defined as a separate class that can make use of some universal theme provider
There can be multiple view classes (iOs, Android , if possible Web) but all them will use the main container class for business logic (REfer 1st link for more details)
Refer:
https://blog.cloudboost.io/react-native-a-deep-dive-part-1-5a982f847d20
https://medium.com/#dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
For styling you can opt for some Theme Provider classes that will hold universal themes as an object. The coder can use these styles in the components. The main theme will be defined in the root class with the provider. If you are carefully reusing these styles, you only need to update the styles in one place updating all of them. Also there is support for dark & light themes.
Refer:
https://github.com/callstack/react-native-paper
https://github.com/xinthink/react-native-material-kit
https://github.com/xotahal/react-native-material-ui
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
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..