pixelsign / html5-device-mockups Goto Github PK

We need new device like Galaxy S8 & Google Pixel

The images is requested with (../device-mockups/iMac/portrait_black.png); but the folder named 'imac'. Doesn't work on case sensitive systems.

Hey there! 👋

Thank you so much for making this! Cool stuff. 🙏

Would love to see device mockups for the Pixel 2 and Pixel 2 XL. 🤘

Cheers! 😃

Would be great if this repo updated to the latest device mockups. Thanks!

Insteat, they blink in after a small delay. Also, when the page is not active for some time, the same effect occurs.
Browser: Firefox 50.1.0.

Excellent tool, thank you guys so much for developing device mockups! Are there any plans to add the iPhone 8 and iPhone X to the lineup? Is there anything I can do to help? Thanks again!

Go son.

Your demo website doesn't work

1. Clean up Repo
2. Complete new build process
3. New Devices
   3.1 Windows Laptops
   3.2 iPhone 7
4. Size Optimizations
5. Readme better explanation of devices

There are more mistake

Would love to see more Windows phones and windows pc's/laptops.

I would like to customize the

mockup-path

variable. However with npm install the src is not pulled, due to main property in package.json. Would appreciate a fix.

Hi, can you please provide cdn link?

Hi, I am trying to show a video inside the mockup, but nothing (video controls, buttons or text) is reachable inside the wrapper. Even if I set .device .screen { ... pointer-events: auto } to pointer-events: all. I am using the plain HTML5 video player.

I tried to follow the instructions of other issues, but nothing worked (#68 #21 #65 )

Any ideas?

Do you know this project?

http://marvelapp.github.io/devices.css/

When trying to install via "bower install html5-device-mockups" I get this output:
"Unexpected token } in JSON at position 565"

bower.json is valid

Hello, I'm trying to click to button inside mockup but I couldn't reach to the button. Tried z-index but didn't help. Could you tell me how can I reach to content inside mockup?

I installed your library via npm, but it seems that there I do not get the most current version? The iPhone X is missing. :( Would be nice to get a npm update!

The content looks unnatural, as it doesn't have borders. Any way to fix that?

1. Newsletter

Could you move this to the master branch please?

Thanks!
Austin

Hi,

great collection of devices. Although I miss a TV Mock-Up. I would be really great, if you add one. We need that for a project that we are starting in the next couple of weeks.

Many thanks,
Wolfie

Your default background image background-image: url("https://static.pexels.com/photos/50594/sea-bay-waterfront-beach-50594.jpeg"); is 3.3 MB, but most people will probably never use or see it. I suggest removing it, as it causes a lot of unnecessary network traffic.

HTML5 provide you elements like <section> <footer> and many others, and I would recommend you to use them. These elements help screen readers to understand your website's structure.

Hi @pixelsign ,
I am a contributor of cdnjs and willing to host this library.
In LICENSE.txt, the license is MIT, but in package.json, the license field is ISC. The information does not correspond. Could you let me know which license are you using?

If you have any suggestions, please let me know.
Thank you.

cdnjs/cdnjs#12283

Is it only possible to set the width of devices?

Here's an example where I try to use height:
https://jsbin.com/qosejiyuji/edit?html,css,output
(for simplicity in the JSBin the device assets aren't there, but the CSS effect is the same)

Everything works normally from Desktop and Tablet.

However, when I open the website from mobile the device frames simply disappear.

Already tried to play with z-index but it's not the cause as it is working properly elsewhere.

Please let us know of any workarounds.

Firstly, thank you for sharing this, really nice!

Was wanting to use this in classroom project and stumped, but that not hard to do:)

On the "Mockup Device Generator.html" page: is there an easy way to simply hide the div with the generated code? Would like to use the page as a real mockup viewer. In other words display no code, just let users click on the buttons to view a site.

Thanks in advance!

Woody

The file path for Macbook is actually /macbook/ however it is referenced as /Macbook/ in device-mockups.css. This will work for some web servers (esp. those commonly used in dev mode), but will fail for others (e.g. those used by Amazon for a static S3 site).

I can submit a PR, but I'm not sure whether you want a change in the LESS or in the folder naming.

It looks like this is also the case for iPhone5/iphone5

Is there any way to be able to interact with content of device? Any links/ buttons doesn't work, just like invisible layer covers it. Tried to change z-index but it didn't help. Any advice ?

Npm package is still pointing to v3.0.0 with the broken case folders. Could it be updated to latest release, please?

Thanks!

In your most recent update, you several of the PNG images are actually Adobe Photoshop PSD files. Looks like you did a "Save As..." and saved a PSD with a ".png" extension instead of a PNG export. Opening these in a basic image viewer/editor will yield an error about the file being corrupted, because these aren't actually PNG images.

There could be more, I just happened to notice it for the Galaxy S5 images. I used the 'file' command (native to Linux, Mac, other Unix-like systems) to detect the mismatches:

MacMini:galaxy_s5 billy$ file *
galaxy.psd: Adobe Photoshop Image, 1239 x 2406, RGBA, 4x 8-bit channels
galaxy_s5_land_black.png: Adobe Photoshop Image, 2406 x 1239, RGBA, 4x 8-bit channels
galaxy_s5_land_gold.png: Adobe Photoshop Image, 2406 x 1239, RGBA, 4x 8-bit channels
galaxy_s5_land_white.png: Adobe Photoshop Image, 2406 x 1239, RGBA, 4x 8-bit channels
galaxy_s5_port_black.png: PNG image data, 1239 x 2406, 8-bit/color RGBA, interlaced
galaxy_s5_port_gold.png: PNG image data, 1239 x 2406, 8-bit/color RGBA, interlaced
galaxy_s5_port_white.png: PNG image data, 1239 x 2406, 8-bit/color RGBA, interlaced

If a bower publication is not in the cards, tagging releases would be an easy way to still support the bower users of the world.

I'm working on a content editor.

I want to be able to show previews of what the content would look like on e.g. a mobile, Tablet, desktop etc.

To show an accurate preview the "device mockup" needs to be the actual size of the device.

Right now this seems to make a mockup with just the correct aspect ratio, but I don't see any way to set the size to set the screen size to the actual size of the device? Am I missing something or is this not supported?

Hi,
the css sheet and the html are missing nexus_6 and others,
i'd be happy of you could add the missing mockups.

thanks

Most popular mobile and laptop are not included in this website and his performance are not better than

even with overflow: auto; I can't scroll the content in the device.

It seems that in commit 02cce0b the contents of LICENSE.TXT got changed to (apparently) the source of the GitHub listing page for LICENSE.TXT instead of the contents.

Hi,

I was trying to show this to a colleague but had lost the link to the demo page and only had the repo. Because of this I had to clone it and show him a local copy of the site.

Can you please add the link to the example page in the readme/description or create a github pages for the repo.

Alan

Are there any experiences in about:

1. generally, if it is legal to use device-mockups, by using the original products as images?

2. particularly when using mockups showing the Apple-Logo?
   ( https://github.com/pixelsign/html5-device-mockups/blob/master/device-mockups/iMac/portrait_black.png )

Hi. I've added CSS file which was mentioned in the documentation. Also added HTML code which was generated by the device while the device doesn't appear. The part of the page where it should appear is empty. Can you help me to solve that problem? Thanks