I like the idea of reusable web elements in Polymer.js. However I am not convinced that Google's material design is the way to go, especially in desktop environment.
So is there a way of "styling" Polymer or will there be any other "skins" than just material design ?
Polymer is not equal to material design. It's only a library that makes developing web components a lot easier. It won't stop you from creating new components that follow other design guidelines (although currently the paper-elements make most of the UI web components provided by Polymer).
And as for styling, Polymer promotes the up-and-coming CSS Custom Properties (variables and mixins) for theming web components.
Related
In one of the projects i'm working on, the team decided to use angular/flex-layout.
I was wondering, what are the reasons to use it at all ?
I could only find reasons against.
For example this code:
<div fxLayout="row" fxLayoutAlign="space-between">
</div>
The first "best practice"/"separation of concerns" regarding html & CSS we are all familiar with, is the separation of content and style; with flex-layout we totally lose it.
it looks like an inline style, which is a really bad practice.
the only good thing I can think about is using variables directly to flex-layout directives, but we can achieve that using ngStyle directive as well.
I'm really interested in your opinions, What do you think about it ?
As the name suggests [Angular Flex-Layout] is a library for laying out your components on your web page. The library does not provide a means for styling, fonts, or colours, as those tasks are delegated to traditional styling in your application. Angular Flex-Layout deals with component positioning and works well with or without Angular Material. It is also built by the Angular team and supported by the community.
Some of the main advantages for using Angular Flex-Layout are:
The library is a pure Typescript Layout engine.
Uses HTML markup to specify layout configurations.
Independent of Angular Material.
A responsive API can specify different layouts, sizing, visibilities, viewport sizes, and display devices.
Includes CSS Grid.
Requires no external stylesheets.
I'm developing a static website which will be saved in CDs and USB sticks. It is a manual of a product.
I would to use a graphic framework as onsen ui, but I like material ui more.
I want to use only material ui to create html elements (cards, listtiles, etc...), and all the website will work offline.
Is it possible? How?
You need to check out Materialize CSS. It is CSS + JavaScript library based on Material UI created by Google. It has lots of per-build components Buttons, Badges, Cards, Navbar, Pagination, Floating Action Button. Along with that many per-build CSS classes are provided which you can use to follow Material standards without going into details. Furthermore, you can also visit JavaTpoint which also provides good tutorials on Materialize CSS.
Materialize CSS provides icons as CSS but if you want to download Material Icons as images(raster PNGs or vector SVGs) visit Material.IO
If you look at https://material.io/develop/web you'll see that Material Components Web is there.
Material Components for the web is the successor to Material Design
Lite. In addition to implementing the Material Design guidelines, it
provides more flexible theming customization, not only in terms of
color, but also typography, shape, states, and more. It is also
specifically architected for adaptability to various major web
frameworks.
Material.io
From the https://material.io/ website (the official Google spec?), I end up here when I follow the path to access "Material Design UI" web components:
https://github.com/material-components/material-components-web/
Polymer Project
From the https://www.polymer-project.org/ website, I end up here when I follow the path to access "Material Web Components":
https://github.com/material-components/material-components-web-components
I don't understand the difference between these sets of components but would like to use the "official" Google web components for a web app I'm creating.
The Polymer Project is led by a team of Google Chrome developers and utilizes custom web components among other things with the goal of providing a platform for developers to build progressive web apps. Material Components for the web is an open source component library also led by Google developers and designers, but it's focus is a bit more specific to providing Material Design UI components for developers.
The Polymer Project predates Material Components for the web (and Material Design Lite, predecessor to Material Components for the web), and Material Components for the web is part of the recommended toolkit for the next evolution of the Polymer Project. In that sense, Material Components for the web is somewhat of a successor to part of the Polymer Project (but it is not a complete replacement).
It sounds like you are looking primarily for Material Design UI components created by Google developers, so Material Components for the web is probably what you are after.
I am in the process of learning and building my first website using HTML/CSS.
I have come across several nifty tricks that rely solely on CSS or sometimes on CSS+HTML to create a variety of UI features (or should I call them widgets or components?). I want to learn more about these, but I can't find proper name(s) for such features.
From what little I have been able to learn, some of them are commonly known as: Accordions, Tabs, Carousel (slider), Flip-boxes, etc.
Is there any authentic/reliable source where I can learn proper names of these CSS features or widgets, and then learn more about using them in my work.
Thanks,
These are the most common HTML/CSS/Javascript frameworks to build websites.
Go through with their Documentation.
ZurbFoundation
Bootstrap
Refer to some CSS frameworks like Bootstrap, Semantic-ui. They will have a bunch of css components/elements under them.
Use Semantic-ui page to get started
I like the flexibility that HTML5/CSS3 offers me when I build user interfaces for the web. These technologies let me create rich website prototypes fairly quickly and, unlike on the desktop, I can skin UI elements such as buttons with ease.
So far I have not been able to replicate this experience on the desktop. Over the course of a couple of years I've worked with Visual C#, Qt (with Qt Creator) and Java Swing, but all require more work for the same design tasks.
Is there a GUI toolkit, possibly combined with an IDE that has UI designing abilities, that can replicate the ease and flexibility of the HTML5/CSS3 experience? Is there perhaps a way to apply CSS-like rules to C#, Qt, Java Swing or other GUIs?
For HTML5 / CSS3 UI Designing i have been using kendoui and twitter bootstrap
WPF (windows presentation foundation) is a possibility. This is new in .net 3.5. It doesn't use HTML5/CSS. But it's the closest thing that comes to mind to what you are describing. I will mention what I know, which honestly is not much.
I know it does NOT use HTML5/CSS, but the technique for structuring an application is similar in that you create your UI using an XML like structure (XAML as they call it). And this separates your UI from backend code similar to how you would structure a website.
Using WPF, you have the ability to utilize the power of directx to give your applications media, a skinnable user interface, 3D animations, and screen transitions, etc. In short, I know it allows you to customize the UI far greater than a typical windows forms application that would be developed using the .net framework.
Here is an example screenshot of a WPF application...
If this is something you haven't researched, I think it would be worth checking out. Hope this is helpful.