Vanilla index.html for 2020

Short version: initial index.html (direct GitHub link) file with absolute minimum placeholders for everything. (media queries, entry point, window.onload, disable ugly default chrome styles, etc.)

This is ideal mostly for quick vanilla projects when you need an entry point, media queries, and basic flex already integrated into the HTML page.

Flex styles are converted to classes (follow this pattern to add more):

.f { display: flex; }
.v { align-items: center }
.h { justify-content: center }
.r { flex-direction: row }
.c { flex-direction: column }
.s { justify-content: space-around }
.p { padding: 10px }

Now all you have to do is:

<div class = “f v h”>
  <div class = “f v h p”>
    <p>I’m centered</p>
   </div>
</div>

(To create flex with everything centered)

I’ve been using this approach for several weeks and this saves a ton of space and time building layouts.

Long(er) version: I know everyone is talking about React. But some people prefer to write code in vanilla form. And no matter what you are making, you’ll eventually arrive with the same exact base HTML code.

Over the years, as web pages started to be more application-like, index.html has been becoming more advanced.

No matter what you are making, you’ll eventually arrive with the same exact base HTML code. So why rewrite it all over again?

See this GitHub link to copy and paste it into your own projects.

I know it’s not much, but if you are creating HTML layouts, It’s going to save a ton of time in the long run.