6 ms·
Pure CSS Website
- lacoolj 2y agowell it's not hard to believe given that it doesn't seem to have anything but that one paragraph of text and then the animated sentence at the top am I not seeing something else?
- deleted 2y ago[deleted]
- lebean 2y agoI had a similar thought. I thought "wow, believable!" but not to be flippant, the initial wow was genuine.
- kypro 2y agoYeah, that was exactly my thought too, but then I've been doing web dev for 20 years so obviously it wouldn't come as much of a surprise to me that this is possible. I guess not all people are in the same boat though, and I suppose it is quite cool how much can be done with CSS these days! (not that you would necessarily want to).
- treflop 2y agoYou could embed JS into CSS in 1999 in IE5 so CSS has always been a lot of "you can do a lot of weird things."
- tengbretson 2y agoThe ease of dropping in a "useState" and high-ish performance js engines has made high-level CSS wizardry a bit of a lost art.
- cyberax 2y agoFirst single-page applications. Now single <div> applications. What next? Single letter applications?
- calebpeterson 2y agoSingle Pixel Applications. Conveniently abbreviates to SPA.
- archiewood 2y agoI built this website to see what was possible with only one div, and a stylesheet. No JS, No other HTML, just CSS. Source: https://github.com/archiewood/pure-css-site https://github.com/archiewood/pure-css-site
- azangru 2y agoAfter examples showcased at https://a.singlediv.com/ https://a.singlediv.com/, I would not be surprised by anything...
- kennedy 2y agowow these are beautiful
- prng2021 2y agoJesus this is insane
- somishere 2y agoEpic. Tho where are the next level hover states?!
- throwaway14356 2y agohttp://go-here.nl/omg-tables.html http://go-here.nl/omg-tables.html the css is js generated but doesn't need to be
- somishere 2y ago:D
- dieselgate 2y agoThat was pretty far out on mobile
- brailsafe 2y agoThat's not fair, they clearly have illustration skills ;)
- Pesthuf 2y agoNever knew "content" was animatable. This might come in handy some time.
- pimlottc 2y agoAnd none of the text is selectable :(
- c-hendricks 2y agoAh so it's more like a pure css mobile app.
- deleted 2y ago[deleted]
- danShumway 2y agoYou shouldn't actually build your entire website in CSS -- it's going to be inaccessible no matter what because CSS isn't really for content. But it's cool to see what's possible, mostly because learning how to overcome these challenges to use a tool in a way it shouldn't be used often requires you to learn more about how the tool works. That the tool is ill-suited is the point. Of course, not that there isn't value in you pointing out that CSS content isn't accessible :) -- I have seen developers get tripped up by that in production settings particularly when building things like hover labels, so a reminder is always appreciated.
- codetrotter 2y agoNoticed the same. Would be interested to know what the page is like for people who use screen readers. Does the whole page seem blank for them?
- userbinator 2y agoRecent Firefox doesn't, but good old Opera 9 lets you select the text just fine. (On the other hand, no animation nor background, but maybe that's a reasonable tradeoff.) Browser bug? Seems like it's debatable although the spec leans in the direction of generated content being selectable: https://stackoverflow.com/questions/24385171/is-it-possible-to-select-css-generated-content https://stackoverflow.com/questions/24385171/is-it-possible-...
- rtcode_io 2y ago[flagged]
- butz 2y agoWhat's the purpose of remote background image? Tracking?
- somishere 2y agoPure CSS. Invalid HTML. Nice job tho. Now just need to make it in 3D.
- assimpleaspossi 2y agoI wasn't going to mention the invalid HTML. Thank you for doing it.
- xp84 2y agoI thought we all agreed to ignore validity a while back when XHTML gave way to HTML5.
- userbinator 2y agoIndeed, the fact that HTML5 specified the exact way to turn any stream of bytes into a DOM means that "error" cases are really just academic/theoretical.
- pests 2y agoHow is XHTML any more valid than HTML 5?
- tredre3 2y agoXHTML had to be valid XML, that was the entire shtick. Comparatively HTML5 is very lenient in its spec. Browsers are even more lenient in their implementation.
- pests 2y agoIt has a pretty well defined spec. It's just not XML, and I think that's okay. Do you have any examples of undefined or linient rules? I'm a big fan of optional closing tags that HTML5 has. Can do stuff like: <h2> Todo List <ul> <li> Do task A <li> Do task B <p> Dear Diary, ... Almost as easy as markdown. Couldn't get this working with XML.
- souvlakee 2y agoIf you have browser extensions that make additional div, it looks weird: i.imgur.com/glCfzkj.png
- psnehanshu 2y agoConsider adding https:// https:// at the start of the URL to make it clickable.
- souvlakee 2y agoCode: https://paste.mozilla.org/BVWPuyrH https://paste.mozilla.org/BVWPuyrH
- Alifatisk 2y agoFirst time seeing https://paste.mozilla.org https://paste.mozilla.org, very cool
- al_borland 2y agoSeeing as the comment you're replying to is now a 404, and this note is on the home page you link to... >Anyone with the link is able to see the paste and also delete it. Maybe it's not the best option for sharing in a place like this.
- bawolff 2y agoThat is pretty cool. I wonder if you could do this with no <div> using just the <link> tag. Or do browsers add an implicit body tag if you don't put one that you can style?
- Julesman 2y agoA self-closing div is not valid HTML.
- yu3zhou4 2y agoNice work! It’s possible to get rid of even that single div - https://35bytes.maczan.pl/ https://35bytes.maczan.pl/
- Alifatisk 2y agoYeah I was about to mention that there was no need for the div, the body selector should be enough. You could even remove the link tag and use the link header in the http response instead https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Li...
- xp84 2y agoThanks loads, I always love a day when I learned something neat, and you’ve made that happen today!!
- jkrubin 2y agoawesome. the single div was a performance bottleneck for me.
- ape4 2y agoDid you see this in the css @keyframes typewriter { 00.0% { content: "A" } 00.4% { content: "A " } 00.8% { content: "A W" } 01.2% { content: "A We" } 01.6% { content: "A Web" } 02.0% { content: "A Webs" } 02.4% { content: "A Websi" } 02.8% { content: "A Websit" } 03.2% { content: "A Website" } 13.2% { content: "A Website," } 13.6% { content: "A Website, " } 14.0% { content: "A Website, i" } 14.4% { content: "A Website, in" } 14.8% { content: "A Website, in " } 15.2% { content: "A Website, in P" } 15.6% { content: "A Website, in Pu" } 16.0% { content: "A Website, in Pur" } 16.4% { content: "A Website, in Pure" } 16.8% { content: "A Website, in Pure " } 17.2% { content: "A Website, in Pure C" } 17.6% { content: "A Website, in Pure CS" } 18.0% { content: "A Website, in Pure CSS" } 22.2% { content: "A Website, in Pure CSS." } }
- zichy 2y agoYes, I opened the CSS file and there it was.
- xyst 2y agojust hardcoded things :)
- deleted 2y ago[deleted]
- asciii 2y agoBefore it starts to look a bit ugly div::after { font-family: var(--secondary-font); font-size: 1em; user-select: all; content: " \A \ This website contains one <div> only. \A \ No JavaScript. \A \ The rest is pure CSS. \A \ \A \ The <div> is animated with CSS keyframes, \A \ styled with CSS variables, \A \ styled with CSS transitions, \A \ styled with CSS pseudo-elements, \A \ styled with CSS pseudo-classes. \A \ But that's it. \A \ "; }
- mmh0000 2y agoThat's impressive. I expected, "Sure, it works, but the CSS is going to be a nightmare." Instead, the CSS is pretty, straightforward and easy to understand. I love it!
- archiewood 2y agoThanks - I do honestly think the keyframes are a bit of a nightmare, but they also kind of make the site
- corywatilo 2y agoAlternate title: "How to scare an engineer in three words"
- xyst 2y agolighthouse performance scores are perfect. accessibility fails. best practice category is 90+ (very minor issues). PWA is not applicable. https://lighthouse-metrics.com/lighthouse/checks/38f2276c-bc58-4e14-b7b0-9da9f5a3f90b https://lighthouse-metrics.com/lighthouse/checks/38f2276c-bc... lol,
- deleted 2y ago[deleted]
- dheera 2y agoCSS is Turing complete, so if you want to make anything you could
- Turing_Machine 2y agoYep. It'd be a fun project to write a compiler for another language that emitted executable CSS on the back end.
- 911hakra 2y ago[flagged]
- egypturnash 2y agoPrevious work in this field: https://mathiasbynens.be/demo/css-without-html https://mathiasbynens.be/demo/css-without-html - completely empty html, doesn't seem to work on Mac Safari any more, does work on Firefox for me. See https://css-tricks.com/using-css-without-html/ https://css-tricks.com/using-css-without-html/ if you want to know how it works. https://web.archive.org/web/20160420232319/cj-johnson.github.io/Single-Tag_Website/ https://web.archive.org/web/20160420232319/cj-johnson.github... (original copy defunct) - kinda broken now, the source is just a single <link> (if you ignore all the stuff the Wayback Machine adds)
- deleted 2y ago[deleted]
- kennedy 2y agoso clean
- tithos 2y agoYou can add a bg to the body and and style to the HTML
- yerich 2y agoUsing pure CSS to make a 3D "game engine": https://keithclark.co.uk/labs/css-fps/ https://keithclark.co.uk/labs/css-fps/
- deleted 2y ago[deleted]
- archiewood 2y agoThis is by far the most impressive link in the comments.
- chris_wot 2y agoMight be fun to replace the div tags with a custom tag. https://html.spec.whatwg.org/multipage/custom-elements.html https://html.spec.whatwg.org/multipage/custom-elements.html
- superkuh 2y agoMany browser like Firefox support the HTTP header (not HTML header) field for defining external style sheets. You could make a 0 byte HTML page by using this feature in the HTTP response header. Link: <//website.css>; REL=stylesheet
- amelius 2y agoWaiting for a compiler backend that targets CSS.
- userbinator 2y agoI knew it would be a demonstration of the CSS "generated content" feature.
- safety1st 2y agoFor reasons that are probably out of scope for CSS, I would really like to be able to do more with the CSS content property. It's one broad class of problem really: many frameworks make changing the HTML they generate difficult or impossible. Inevitably you end up needing to inject a button or a hyperlinked image or something in a particular position, and you have to resort to Javascript to do something that isn't interactive and isn't a program, which feels like the wrong tool. You could argue that both Javascript and CSS are the wrong tool for this use case, but CSS would be the more convenient wrong tool.
- tiborsaas 2y agoYou could have saved that background image and use a CSS gradient ;) edit: nevermind, that's a dead URL. But anyways, it's an extra http request you don't need.
- johnisgood 2y agoI like those! What I would like to see is the source code of CAPTCHAs (that generates the CSS) used by onion websites like Dread. There are CSS-only modals, too.
- jraph 2y agoInteresting and well done! I have an extension that adds a div to the page, Grammalecte, its breaks this website a bit. A div:first-child, or an id would fix it. A reminder that extensions can affect HTML content and you need to target your elements in CSS in a robust way.
- Alifatisk 2y ago"This website contains one div only" No, the link tag is there.
- phirschybar 2y agoI love this. but, why?
- NiagaraThistle 2y agoDo developers really build basic websites / pages WITHOUT pure CSS when it's an option? I know there are times when you need to do something CSS can't (and shouldn't do of course. But I mean when the 'thing' is design/style only, aren't we all already using only CSS for those things? Or am I just so old I still practice the separation of concerns and no one else is. Also, while kudos to the OP for doing this, this is exactly a time when using CSS to do this is incorrect and using vanilla Javascript IS the right decision, as this is a behavior and not a style issue. NB4: Yes I do code sloppy when time dictates, but I still seperate my HTML, CSS, and JS as the norm, not the exception.
- spartanatreyu 2y ago> Do developers really build basic websites / pages WITHOUT pure CSS when it's an option? Yes. There are developers who have only styled websites using bootstrap classes. (or related css-frameworks, e.g foundation, bulma, etc...) And there are developers who have only styled websites using tailwind classes. (or other related atomic css frameworks) Both sets of developers lose out on some very powerful css features (e.g. page layouts using css-grid, container queries, light-dom web components, etc...) that can completely change the way you build websites. ------------------------------------------------------------ Bootstrap developers tend to use bootstrap instead of css because: - They are entry/minor level front-end developers who are still becoming proficient with css. They tend to use only bootstrap at the beginning, then progressively use it less as their own knowledge improves. - They aren't front-end developers and are using bootstrap as a crutch to get a front-end out for the system they are building - They are older front-end developers who have been disincentivized to improve their skills. They have become stuck in a local maxima trap because they're relying on bootstrap to fill a knowledge hole, for example: How to code a responsive design (i.e. bootstrap classes -X> media queries -> reflowing rule based layouts -> container queries), how to build an accessible navigation, how/when to use js to build an interactive component, etc... - An easy way to spot these kinds of developers is to see if they are: 1. using the BEM class naming scheme because they're coding a div soup instead of using fewer html elements and modern css selectors 2. using a js library to make something when a few lines of css will do the trick ------------------------------------------------------------ Tailwind developers tend to use tailwind because: - They're using react, which doesn't have a good builtin way to keep component related styles close to the component itself. In css parlance, they don't know how to scope those styles to the component. They only know how to: 1. Put styles in a separate file like in regular page based websites. This method almost always fails because developers will change a style in an external file without realising that it affects more than one component, and they don't have sufficient visual-regression/snapshot testing to catch it. 2. Inline styles to each html element which turns the component into style soup. So they settle on tailwind to make class soup as a shorthand for the style soup. Instead they should be using a framework solution that scopes the css to the component (e.g. vue's `<style scoped>`) or scope the css to the component using web standards, or declare their styles in-component and yse their build system's asset bucketing system to dedupe the declarations.