What's the diference between app-header and paper-header-panel, that is the same question for app-toolbar and paper-toolbar, is about Polymer version? Cause I was following this tutorial, but I'n trying to build a Condensing header with sticky paper-tabs on top with the currents Polimer Elements(paper-header-panel, paper-toolbar), and I can't get the exactly sticky paper-tab like the example.
Thanks for your time, I would appreciate any help!
The polymer catalog is divided into a couple different categories enabling greater choice and control for developers.
App elements enable building full web apps out of modular custom elements
Paper elements are a set of visual elements that implement Google's Material Design.
There is overlap between some App elements and Paper elements; and in many cases, Paper elements build on top of App elements.
The primary difference is that App elements are unstyled where Paper elements are styled to meet the Google Material Design.
as stated in this video from the chrome dev summit .. the app-header is more app-like and the address bar disappears as the user scrolls up.
Related
I am Trying to find out the "correct"(best practice) way of creating toggleable sidebar with bootstrap 4. Gone through the examples on the internet and not so sure if those were so good...so If someone can send me related resource links ,it would be great so that I can analyze it.
-I am from android platform so I'm a newbie when it comes to web development but I'm trying to achieve that kind of sidebar like on this side: link -notice: sidebar doesn't change its width(stretching) while changeing the size of a browser -until a point when it jumps over to icons width.
Bootstrap does not have an "official" sidebar implementation so nothing is "correct" here. As long as it works cross-browser/cross-device, anything is good to go.
Regarding the sidebar implementation itself, there are various options:
opens above the content,
pushes the content to the opposite side
squeezes the content
The above options and the array of animation possibilities for:
the sidebar itself,
the menu item containers,
the menu names/labels
and the menu icons...,
...make any attempt at providing an example prone to subjective preference and would render your question off-topic.
Other possible features are
auto-open above certain width,
auto-close below certain width,
reordering of elements,
three-state (full, min and off).
But on topic, the only objective answer to your question is: there is none (official).
As a starter, you might want to take a look at this simple sidebar. It works prefectly fine with v4. Just import the simple-sidebar.css and adjust the calls to match your project's elements.
In the end, the sidebar is all about two containers and applying a class (plus, ideally, some aria- attributes for screen readers). What you put in those containers and how you adjust the contents to look in each element state is all about your own (or the designer's, or the client's) personal preference.
I'm creating a game using WebGL. I'm currently working on menu design, and it occured to me that one of the great advantages I have in using web technologies is that I can use HTML for the GUI.
The game uses pixel art, so in keeping with that art style I want the menu to have pixelated buttons and text as well. I'm wondering if using CSS filters or something similar I'm able to pixelate my rendering of DOM elements, or if I'll need to create full button images beforehand (much less appealing).
Thanks!
I am building web-apps using Ratchet, replicating the look of native APPs.
Ratchet is doing a great job at replicating the look of iOS, but there is a feature which I really miss from iOS which is the ability to "move" an element to the next page by moving and zooming it.
Example: I have a list of articles. Upon clicking the thumbnail of the article, the thumbnail image gets bigger as the articles open, in a seamless transition.
The following gif. from Facebook "paper" illustrates well the effect I want to achieve:
http://d24njcbunk2gp2.cloudfront.net/assets/2014/02/Facebook-Paper-008.gif
My questions would be:
- Is this type of transition possible using only web-technologies?
- Is it possible, in general, to have one element moving in a continuous way from one page to another without any flickering effect?
- Would such effect be possible only with single-page applications? (say a single-page website built with angularJS)
- Would any framework / tool (PhoneGap?) be useful in achieving this result
Thanks so much.
Thomas
I recently made a new WordPress theme for a local travel company and they are now getting reports that two elements in my design are not in the correct positions in Firefox (seems specific to version 3.6) and Chrome for Mac.
A page where both issues are visible: http://www.totemtravel.com/blog
Issues:
The white flag with the logo on it at the top of every page jumps
several inches to the right to cover the area code of the first
phone number.
The search button at the bottom of the blog categories widget in the sidebar jumps to the right, out of the widget, and off the page content wrapper.
I think the issue has to do with where those browser assume the item should be before the relative positioning, but I need a way to make these all look the same across all modern-ish browsers.
I wont paste the pages of source code behind the theme since it can be easily viewed with Firebug or the Chrome inspector, but please let me know if any additional info would help.
1: The img for the white flag must have left:0. Not all browsers default to left 0. Firefox for example, is defaulted to left:50%. Another problem is your trying to relatively position a td element for the title "Totem Travel", this is invalid and I would recommend using divs here instead of tables.
2: This is due to the native CSS styling differences of the browsers. That is why people use CSS Reset style sheets, to zero everything out so you know for sure the "default" css is the same. Here's an example: http://meyerweb.com/eric/tools/css/reset/. The effect this is having on your css now is that, the submit button is falling down to under the input as it doesn't have enough space - so when you are relatively positioning it it is off in the browsers.
3: Relatively/absolutely positioning everything isn't quite the best way to go about styling a website. You will find many inconsistencies like you are experiencing and there are better ways. I would recommend visiting some example themes on sites such as themeforest.com or elegantthemes.com and seeing how they do their CSS and HTML
This is FF plugin
http://www.pixelperfectplugin.com/
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
Read more: http://pixelperfectplugin.com/how-to-use/walkthrough/#ixzz0eOfezx1N
How to get mockup image behind all div like this plugin does.? this tool only shows design behind layout only on firefox and i want to see on all browser.
I found the way here
http://aloestudios.com/2008/08/pixel-precision-with-diagnostic-css/
Well if you want it behind then simply setting it to the background image of body or html would work. If they need to be styled with bgimages or colors as part of the design then i suppose you could throw another div in the dom with position absolute and set the z-index to 0 or -1 depending. IF you want it to overlay the dom then you could do same thing only using an insanely high z-index and then setting the opacity. That would interfere with direct point and click inspection on the layout i think but you could still get to the elements form the html pane.
Obvoiously no method short of developing in pure js somehow is going to give you the features of a browser plugin.