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.
Related
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 have been using Twitter Boostrap for my web apps. Recently, I have started liking Google's Material Design. Is there any way I can replace all the Bootstrap's Look and Feel by Material Design's? I don't wanna change the applied classes to HTML elements.
You can't move instantly from Bootstrap to Material.io without changing 1 by 1 code/syntax on bootstrap. So change it while studying everything you learned on material.io and dont be lazy.
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.
I am pretty bad with CSS and HTML5 designing/templates. So, I google around and found two frameworks to start with nice looking layouts, necessary js and html5 support. But I don't know which on to use.
I would appreciate your answers on
What is the main different between two except google analytics ?
Which one is more rails friendly ?
Which one fits best to e-commerce sites, i.e. create rich content, integrate with user management frameworks etc?
Combine them and use them both - http://www.initializr.com/
The HTML5 Boilerplate (H5BP) is a starting project template that is designed to be adapted to your needs. Bootstrap is a specialized, modular, HTML/CSS/JS toolkit.
boilerplate provides you with a best practice HTML5 document, some reset CSS and a lot of javascript goodness like modernizer.js; this Twitter toolkit provides you with stylesheets that define a lot more than just a reset.
The Twitter toolkit is better compared to CSS frameworks like blueprintcss and 960 grid system and positions itself somewhere in between those two. Twitter bootstrap comes with its own fixed look and feel so you can concentrate on your content and logic.
checkout this Quora Thread
Based on your question, I gather you misunderstand what these two projects are. "Google analytics" is not the difference.
Expanding on what #thomas has already stated, Boilerplate contains starter HTML templates with best practices built-in and Bootstrap is a library of CSS and JS UI elements. They are not mutually exclusive.
You may want to look at initializer as #Zlatan has already recommended, or Kickstrap, which is an extension framework for Twitter Bootstrap.
I've been using Dreamweaver to create my wireframes (tables).
Before I create my own css/html/icon framework I would like know if such a library already exists.
The ideal toolbox would include basic styles for all form elements, icons, css grid layout, sample standard ad sizes, and empty templates.
As far as I know, these all exist only separately. There are a few notable CSS frameworks, some with grid layouts, and CSS form styling is almost a separate discipline. As for web icons, take your pick!
The only place you're likely to find these all together (including plug-ins/add-ons) is in a full-blown web framework or CMS.
If you put such a package together for yourself, bear in mind that it will be useful to many others, make sure the HTML ad CSS validates, and choose css-based templates rather than table-based ones...