Show HN: Laptop.css

Jokes aside - and I absolutely love this - is there actually a good (S)CSS library, with freely-licensed configurable template imagery, that lets you say "I want this image to be displayed as the screen of an high-resolution photograph of a MacBook/iPad/whatever, sized so that the photograph of the device itself itself fills its container?" It's surprisingly hard to find, and I recently had to roll my own, transparency mask and all.

Re: Show HN: Laptop.css

#5

Post by soperj » Thu, Sep 12, 2019, 4:08 PM UTC

Bill Gates dancing... oh man.

Re: Show HN: Laptop.css

#6

Post by jolmg » Thu, Sep 12, 2019, 4:16 PM UTC

  :root {
      --laptop-content:  ...

Huh. Interesting that I never noticed that CSS supported variables like this. I haven't worked on a Web front-end for some time, but I see that this has been pretty portable since late 2017. I remember that one of the big points of using CSS preprocessors like Sass was being able to use variables. Now, it seems they're a little less useful.

Re: Show HN: Laptop.css

#7

Post by samfrost » Thu, Sep 12, 2019, 4:17 PM UTC

btown wrote: post #4

Jokes aside - and I absolutely love this - is there actually a good (S)CSS library, with freely-licensed configurable template imagery, that lets you say "I want this image to be displayed as the screen of an high-resolution photograph of a MacBook/iPad/whatever, sized so that the photograph of the device itself itself fills its container?" It's surprisingly hard to find, and I recently had to roll my own, transparen…

https://www.facebook.design/devices

Re: Show HN: Laptop.css

#8

Post by nicoburns » Thu, Sep 12, 2019, 4:18 PM UTC

jolmg wrote: post #6

:root { --laptop-content: ... Huh. Interesting that I never noticed that CSS supported variables like this. I haven't worked on a Web front-end for some time, but I see that this has been pretty portable since late 2017. I remember that one of the big points of using CSS preprocessors like Sass was being able to use variables. Now, it seems they're a little less useful.

Sadly not portable enough if you need to support IE. Give it a few more years though.

Re: Show HN: Laptop.css

#9

Post by dmix » Thu, Sep 12, 2019, 4:20 PM UTC

jolmg wrote: post #6

:root { --laptop-content: ... Huh. Interesting that I never noticed that CSS supported variables like this. I haven't worked on a Web front-end for some time, but I see that this has been pretty portable since late 2017. I remember that one of the big points of using CSS preprocessors like Sass was being able to use variables. Now, it seems they're a little less useful.

Frontend developers have been using PostCSS for the transition period until this is fully adopted (which is a library set similar to Babel for adopting future JS, as well as experimenting with new CSS language level ideas):

https://github.com/MadLittleMods/postcss-css-variables

There’s also plugins for nesting and mixins if you want a more complete SASS replacement which seems to be the toolset the industry is moving towards.

The most popular PostCSS library is autoprefixer which is also helping with the transition to future CSS without all of the browser baggage. https://github.com/postcss/autoprefixer

Re: Show HN: Laptop.css

#10

Post by _bxg1 » Thu, Sep 12, 2019, 4:22 PM UTC

jolmg wrote: post #6

:root { --laptop-content: ... Huh. Interesting that I never noticed that CSS supported variables like this. I haven't worked on a Web front-end for some time, but I see that this has been pretty portable since late 2017. I remember that one of the big points of using CSS preprocessors like Sass was being able to use variables. Now, it seems they're a little less useful.

And unlike preprocessor variables, they:

1) Cascade (follow inheritance through the DOM)

2) Can be changed at runtime for things like toggling a dark theme

Preprocessors are still useful for other things, though. My #1 reason for using them is nested selectors, which for reasons I cannot understand haven't made it into native CSS yet.