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.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store