VanillaHTML

An Opinionated CSS (Cascading Style Sheets) File to Modernize HTML (HyperText Markup Language)
Created By: Bijan Fandey | Fandey Tech

Build With Simple Semantic HTML Faster

Beautiful and Accessible HTML

By having a simple CSS file, you can learn web accessibility and Semantic HTML faster. Don't worry about crafting your own styles or classes. Just use Semantic HTML and VanillaHTML will do the rest!

Prototype With VanillaHTML

Rapidly build concepts by only using HTML and not having to worry about CSS or Tailwind until you are ready to design.

Learn Proper HTML

Did you know you could build these accordions with just HTML? If you didn't, you will by learning with VanillaHTML!

If you are newer to web-development, CSS can be overwhelming, it still is to many experienced devs too. CSS is creating art with numbers, and there are a lot of things to know about it. It can be a frustrating experience wanting to learn HTML but feeling like everything just looks ugly and outdated.

What's Included

CSS File with root variables for simple theming
Roboto Font File
CSS Reset created by Piccalil with minor changes

Why I Made VanillaHTML

There's so much to learn when starting your journey in web development. It can be difficult and daunting, but it all starts with HTML.

I wanted to create an experience where learning HTML felt more modern, fun, and more effective. I wanted the visual aspect of building a basic HTML website to make it clear what exactly your HTML is doing.

Shades and Colors

A new standard for developers to keep common colors and shades consistent throughout the web.

As I've been getting feedback on this project, I've had a few people mention how it would be nice to have a standard set of colors to use throughout their apps.

Shades

--shade-0
rgb(0, 0, 0)

--shade-5
rgb(5, 5, 5)

--shade-25
rgb(25, 25, 25)

--shade-50
rgb(50, 50, 50)

--shade-75
rgb(75, 75, 75)

--shade-100
rgb(100, 100, 100)

--shade-125
rgb(125, 125, 125)

--shade-150
rgb(150, 150, 150)

--shade-175
rgb(175, 175, 175)

--shade-200
rgb(200, 200, 200)

--shade-225
rgb(225, 225, 225)

--shade-250
rgb(250, 250, 250)

--shade-255
rgb(255, 255, 255)

Colors

--color-danger
rgb(255, 0, 0)

--color-caution
rgb(255, 165, 0)

--color-success
rgb(0, 128, 0)

Pros and Cons

Note: Notice how this section doesn't have a line to emphasize the heading? That's because there is no subheading, therefore the <hgroup> tag is optional. You can still add this tag without a subheading and the line will appear.

Note: The <div> elements do not contain any styles. This is intentional. The parent containers are built using the <section> tag. These notes are built with the <aside> tag.

Let's look at some pros and cons of using this file.
PROS	CONS
Easier to see what you are doing as a beginner Makes use of Semantic HTML Responsive No class names for easy overwrites Default form inputs look good Tables come pre styled for rapid development	Opinionated styles No keyframe animations Delay Learning CSS
Here's another row just to look at!	The CSS contains some properties that do not have baseline support yet.
Progressive Enhancement: Use an updated version of Chrome for the best experience.
And this is a table footer!

Fine Forms

Hate having super ugly forms by default? VanillaHTML makes the dev experience faster and more enjoyable.

Please read MDN Documentation on Semantics in HTML

This is an Example Form

Note: I've updated the cursor on various inputs to give better feedback to users. I will be coming back to add more Form Elements and inputs over time.

Favorite Show?

Choose your favorite monster Kraken
Sasquatch
Mothman

Don't forget a rating!

Do you agree? Agree
Disagree

Tell Me About Your Childhood: Favorite Color

CSS Only Form Validation

Email^*

Password^*

Press Submit to see an example <button> press.

Never gonna make you cry, Never gonna say goodbye,

- Rick Astley, Never Gonna Give You Up

Description Details

Create definitions without defining styles

VanillaHTML: A CSS file that redesigns default HTML elements
VanillaComponents: Coming Soon. Web components based on the VanillaHTML standard. Makes default HTML elements more intuitive, interactive, and easy to implement. Also provides default standards for commonly built components like navigation menus and footers. Always Semantic, Always Accessible

What Elements are Restyled?

I'm working on overhauling all elements that can be customized with only CSS.

Elements like popovers and dialogs (things that are better with JavaScript) will be created with web-components in the future.

I simply want to make VanillaHTML feel extremely intuitive to build with.

Documentation

It's Just HTML

I have examples all over this page, but if you follow correct standards and use correct elements for their intended purpose, you shouldn't have any issues.

Rewards Semantic HTML

If you don't have an understanding of Semantic HTML, this CSS file will be a big help in learning. MDN HTML Elements Documentation

Why Semantic HTML is Important

Everyone Deserves Access to Your Website

Semantic HTML is the process of structuring your HTML content in a way that is understandable to assistive technology. There are many benefits to using semantics in your code, especially when it comes to SEO and future-proofing your website. But most importantly, you can reach people with disabilities that can only access a tiny portion of the internet, think of how many potential users you could actually be missing out on.

Please read MDN Documentation on Semantics in HTML