339 bytes of responsive CSS

7 CSS declarations and a/an (optional) font import is all it takes to change a drab basic website to a minimalistic easy to read piece of beauty.

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300');
body {
  font-family: 'Fira Sans', sans-serif;
  line-height: 1.6;
  color: #222;
  max-width: 40rem;
  padding: 2rem;
  margin: auto;
  background: #fafafa;
}

Let’s go over this.

• font-family sets a font for your webpage. In this case, it sets ‘Fira Sans’. Incase, ‘Fira Sans’ is unavailable, the page would take the standard sans-serif font.
• line-height gives us some room between the lines, preventing it from looking like a wall of text and enhances readability.
• color and background together reduce the text-to-background contrast making it easier on the eyes.
• max-width with padding and margin restrict the content to a maximum of 640px, aligns it in the middle and makes sure that the text never hits the edges of the screen. And its even responsive. Looks good on mobile too!

Let’s add some flavor with some colors and making images fit in with the text.

img {
  max-width: 100%;
}
a {
  color: #2ECC40;
  text-decoration: none;
}
h1, h2, strong {
  color: #111;
}

These 4 CSS rule-sets together form a base for a simple, readable website. The best part about this code is that its completely class free and works well with default browser styles. It puts in perspective how much overengineering goes into building websites when people use Bootstrap for their blogs.

Browsers and CSS engines in them have come a long way since 2011 when Bootstrap was introduced. CSS styles are standard and consistent across browsers today and require minimal tweaking to work flawlessly. Bootstrap, Foundation, Semantic-UI etc. are great CSS frameworks and they have their own use cases. However, people tend to overuse them and that has led to websites being laden with ton of unnecessary CSS.

With just 339 Bytes and 20 lines of CSS, a reasonably good looking text heavy website can be designed. See it at work: Baserock.

Update: This article got much more attention than I expected it to have and with that attention came a few suggestions on how this CSS can be improved.

1. Drop the use of Google Fonts as a dependency, use system fonts. Removed Fira since its thin font style would cause readability issues on non hi-res monitors.
2. Retain underlines for links

With those changes in place:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #222;
  max-width: 40rem;
  padding: 2rem;
  margin: auto;
  background: #fafafa;
}
img {
  max-width: 100%;
}
a {
  color: #2ECC40;
}
h1, h2, strong {
  color: #111;
}

And now, the amount of css you need is 296 Bytes. Ba Dum Tss.

---

The discussion is on Hacker News at: https://news.ycombinator.com/item?id=19622786