9 ms·
339 Bytes of Responsive CSS
- ChrisGranger 8y agoYou can save three more bytes by making the background color #eee. ^^
- asattarmd 8y agoGood, but I'd replace that font with the default: `font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif` It'd remove the unnecessary font and still look good.
- Cthulhu_ 8y agoA nonoffensive version of "better motherfucking website"?
- fastbeef 8y agoUghn, I really thought that this rah-rah pseudo-masculine tough guy aesthetic was something we've collectively moved on from?
- xvector 8y agoit's obvious satire and a lighthearted joke with a kernel of truth. chill :)
- orwin 8y agoi still have not. "pseudo-masculine tough guy" aesthetic are efficient, especially for learning/reading space (80% of my time spent on the net). It does not have to be as ugly as "better fing website", but still.
- rchaud 8y agoIt was funny the first time, but the gimmick was run straight into the ground with all the followup versions that tried to double down on the writing style. Same will happen with this. Yesterday it was 55 bytes of CSS or whatever, today it's 339, pretty soon people will be creating "Responsive CSS in 69 lines LOL GEDDIT" and the cycle will begin anew.
- kristianc 8y agoNo, he links to one of those as well for good measure.
- bru 8y agoA similar rhetoric is actually present on the linked example page: https://blog.koley.in/baserock/ https://blog.koley.in/baserock/
- onion2k 8y agoIt's ironic that the author chose to use a page that loads 1.5Mb of data, including 12 separate stylesheets, to write about a minimal stylesheet.
- skrebbel 8y agoThis comment gets posted on HN about every site that dares write about something with a small filesize and frankly it's getting a bit boring.
- enriquto 8y agoIt is not boring. It is sad.
- snorlaxle 8y agoI believe the criticism was fair here. The author specifically used "339 bytes" on the headline which implies a certain level of precision. Being orders of magnitude away from the claimed file size is not excusable. It just feels like click bait. Not counting imported CSS is simply wrong here. I can have a full-featured responsive CSS framework in <50 bytes if I @import bootstrap.css
- josteink 8y agoAnd the font is ugly to boot. So it’s utterly pointless.
- 8y ago
- josteink 8y agoI really don’t like that Google font. Too lightweight and hard to read. And if readability suffers, I’ll rather take the crude original motherfucking website over this.
- thojest 8y agoNice, I just would use a brighter black for the font. Try #565656
- arkokoley 8y agoThat wouldn't go well with the font I was using. Fira Light is very thin as it is. A lighter shade of black would affect readability on certain screens.
- reustle 8y agoSimilar project yesterday https://news.ycombinator.com/item?id=19607169 https://news.ycombinator.com/item?id=19607169
- nukeop 8y ago7 CSS declarations and you too can include a Google tracker in your website. No thanks. Host your assets yourself.
- vladocar 8y agoHere is something similar: https://github.com/vladocar/Basic-CSS-Typography-Reset https://github.com/vladocar/Basic-CSS-Typography-Reset
- deftnerd 8y agoThis is spectacular, thank you. It's small enough to just inline into the webpage and provides a nice enough experience to just leave it alone for a very basic page.
- new_here 8y agoAll this CSS minimalism reminds me of Dan Luu's post about Web Bloat: https://danluu.com/web-bloat/ https://danluu.com/web-bloat/ His website is refreshingly light and fast, but that's still no excuse for Times New Roman. Maybe it's a retro irreverence thing.
- half-kh-hacker 8y agoThe website actually uses the default font for your browser. I've always changed this to a sans-serif font.
- r0bbbo 8y agoTimes New Roman is fine - serif fonts are supposedly more readable - it's the line widths that kill me here - figuring out which line you're due to start on next really disrupts flow
- DanBC 8y agoYou can resize the window and the text flows to fit, which is something a weird amount of websites prevent you doing. You can ctrl+ to increase font size if it's too small, or ctrl- if it's too big. I dislike the white background, but otherwise it's very readable for the way I use web browsers -- one of some open windows.
- boomlinde 8y agoBrowsing the web using half of 1600 pixels in width is a surprising amount of pain in the ass, but perfect for CSS-free sites. It seems that designers tend to design for full screen, which I guess reflects their own workflow, but not at all mine as a programmer.
- jypepin 8y agoa lot of people would argue that his website is very hard to read
- 8y ago
- boomlinde 8y ago339 bytes which load an additional 241 bytes of CSS to load a 53k custom font... What is the point people are trying to make with titles like this? It's like claiming "50 bytes to make a website" after you figure out that you can just iframe Google.
- mad182 8y agoapt-get install wordpress See - I made a blog in one line of code. I'm a coding genius 8)
- tasuki 8y agoThe less code you write the less you have to maintain. Or at least that's how I understood this. Not attempting to save the few kb of network traffic, rather trying to reduce the complexity and the amount of code one has to maintain in the future.
- boomlinde 8y agoThat may be true, but in this case simply listing a few system fonts in their order of precedence resulted in less code to maintain since you lose the import directive. See the updated article. In general, the way I see it, relying on code and data from a third party at run-time is a liability. The code and data you no longer have to maintain is now impossible to audit because the vendor may replace it, stop providing the service, start using it for tracking etc. at any moment. It's code that you should be maintaining but can't.
- StreamBright 8y agoIs there anybody here who is deeply in the frontend rabbithole and can recommend a JS free CSS framework that we can use for a project where readability & UX matters a lot? Somebody recommended material.io but is it not JS free. I was wondering if there is a JS free CSS framework that looks great.
- arkokoley 8y agoMy personal favorites have been Bulma and Getskeleton.com. Somebody in the comments recommended tailwind.css
- jypepin 8y agoThat's nice but really, the problem with css (or what's hard difficult about it) is not designing a single page that has a single column of text with some titles. Any large css files that this is supposed to counter will probable have very similar (and as small) css rules for that same thing. It becomes hard when you need a grid, templates, images, and other more complex designs.
- _pmf_ 8y agoLack of server side modularization of HTML strikes again. It makes no sense that we still have no declarative way of modularizing content apart from using IFRAME. Why can I dynamically load parts and merge it in the DOM via JS but not via a declarative HTML feature?
- nailer 8y ago> It becomes hard when you need a grid CSS includes a grid. It works in every current browser.
- notahacker 8y agoSure, but that's only easy if you choose to ignore the 1 in 10 users that it doesn't work for, which is too many for most real world use cases, especially for something as fundamental as the layout of the page.
- arkokoley 8y ago
- andrepd 8y agoWhy such thin grey text? Why sacrifice readability as a matter of principle? What's wrong with black on white, like a regular f*cking book or newspaper?
- arkokoley 8y agoBecause paper is paper and screens are different. The white paper is slightly on the grey side compared to white on screen. And that hurts to look at for long. Thin text is a personal preference that I made here. No principles there.
- nailer 8y agoI love the site. However I susepct that font width would look much better on my high-res Surface than on my 1440p monitor.
- stan_rogers 8y agoThere are actually methods available to set your screen brightness correctly.
- DanBC 8y agoThe problem isn't the colour choice for the font. The problem is with the colour choice of the background combined with the weight of the font and a thin-stroked sans font. It's hard to read for many people.
- kstenerud 8y agoIt becomes an accessibility problem, because the contrast is too low, and not all eyeballs are the same. Low contrast combined with a thin font makes it very difficult to read.
- datenwolf 8y agoWhat is it with all those reduced font/background contrast styles? To me these are terribly hard to read. As a matter of fact a large part of my Stylish/Greasemonkey sets are just there to get back decent contrast on text.
- caillou 8y agoThere is a small accessibility problem with the CSS presented on this page. The author set `text-decoration: none;` on the links, relying only on color to identify them. This should be avoided. C.f. https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/links/do-not-remove-the-underline-from-links/ https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-st...
- dxxvi 8y agoPersonally, I hate max-width which is a way to waste the screen estate, I think.
- arkokoley 8y agoTrue. But reading lines longer than 90 char is difficult. Probably multi-column text is the way to go.
- arendtio 8y agoKinda funny... While I understand your point I feel the opposite. I hate it when people do not include a max-width because then I have to care about it. Yes, the Firefox reader view makes it quite easy, but I still prefer having a ready-to-read layout by default. But you are right, in this case, it all comes down to personal preference.
- arendtio 8y agoSometimes I wish some of those markdown viewers would come with such an effective CSS. For example, the KDE document viewer Okular can display markdown files but they look just awful. Once I tried finding the source of the Okular style but ended up creating a custom script to convert Markdown files to PDF files with a custom CSS (via Chromium...).
- davidhyde 8y agoIs CSS considered responsive if there are no CSS media queries? I didn't see any media queries in the authors css script.
- rchaud 8y agoIt's "responsive" in the way a single column of content can be responsive. Really the only gain was that a max-width property was set, so content won't stretch to the edges of your desktop display.
- zichy 8y ago1. Please do not import external resources from Google Fonts if you don’t have to. (Hint: You never really have to.) 2. If you want to use as little CSS as possible, simply use `sans-serif`. Otherwise try this font stack: http://markdotto.com/2018/02/07/github-system-fonts/ http://markdotto.com/2018/02/07/github-system-fonts/ 2. Fira Sans is actually quite nice, but please do not use `font-weight`s below `400` for continuous text. That’s really hard to read. 3. Since only the `300` weight is imported, the entire text will be thin – even headlines and `strong`. 4. Please leave the link text underlines for accessibility: https://webaim.org/techniques/hypertext/link_text#underlining https://webaim.org/techniques/hypertext/link_text#underlinin... bettermotherfuckingwebsite.com did a better job.
- blissofbeing 8y agofork of the fork JSFiddle: https://jsfiddle.net/abmnyjdc/1/ https://jsfiddle.net/abmnyjdc/1/