Documentation

This guide will teach you how to use VanillaHTML to learn and rapidly prototype your ideas.

Using VanillaHTML allows you to structure and future proof your website for all devices and browsers without worrying about the design system behind it. You can focus on making your website functional first.

Installation

Copy or download the CSS file from Github.

Review HTML Elements

If you aren't already familiar with the list of HTML elements please review these elements before diving into using VanillaHTML. We will walk through everything that is included in VanillaHTML, but it will be easier if you have the HTML elements reference open so you can get extra information as needed.

Asides

Create definitions without defining styles

HTML Tables

A simple structure to easily see your table data

Example Table
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 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!

Forms

CSS only validation, basic styling, cursor updates.

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.

Blockquote

Never gonna make you cry, Never gonna say goodbye,

- Rick Astley, Never Gonna Give You Up

Description Details

Create definitions without defining styles

Hello World: Goodnight Moon

Detail Summary

Create definitions without defining styles

HTML and CSS Only...

No JavaScript required.

Shades and Colors

Simple CSS variable schema

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)