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

简短版本：初始index.html ( 直接GitHub链接 )文件，所有内容的绝对最小占位符。 (媒体查询，入口点，window.onload，禁用丑陋的默认chrome样式等)

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.

当您需要一个入口点，媒体查询和已经集成到HTML页面中的基本flex时，这最适合快速的原始项目。

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

Flex样式将转换为类( 遵循此模式以添加更多样式 )：

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

(要以所有内容为中心创建flex)

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.

加长版：我知道每个人都在谈论React。 但是有些人更喜欢以原始形式编写代码。 无论您做什么，最终都将获得相同的基本HTML代码。

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

多年来，随着网页开始变得更像应用程序，index.html变得越来越先进。

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

无论您做什么，最终都会获得相同的基本HTML代码。 那么，为什么要重新重写呢？

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

查看此GitHub链接 ，将其复制并粘贴到您自己的项目中。

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.

我知道不多，但是如果您要创建HTML布局，从长远来看，它将节省大量时间。