339 Bytes of Responsive CSS
blog.koley.in
blog.koley.in
`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.
CSS includes a grid. It works in every current browser.
If they do in your case, though, I understand.
Accessibility is better addressed in the client than in the server.
CSS has a grid system, but even assuming 100% compatibility, you still need to declare your grid and elements inside it, etc. and that is not done in 5 lines of css.
C.f. https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-st...
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/
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#underlinin...
bettermotherfuckingwebsite.com did a better job.
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.
See - I made a blog in one line of code. I'm a coding genius 8)
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.
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.
And if readability suffers, I’ll rather take the crude original motherfucking website over this.
Thin text is a personal preference that I made here. No principles there.
It's hard to read for many people.
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...).
His website is refreshingly light and fast, but that's still no excuse for Times New Roman. Maybe it's a retro irreverence thing.
I dislike the white background, but otherwise it's very readable for the way I use web browsers -- one of some open windows.
The text layout alone could have been lifted straight from any academic journal, aka the densest, least readable typographic style.
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.
Mobile Safari is doing an okay horizontal scroll for the data tables because they don't fit in the portrait width on my phone; to make it nicer on mobile calls for using different HTML, either repeating the data in the original HTML and selectively displaying them with CSS or using JavaScript to manipulate the data.
Fixing this in Firefox is as easy as opening about:preferences in a new window and selecting your preferred sans font. Dan's site will instantly be transformed, and every other site like his (e.g. http://cr.yp.to/ https://motherfuckingwebsite.com etc) will be rendered similarly for all future visits.
Somebody in the comments recommended tailwind.css
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.
But you are right, in this case, it all comes down to personal preference.
So it’s utterly pointless.
Is it because of the linked site?
I think, I should probably change the text.
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.
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.
On the other hand I think this articles are a bit clickbaithy. Yest you can have a very small stylesheet but are you sure you don't want to style your form components? not having more than one type of button. Not dealling with navigation for both desktop and mobile? I can make a 0 byte stylesheet for a empty body page and that's the perfect amount of css that page will need but has 0 usefullness in the real world.
Thats the endgame. Style the html elements rather than introducing classes for every frigging thing. Reserve classes for special purposes.
This article was just an introductory piece. I wanted to show that a majority of what non-tech/non-design people perceive about the website can be achieved in a very small amount of CSS.
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.
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...
> 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.
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.
There’s literally no distinction.
Light weight, small, skinny, sans-serif is hard to read for most of the population.
It might be okay for 20 years olds with great monitors. It's tedious for everyone else.