339 Bytes of Responsive CSS • Hacker News Board

Re: 339 Bytes of Responsive CSS

#51

Post by youngtaff » Wed, Apr 10, 2019, 11:35 AM UTC

smoyer wrote: post #11

onion2k wrote: post #5

It'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.

Yep ... the first thing I did was to see if he was "eating his own dog-food". As an aside, I'd recommend against putting the linked site on a projector at work (or at least look at it first to determine whether it fits your organization's culture).

I think most projectors would have a problem displaying the text in a readable way - the line width is so fine

Re: 339 Bytes of Responsive CSS

#52

Post by youngtaff » Wed, Apr 10, 2019, 11:37 AM UTC

onion2k wrote: post #14

josteink wrote: post #8

Earlier quoted context omitted.

And the font is ugly to boot. So it’s utterly pointless.

"Ugly" is a bit subjective. I quite like the font, and the Latin character set woff2 font file is only 13kb. It's not a bad choice.

The fine font strokes and color contrast make it quite hard to read

Re: 339 Bytes of Responsive CSS

#53

Post by stan_rogers » Wed, Apr 10, 2019, 11:40 AM UTC

arkokoley wrote: post #44

andrepd wrote: post #43

Why 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?

Because 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.

There are actually methods available to set your screen brightness correctly.

Re: 339 Bytes of Responsive CSS

#54

Post by mad182 » Wed, Apr 10, 2019, 11:40 AM UTC

boomlinde wrote: post #26

339 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.

apt-get install wordpress

See - I made a blog in one line of code. I'm a coding genius 8)

Re: 339 Bytes of Responsive CSS

#55

Post by bhaak » Wed, Apr 10, 2019, 11:50 AM UTC

new_here wrote: post #25

All this CSS minimalism reminds me of Dan Luu's post about 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.

This is not CSS minimalism, this is NO CSS.

How that site is rendered on your device is the default look of any website in your browser before any CSS is applied.

This site would actually profit a lot from this minimal CSS as the defaults are bad and on mobile they are even worse.

Re: 339 Bytes of Responsive CSS

#56

Post by snorlaxle » Wed, Apr 10, 2019, 12:01 PM UTC

skrebbel wrote: post #36

onion2k wrote: post #5

It'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.

This 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.

I 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

Re: 339 Bytes of Responsive CSS

#57

Post by notahacker » Wed, Apr 10, 2019, 12:03 PM UTC

nailer wrote: post #48

jypepin wrote: post #39

That'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.

> It becomes hard when you need a grid CSS includes a grid. It works in every current browser.

Sure, 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.

Re: 339 Bytes of Responsive CSS

#58

Post by caillou » Wed, Apr 10, 2019, 12:09 PM UTC

There 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-st...

Re: 339 Bytes of Responsive CSS

#59

Post by arkokoley » Wed, Apr 10, 2019, 12:10 PM UTC

onion2k wrote: post #40

arkokoley wrote: post #18

Earlier quoted context omitted.

I plan to shift away from class based css frameworks myself over the next few weeks as I update my website. Of all the people who over use css frameworks like bootstrap, I'm one of them as well and this is an attempt to start correcting that mistake.

Of all the people who over use css frameworks like bootstrap, I'm one of them as well and this is an attempt to start correcting that mistake. I'm not sure what "over use" really means here, but I think calling it a mistake is wrong. Using bootstrap (or any other framework) is optimizing for something other than download size. That might be development speed, better design than you're capable of, cross-browser compat…

I wholeheartedly agree with all the points that you have made here.

> That said, if the only part of Bootstrap you're using is the grid and you don't need the UI toolkit, then browsers have got you covered these days - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La....

What I meant by overuse is this. A lot of people I know, use bootstrap for literally everything. Even if it is just a 2 page website with a block of text and image and a form the first instinct is to drop in the entirety of bootstrap and just go on the way. Do you really need so much of css, hundreds of unused classes just because you wanted a grid, even when you can probably use flex and a lot of native css stuff.

My target for this post was people who use css frameworks are a UI standardising tool rather than a UI styling tool.

Re: 339 Bytes of Responsive CSS

#60

Post by arkokoley » Wed, Apr 10, 2019, 12:15 PM UTC

jspash wrote: post #31

arkokoley wrote: post #18

Earlier quoted context omitted.

I plan to shift away from class based css frameworks myself over the next few weeks as I update my website. Of all the people who over use css frameworks like bootstrap, I'm one of them as well and this is an attempt to start correcting that mistake.

I'm curious, how do you plan on styling going forward? Have you had a look at https://tailwindcss.com ? I'm just finishing a large redesign project using tailwind on a Rails/Vue platform and the experience has been great. The idea is that all classes are small, focussed and do one thing only. The downside is that the markup starts to look like 1995 again. The upside is the speed at which you can style a site, and the…

My point was to move away from class based styling as much as possible.

CSS classes like "hover:bg-blue-dark" clutter the markup and if you have generated or user provided text in your website, things start to look out of place very soon.

That being said, tailwindcss seems to be a really great project for people who are building a website quickly and without major changes in structure.