17 ms·
58 Bytes of CSS to look great nearly everywhere
- long-lazuli 7y agoI would suggest you to always put a `color` when you define a `background-*`. Now that website can support darkmode, it would be a shame to see a white text on this yellowish background...
- sureaboutthis 7y ago> that speaks to the fact that i know nothing about "modern" web development I thoroughly agree with his statement and just wanted to post this to help emphasize the fact.
- WrtCdEvrydy 8y agoInteresting. I'd recommend Water.css for a more through out-of-the box experience that looks great anywhere.
- ape4 8y agoCan say I love the choice of background color.
- xparco 8y agoWhy
- JoshuaRLi 8y agoThank you! I'm going for a pastel-like palette individual to each top level directory, if you poke around a bit. Website is still in early stages, so colors aren't fully thought out yet, but I'm very glad to hear you like it.
- DyslexicAtheist 8y agohow would you go about choosing a color palette? do you use tools to generate a palette[1] or is there some secret recipe or common rule set that graphic designers follow to come to a final combination that makes sense? [1] https://github.com/dylanaraps/pywal https://github.com/dylanaraps/pywal <- just discovered this yesterday during a weekend effort to improve the color combination used by my window manager, ...
- JoshuaRLi 8y agoI have absolutely zero experience in graphic design or color theory, etc! I just pick whatever colors I think look nice. That being said, as I put more content on my site, I'm looking forward to learning more in this space. Side note - you'd probably like this: https://jrl.ninja/configs https://jrl.ninja/configs
- frosted-flakes 8y agoIn my experience, automated color palette generation tools look cool, but don't work that well. Most applications or websites need far more colours than people think, even if those colours are used sparingly. This example chapter from the Refactoring UI book called "Building Your Color Palette"[0] was quite helpful, even though I didn't buy the book. [0] https://refactoringui.com/previews/building-your-color-palette/ https://refactoringui.com/previews/building-your-color-palet...
- stabbles 8y agoThere is this background color named 'snow'. It looks great and it's just four letters. In HEX it is #FFFAFA (I don't think many CSS minifiers consider #FFFAFA -> snow).
- discreditable 8y agoYou can use 3-digit hex colors in CSS too. #eee = #eeeeee #abc = #aabbcc It's not very precise, but can be convenient short hand.
- mushufasa 8y agoAuthor mentions this took a long time to arrive at. I recommend "Web Design in 4 Minutes" from the CSS guru behind Bulma: https://jgthms.com/web-design-in-4-minutes/ https://jgthms.com/web-design-in-4-minutes/
- tarruda 8y agoThis is the best CSS/design tutorial I've seen, thank you for sharing.
- boomlinde 8y agoThat is an interesting format. It's encouraging to see small, incremental changes to the style sheet result in so vast improvements in legibility.
- kbenson 8y agoI agree, but I found the first half much more useful (so far) than the last half. The second half was honestly a little overwhelming it what it felt like it was assuming about my capabilities. Less of "this small change or some slight variation will help a lot" and more "use your design experience to choose something visually pleasing here", which honestly, the lack of such experience is why I was reading such a guide.
- Narishma 8y agoFor me it started being less legible after the font change to Arial and kept going downhill from there.
- boomlinde 8y agoAt the point where the contrast of the text was reduced, I was off the hook. I'd rather do that the way OP did, by changing the background to a pleasant pastel. Either way, I'm impressed with the format.
- JoshuaRLi 8y agoOh wow, great read... I wish I had seen that earlier. Thanks for sharing! To elaborate, the rabbit hole I remember going down was something like googling "how to center css", then after being confused by a number of horrible incantations, arrived at flexbox then CSS grid, which was slightly less confusing, and then I took some time to really study the basics/fundamentals. It also doesn't help that so many websites, even personal sites/portfolios these days, have so much markup goop and cruft that makes it quite hard to learn by example :(
- jayrwren 8y agoThis is definitely better than nothing. I personally prefer a bit more so that It looks good on my old crappy phone with far fewer than 600px wide. water.css is great.
- deleted 8y ago[deleted]
- SippinLean 8y agoThere's more CSS on the page than that though. And it doesn't look great everywhere. At 375px-wide the line-length of the text is ~35 characters, optimal would be 50--70.
- JoshuaRLi 8y agoTrue. By looking great nearly everywhere, I mean the layout of the elements on most devices. What device do you have that is 375px wide? w.r.t line-length, there's another suggestion ITT that said to relax the padding a bit to get a bit more line-length, which I will probably be doing.
- SippinLean 8y ago> What device do you have that is 375px wide? iPhone 6/7/8 users still drives a non-negligible amount of conversion on our site. We don't target devices, 375px is a general target for the smallest screen size we'd be likely to encounter.
- JoshuaRLi 8y agoOoh, I just found out the very rectangular Galaxy S9/S9+ viewport is 360x740. Just wanted to let you know.
- bjourne 8y agoHow would you fit 50-70 characters on 375px wide lines?
- gcommer 8y agoJust remove the padding The site as-is @375px: https://imgur.com/a/zUsywrQ https://imgur.com/a/zUsywrQ longest line has 43 characters The site w/o padding @375px: https://imgur.com/a/IR8nFM4 https://imgur.com/a/IR8nFM4 longest line has 53 characters
- 8y ago
- theandrewbailey 8y ago> main { Why not target <body> instead? <main> should not have content that is shown on other pages, like headers, footers, and sidebars, but it makes sense to have this CSS affect those areas.
- JoshuaRLi 8y agoOooooh. Good point. Currently, I have header (which has the post title, and date) nested in article, nested in main. Nesting the header inside the article makes sense to me, but you're (and other people on the internet/s.o., as I am now seeing) suggesting that header should be outside main. I agree, and making those changes would mean I can switch from main to body in my css. The main complaint I have is then article and main seems redundant. What are your suggestions? Semantic HTML5 is hard :(
- Eiriksmal 8y agoThe semantics are only suggestions, not hard and fast rules. If you aren't adding top nav sections or site-wide footers, your current approach is fine. If you do want to experiment with those, you'll find the (correctly-constrained!) body content looks funny with copyright footers floating in space somewhere to the left or right of the main text.
- theandrewbailey 8y agoFrom my understanding, a document can have a header, footer, and/or multiple articles[0], with each article potentially having a header/footer specific to the article[1]. Presumably, the article(s) should be contained in a <main>. [0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ar... [1] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Headers_and_Footers https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Usin...
- brlewis 8y agoAn earlier screen-reader discussion suggested that <main> is of interest to screen-reader users. I presume that's because it generally doesn't repeat navigation that exists on every page. https://news.ycombinator.com/item?id=18758847 https://news.ycombinator.com/item?id=18758847
- discreditable 8y agoIt's 61 bytes because you're using two spaces instead of tabs! :^) You can shave off 2 more bytes by using em instead of rem. In your use case they are functionally the same. Rem is em relative to the root element. Your <main> pretty much is the root element.
- janpot 8y agoRemove all spacing to save even more.
- wolfgang42 8y agoWhen fully minified, it's actually 47 bytes: main{max-width:38rem;padding:2rem;margin:auto} But I think the original is still well into the land of diminishing returns.
- discreditable 8y agoAgreed, but OP isn't serving minified content. I brought up rem vs em because the difference is subtle and if you're byte shaving it's "free" bytes.
- john-radio 8y agoThe author is not byte shaving. He states that he is striving for "simplicity," which isn't the same thing.
- PopeDotNinja 8y ago46 bytes if you take out the new line :)
- tvararu 8y ago45 if you remove the trailing }.
- JoshuaRLi 8y agoI definitely considered this! But rem feels more predictable and straightforward. I have seen debates on em vs. rem, and there is certainly value with em in websites that have lots of nested and/or discrete responsive components, but for a very simple site, I quite like rem.
- Nadya 8y agoI recognize some of those scrots. Funny to see another /g/ent with a minimalist setup and website. I have about twice the amount of CSS, but most of it was to match my personal setup of colors/fonts: https://nadyanay.me/assets/css/style.css https://nadyanay.me/assets/css/style.css 361 characters (yours) vs 615 characters (mine) Remove the font family and .fav classes and some of the unnecessary border overrides and mine comes out to a more equivalent 319 characters, while still retaining the spacing and color scheme.
- Raphmedia 8y agoIt's a cool little snippet but it's nothing more than three run-of-the-mill CSS declarations. The maximum width is specified, a small padding is applied and the margins around the element are set to automatic so it centers itself horizontally. All the other styles applied on this pages are not part of the snippet. The weight of the titles, the spacing under the paragraphs, etc., are all specified on the page's CSS file but not described in the blogpost itself. [0] I was expecting something akin to normalize.css[1] which normalize the default styles of your page[2]. There are multiple very lightweight CSS "frameworks" that you should carry around instead of the snippet shown here. We are talking ~5KB. See https://github.com/troxler/awesome-css-frameworks#very-light https://github.com/troxler/awesome-css-frameworks#very-light for a great list. [0] https://jrl.ninja/etc/post.css https://jrl.ninja/etc/post.css [1] http://nicolasgallagher.com/about-normalize-css/ http://nicolasgallagher.com/about-normalize-css/ [2] Normalize CSS aims to make built-in browser styling consistent across browsers. Elements like H1-6 will appear bold, larger et cetera in a consistent way across browsers. You're then supposed to add only the difference in decoration your design needs.
- mgazzer 8y agoI get the impression from that the author is an ancient backend, who just discovered the box model. "Hey, black text is easier to read on a white background!" Yaaaa, no shit. What about flexbox? CSS Grid? #goodluck
- dswalter 8y ago> I get the impression from that the author is an ancient backend Thanks for this clear example of an offhanded dismissal.
- rchaud 8y agoHaving seen a number of HNers personal websites, they could absolutely stand to benefit from a simple article like this. Many of them are more interested in talking about how minimal their static site generator is, rather than whether the content on said site is readable or even mobile friendly.
- JoshuaRLi 8y agoThese were my sentiments exactly while exploring other peoples personal websites before making mine! Thank you.
- bloopernova 8y agoIt's one reason why I liked write.as a lot and started writing some stuff on there. Their CSS is really nice and simple.
- mgazzer 8y ago"Works on my machine, in this viewport size."
- chrisseaton 8y ago> it appears that the default font size for most browsers is 16px, so 38rem is 608px What does px mean in CSS? I thought it was pixels but clearly not...
- deleted 8y ago[deleted]
- uranusjr 8y agoIt is defined as a small but visible size. Whatever that should be is left to the implementers.
- Raphmedia 8y ago"The px unit is the magic unit of CSS. It is not related to the current font and usually not related to physical centimeters or inches either. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like an e-book reader? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use." https://www.w3.org/Style/Examples/007/units.en.html https://www.w3.org/Style/Examples/007/units.en.html
- chrisseaton 8y ago> What is sharp, small and visible depends on the device and the way it is used How can you use this vague definition to do anything useful? I would imagine they simply mean 'it's a pixel, or something as physically large as pixels used to be until we got retina screens' but they can't say that as it doesn't sound technical enough!
- Raphmedia 8y agoPretty much, yes. Screens changed and evolved so now it doesn't mean much and most people will attempt to skip using them.
- vitaminCPP 8y agoAssuming that JoshuaRLi is Josh: I really like your site. A minimalist website is surprisingly hard to achieve.
- JoshuaRLi 8y agoThank you! I've indeed sunk a surprising amount of effort and time to make this. I have like, 5 directories of past iterations that didn't "feel like the one" spanning a bit more than a year.
- DantesKite 8y agoI think because so many of the people here are programmers, there will be some incentive to talk about the code, but the design is lovely. It feels very easy to read. So much clutter has been taken away. There’s nothing pulling at the edges of your attention and ruining the experience. I quite like it.
- Eiriksmal 8y agoAfter seeing Gwern's website[0], I immediately knew what design I wanted for my personal site [1]. Tufte's CSS package is much heavier than these three rules, but it achieves the same result: Content designed to maximize readability by removing distracting elements and respecting known typography rules. Because I write with an overly-large number of asides, I fell in love with the Tufte-styled side/margin notes. The resulting text is much easier to read, since I'm not littering the paragraphs with em-dashes and lengthy parentheticals. I hope more people rebel against the Medium-looking websites with massive images and huge blocknotes in 30px fonts that may or may not just be a line from the next paragraph or an important point to keep in mind when reading the next paragraph. #longformrebellion #endthelisticle [0] https://www.gwern.net/About https://www.gwern.net/About [1] https://lawler.io https://lawler.io
- sigspec 8y agoGorgeous
- JoshuaRLi 8y agoYour website is wonderful, I encourage you to share it more! I did some extensive preliminary research looking around at personal sites posted to HN and other places, and am now surprised I hadn't yet stumbled upon yours until now.
- detritus 8y agoLovely, but if you're making a big deal about quotes and pull-aways in your format, might I encourage you to use proper quotation marks — eg. “The” vs. "The"?
- deleted 8y ago[deleted]
- saagarjha 8y ago> font-family: Arial, Helvetica, sans-serif; Putting Arial before Helvetica :(
- JoshuaRLi 8y agoI've got to save browser CPU cycles! /s
- ascar 8y agoCool! For my personal taste a little bit too much padding for my Galaxy S9 though. 1.25rem or 1.5rem would be sufficient and gives another 1-2 characters per line. But that's mostly personal taste.
- JoshuaRLi 8y agoWould you mind taking the time to provide a screenshot? What you suggested sounds like a good idea to me!
- TomK32 8y agoFor me the "edge" on a small mobile display feels different than on a full monitor and I've always preferred a small padding on the mobile device.
- ascar 8y agoHere you go https://imgur.com/a/BzMdUtQ https://imgur.com/a/BzMdUtQ I think I can't edit the styles in Chrome on Android though. (no dev tools) This https://imgur.com/a/I3CHas1 https://imgur.com/a/I3CHas1 is for comparison a screenshot of the mobile HN padding.
- JoshuaRLi 8y agoCool, thanks! It's 1.5rem now if you hard refresh :)
- oftenwrong 8y agoLooks great even without CSS. The only exception is a very wide viewport. 1024x768: https://i.imgur.com/NEAenbY.png https://i.imgur.com/NEAenbY.png 320x568: https://i.imgur.com/TdVjnKR.png https://i.imgur.com/TdVjnKR.png 3480x1600: https://i.imgur.com/MfhxmRD.png https://i.imgur.com/MfhxmRD.png
- Semaphor 8y agoI find it interesting that this snippet is used: ::selection { background-color: #ff0; } Because when f.lux raises the color temperature for the evening it makes it so I can barely see if anything is selected while the normal color works perfectly no matter the temperature I set. At first, I thought it was one of those JS scripts that prevent selection.
- JoshuaRLi 8y agoInteresting, I didn't consider the fact that blue-screen filters are quite common nowadays. However, I still like the aesthetic of highlighting something on the page with a color similar to that of a highlighter pen, as opposed to the blue highlight + invert color. I remember I was on some website one day and it had this same effect, which I found to be pleasantly surprising.
- avip 8y agof.lux makes many websites (and indeed apps in general) harder to read, or just look awful. Not sure it's reasonable to expect an arbitrary website to be "f.lux compatible".
- Semaphor 8y agoNever had any problems with sites being hard to read. But I also don't really visit overstyled sites. Not to mention that you actually have to do the effort to make it incompatible :)
- peterwwillis 8y ago> it took me a surprising number of iterations to arrive at this point. perhaps that speaks to the fact that i know nothing about "modern" web development, or [..] just how hard it is to keep it simple in a world of complication. It's the latter. Being both simple and good is not easy.
- rococode 8y agoI notice that the author doesn't use capitals either and I'm not sure if visually I like that or not. It makes it feel more casual which is nice, but I think it does get harder to parse the sentences.
- JoshuaRLi 8y agoI am going for the casual feel, although I am aware for some people it does hurt readability. But I quite like it, and want to indulge a little on my own site :)
- Theodores 8y agoThere is a CSS rule for everything lower case. If Google gets a snippet of your page and puts it in the less casual results it looks silly in lower case. The content needs to be written with capital letters and punctuation and styled to be casual.
- nwmcsween 8y agoPlease don't do this with max-width it makes printing a huge mess, I regularly have to edit max-width on sites that set it so I don't have to print double or triple the number of pages, at least set max-width to be a relative unit for print.
- mixmastamyk 8y agoMax-width is the correct setting for the desktop, where windows are resized to enable proper reflow. Printing web pages should be quite rare, no?
- tyre 8y agoeither way: @media print { … }
- rabidrat 8y agoseems like this could be solved in the OP with something like "@media screen".
- driverdan 8y agoHow often do you print websites?
- draw_down 8y ago> max-width: 38rem > supporting 600px displays at a minimum seems reasonable. Max-width is just that: maximum width. That CSS is not "supporting 600px displays at a minimum".
- tasuki 8y agoLove this! 58 bytes of css... and it's typographically better than Wikipedia and many other "styled" websites!
- deleted 8y ago[deleted]
- nacs 8y agoAnother good resource for this "minimal" approach is: https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/ .. and it's followup: http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ (Both are SFW sites except for the use of expletives in the URL/title).
- dexterdog 8y agoDon't forget the excessive use of expletives in the content.
- SebiH 8y agoThere's also https://bestmotherfucking.website/ https://bestmotherfucking.website/
- crooked-v 8y agoI'm a fan of the colors and typography on this one: https://evenbettermotherfucking.website https://evenbettermotherfucking.website
- bjourne 8y agoI'm definitely going to steal your website design (please don't sue me). But I don't like sans-serif fonts. What serif fonts do you recommend to use instead?
- arkitaip 8y agojust use font-family: serif; and let the browser use its default. Soon browsers will support font-family: system-ui; too.
- JoshuaRLi 8y agoI don't care and am instead flattered :) Would appreciate a mention in the comments if you indeed do, though. As for serif fonts, I would recommend doing what the other comment suggests. To expand on that, if you find that a particular safe web font [1] looks better for your site, you can explicitly prioritize it. For example, I did Arial -> Helvetica -> sans-serif. [1]: http://web.mit.edu/jmorzins/www/fonts.html http://web.mit.edu/jmorzins/www/fonts.html
- mrb 8y agoDoesn't look "great" on mobile. 2rem margins are way too big for a phone screen. Too much wasted space.
- charliepark 8y ago2vw would be a reasonable substitution, as it creates a dynamic margin, based on the screen's "view width". Smaller screens → smaller margins.
- JoshuaRLi 8y agoThanks for bringing vw to my attention, it sounds great! I tried it out and the main problem is 2vw looks much more reasonable on many mobile displays, but puts a lot of top margin on wide screens (laptops/monitors). I still want to retain the same size margins for top/bottom and left/right, so a happier medium would be to vw for mobile and rem for tablets/laptops/monitors, but then that's too much trouble for diminishing returns in my opinion.
- mrb 8y agoJust use 1rem everywhere. There is no reason for the hideously large 2rem margin. Another person said it's just opinion, but I'm sure 9 out of 10 users would tell you 1rem is the better looking option overall.
- ponyous 8y agoThere is `vh` as well, it works the same way, but instead of working relative to viewport width vw, it works relative to viewport height vh.
- ramraj07 8y agoThat's just opinion. As long as it's not hugging the edge it's fine, it's erring in the side of caution at best.
- dredmorbius 8y agoThree more: body { font-size: medium; } main, article, content { font-size: 1rem;} p, li, dd, dt, blockquote { font-size: 1em; } Give the user their default font size, not some px-defined kludge. Em vs rem: https://news.ycombinator.com/item?id=19608806 https://news.ycombinator.com/item?id=19608806
- dredmorbius 8y agoObMFW: https://www.motherfuckingwebsite.com/ https://www.motherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ https://evenbettermotherfucking.website/ https://evenbettermotherfucking.website/ https://bestmotherfucking.website/ https://bestmotherfucking.website/ https://thebestmotherfucking.website/ https://thebestmotherfucking.website/ https://perfectmotherfuckingwebsite.com/ https://perfectmotherfuckingwebsite.com/ https://codepen.io/dredmorbius/pen/KpMqqB https://codepen.io/dredmorbius/pen/KpMqqB The OP's 58 bytes are a very good start.
- natch 8y agoI’m an outsider to this world so please forgive the basic question: what is “main”? Does its use depend on any particular markup in the HTML? And how far back does it go as a CSS feature?
- extra88 8y ago"main" is not CSS, it's an HTML element introduced as part of HTML5. All modern browsers support it, Firefox since 2013. No version of Internet Explorer supports it but all versions of Microsoft Edge do. Browsers ignore elements they don't recognize (they don't ignore what's within them) which does mean they will ignore CSS statements that only uses "main" a selector. Modern browsers that support the element will present it as a "main" landmark to assistive technologies. Landmarks (header/banner, footer, main, navigation, etc.) are a useful way for people who use assistive technologies (mostly screen readers for the visually impaired) to get a sense of a page's layout and to move around within a page's contents. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
- natch 8y agoThanks!
- msla 8y agoThat text area is way too narrow. It inhibits scanning to be unable to see very much of the text at once, because it forces you to scroll see more than about a paragraph at a time. Readability isn't the concern. Show me a book with margins that gigantic.
- stackzero 8y agoAs someone else who is not versed in CSS this is epic
- marcus_holmes 8y agoIs it just me, then, that hates the "narrow strip of text down the middle of my large monitor" school of web design? I don't understand why I'm being forced to scroll when there's all this blank space to the sides. Even on my laptop, this looks strange to me, a huge wide expanse of nothing, and this little strip of text down the middle of the page. What's the reasoning behind this?
- roystbeef 8y agoIt's to help readability for larger blocks of text, so it's easier to find the next line when the text wraps
- Zak 8y agoA reason is that scanning horizontally with your eyes while reading a long text increases the chance you'll lose your place.
- wa1987 8y agoConstrained line lengths increase readability: https://practicaltypography.com/line-length.html https://practicaltypography.com/line-length.html
- 0815test 8y ago> What's the reasoning behind this? Lack of multi-column text support on the Web. Optimal readability is around 64 characters per line - more than that hurts quite a bit, especially for long-form text where accurate scanning is more important.
- Macha 8y agohttps://caniuse.com/#feat=multicolumn https://caniuse.com/#feat=multicolumn Even IE10, mobile safari, and the gingerbread android browser support it
- marcus_holmes 8y agoThis would make so much more sense to me than the thin strip of text :)
- rident 8y agoThe author actually loads 10x that much CSS (546 bytes) into the example page! [1] Granted that is still not much but here I've augmented the 546 byte example to render nearly the same results with only 155 bytes. [2] I've removed rem units as it's easier for all to understand without them. Pixel units scale just fine across the browsers available these days so there's no need for the mental hurdles and explained calculations. I've left them in the source HTML all the same for the sake of testing. The real feature making sites look good across a ever widening array of pixel densities today is this meta tag that was also used in the example HTML: <meta name="viewport" content="width=device-width"> [3] Setting a font-family generically on the body tag gives the shortest path to consistent, doesn't-look-like-times-new-roman, font styling possible. I left the unmentioned line-height in because it's a good default. It adds a little basic spacing between wrapping lines of text. Styling elements that are children of the article to only have bottom margins gives consistent spacing to all content, and since top margins collapse [4] we can avoid dealing with them all together. [1]: https://jrl.ninja/etc/post.css https://jrl.ninja/etc/post.css [2]: https://jsfiddle.net/gb0ojdsL/8/ https://jsfiddle.net/gb0ojdsL/8/ [3]: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/View... [4]: https://css-tricks.com/what-you-should-know-about-collapsing-margins/ https://css-tricks.com/what-you-should-know-about-collapsing...
- JoshuaRLi 8y agoHaha yes, I mean 58 bytes for layout, not layout + styling. Anyways, what you've written here is good, and definitely encompasses some things I thought about. Two notes for you: 1. I explicitly preferred Arial and Helvetica over the generic sans-serif is because I found some other popular web safe fonts didn't look nearly as good, for example, Open Sans, mainly due to the large x-height. 2. I don't think rem incurs much cognitive overhead over px, and the main reason is that it scales with the user-adjustable font size. Try changing your browser's font size from 16 to say, 20. You'll notice that with px max-width, # chars per line will decrease a lot, affecting readability. in contrast, rem max-width will scale nicely.
- matthewhartmans 8y agoI dig it! Good job!
- snickerbockers 8y agoSorry OP, but it doesn't look good everywhere. You're only using the middle 1/3 of the screen on desktops.
- firexcy 8y agoThen the page is ruined by the disastrous Arial font.
- littlestymaar 8y agoMy favorite resource about minimalist CSS : http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ And at least it uses its own recommendations, whereas the OP isn't (it ships way more CSS than the mere 58bytes it talks about)
- Iv 8y agoStill wastes 60% of my display's width. Sorry, if you are into minimalist design I keep getting back there, with 58 bytes less of CSS: https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/
- asimjalis 8y agoThis is beautiful.
- CozyBunneh 8y agoLooks like crap on high resolution monitors >.>