Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

339 Bytes of Responsive CSS

blog.koley.in

Post reply on HN
Print view View original

31–40 of 101 posts

Re: 339 Bytes of Responsive CSS

#31

Post by jspash »

arkokoley wrote: post #18
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.

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 lack of mysterious hard to track bugs. I really recommend trying it for a small project, but it's not for everyone.

Re: 339 Bytes of Responsive CSS

#32

Post by StreamBright »

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

Re: 339 Bytes of Responsive CSS

#33

Post by smoyer »

arkokoley wrote: post #23
smoyer wrote: post #11

Earlier quoted context omitted.

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'd recommend against putting the linked site on a projector at work Is it because of the linked site?

Yes ... I didn't even think about the fact that "linked site" is ambiguous in this case. I wonder if you can play the "six degrees of separation" game (Kevin Bacon) with web-sites. How many links do you need to follow to get from any random site to any other? If the web is fully connected, then "linked site" is fully ambiguous!

Re: 339 Bytes of Responsive CSS

#34

Post by mort96 »

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.

It's 339 bytes of CSS which loads 2.3k of font css which loads 21k of woff2. 23k requiring two round trips (three if the stylesheet is in a separate file, four including the initial HTML load), and to prevent FOUT, the browser won't show any text at all until all the round trips are completed (or it decides it's taking too long and shows the wrong font). Plus you're adding a dependency on Google for no good reason.

I mean, it's not exactly worse than other websites, it's maybe honestly worth it because Fira looks pretty good, it's just not really 339 bytes.

Re: 339 Bytes of Responsive CSS

#35

Post by r0bbbo »

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.

Times 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

Re: 339 Bytes of Responsive CSS

#36

Post by skrebbel »

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.

Re: 339 Bytes of Responsive CSS

#37

Post by half-kh-hacker »

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.

The website actually uses the default font for your browser. I've always changed this to a sans-serif font.

Re: 339 Bytes of Responsive CSS

#38

Post by enriquto »

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.

It is not boring. It is sad.

Re: 339 Bytes of Responsive CSS

#39

Post by jypepin »

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.

Re: 339 Bytes of Responsive CSS

#40

Post by onion2k »

arkokoley wrote: post #18
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.

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 compatibility, etc, but it's not wrong unless you're building a site that really needs to be fast and small.

If you're building an admin page that'll be accessed by 5 people in total and can be cached for a year between updates then Bootstrap is great.

If you're building a blog that's going to get 2000 readers a month and want to concentrate on writing articles instead of writing frontend code, Bootstrap works really well.

If you're making a new login form for Facebook's homepage that'll get 100,000,000 visitors in the first hour it's live, maybe Bootstrap is the wrong choice.

CSS frameworks are tools, and they have their place. There isn't a universal rule that says using one is wrong.

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

Post reply on HN