There are a lot of presentation frameworks out there for html + js. What would be a good way to accomplish a similar presentation in polymer? Is there any polymer elements that would be candidates to present a new slide and friendly with polymers transitions? I'm doing more with polymer and prefer that to using the existing frameworks.
The core-pages and core-animated-pages can probably be used to make a deck.
Here's an example that Addy Osmani put together
There are also a few projects, here and here.
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'm using Polymer 1.x and started using the Polymer Kit to build a current app. I know about the App-Elements, and currently I'm trying to achieve something like this:
Full:
Mobile:
So far I have something like this:
Do I need to use media queries to hide the tabs and show the logo?
On a side note, I'm really having a hard time understanding Polymer, because I don't know if the elements come with the predefined styles (as Bootstrap or Foundation would do) or you need to do some heavy-lifting in CSS (which is what I've been seeing). I would really appreciate if someone could show me a good tutorial (I've seen Polycasts and the Github) on how to fit things together!!
You can use iron-media-query to hide the tags.
All the polymer elements have predefined styles and have exposed certain mixins and variables for custom styling.
I would recommend going through polymer's documentation and element's documentation to best understand its usage as each element has its own set of properties and styling. Polycasts cover only a few topics and are good source of knowledge only if you are already familiar with polymer development.
I'm getting started with Polymer web components. We have a product that can be injected into multiple client applications, or could even be a standalone application. This product is a game where the rules for validating correct answers and the general flow are the same throughout all implementations. The only variance is styling so the game looks like it belongs in its surroundings.
I'm tempted to use some of the cool Polymer Paper elements for the UI aspects of the various custom elements, but I do not want to force a particular design aesthetic. So, I think it will be a better choice to simply have each custom Polymer element to return semantic HTML.
So, how can I allow the clients that are consuming the game to apply their own look and feel? In my research on Polymer, I've read about applying styles inside each element. I suppose that might be OK for structural issues. Does anyone have any strategies they've employed for custom CSS implementations for Polymer elements?
Thank you.
Custom CSS Properties is the suggested way of theming Polymer Elements. Here's a video from the polymer summit and another video of Rob Dodson talking about theming your elements using custom css properties.
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.