
Show HN: ResponsiveDevices.css – responsive device frames for your demo page - osrec
https://github.com/osrec/ResponsiveDevices.css
======
barrowclift
While neat technically speaking, I unfortunately can't say the result is
acceptable for any kind of professional work, in my opinion.

For example, take a close look at the iPhone X in the "Device Library" list,
the device and "notch" borders are butchered beyond recognition. A key
component of the iPhone X's brand are the particular rounded corners used for
the notch, and if the point of this project is to closely emulate particular
devices instead of generic ones, it woefully missed the mark.

To be fair, I can't speak for the accuracy for the other devices included, but
if their implementations are at all similar to the iPhone X's, I'd expect they
are also poor representations.

Comparison between the CSS "iPhone X" and an accurate representation:
[https://notebook.barrowclift.me/dropbox/comparison.png](https://notebook.barrowclift.me/dropbox/comparison.png),
and a Light read for more information on the iPhone X corners:
[https://medium.com/tall-west/no-cutting-corners-on-the-
iphon...](https://medium.com/tall-west/no-cutting-corners-on-the-
iphone-x-97a9413b94e)

~~~
osrec
Hi, thanks for the feedback :)

I understand your point of view, but I feel you're missing the purpose of
these devices. The aim is not to provide a photo-realistic depiction of each
device, but a representation that could be used on a landing page or a demo
page.

We've found them to be adequate in situations where we require a responsive
device frame, and I'm hopeful others will too.

Having said that, we will take another crack at the iPhone X to improve the
shaping further. I think we can certainly get the rounded corners more in line
with the actual shape. The notch may still be tricky though!

------
saintPirelli
Solid, useful work, very well executed (from what I can tell). Thank you!

~~~
osrec
Thank you for the kind words, and you're very welcome :)

------
hamslamwich
Just a design note on your product landing page: the big gradient
"responsivedevices.css" in your hero looks like a big CTA button, although not
clickable. Might want to change that, or make it direct to something.

------
osrec
Sample usage shown here:
[https://osrec.github.io/ResponsiveDevices.css/samples.html](https://osrec.github.io/ResponsiveDevices.css/samples.html)

------
sitepodmatt
Commercial $$$, I thought self promo for commercial license was against the
rules?

~~~
osrec
I don't think it's against the rules of HN or GitHub. To be fair, it is a
small fee, and helps fund the adding of new devices. At the end of the day,
dev time is not free, and this took many days of research and development to
perfect :)

------
chillybean
Very cool. How did you scale device borders relatively?

~~~
osrec
The borders are not really borders, but a slightly larger element (scaled by a
relative percentage) layered under the element we want to add a border to.
That way, as the device scales up or down, the "border" also appears to scale!

