No need to import any npm module or pull down any <link>. Just copy and paste into a <style> element in your <head>! Now stop worrying about CSS frameworks, responsive design, bundle size, time to first paint, etc. and focus on coding your web app!

Source Code (unminified):

Explanation

* { max-width: 100%; }

This is to prevent images, figures, forms, and other elements from breaking out of the width of the page.

body { max-width: 50rem; }

body { margin: 2rem auto; }

body { font-size: 1.125rem; }

a { color: tan; }

This has to be changed because it defaults to a dark blue that cannot be read on a black background.

The colors that take the least amount of characters to produce in CSS are "red" and "tan", at 3 characters. I liked the look of tan better, so I chose tan for the links color. It shows nicely on the dark background.

pre { white-space: pre-wrap; overflow-wrap: break-word; } code { overflow-wrap: break-word; }

pre had to be modified so that you could read pre-formatted text that is wider than the viewport. The consensus seems to be to allow it to wrap, so I followed suit. You need both of these declarations for this to avoid expanding beyond the window.

input:not([type="checkbox"]):not([type="radio"]),
      select,
      textarea { display: block; }

So this is a more complicated one. I basically needed to make the text, date, button, and other inputs display as block so they wouldn't all be inline as this can make html forms into one long line that is rather hard to read. selects and textareas are not included in input so I just had to add them. However, we don't want checkboxes and radio buttons to push their tags under them as that looks odd, so we exclude them with the :not selector.

Demo

The following is an html test page by Chris Bracco so you can see how Bahu looks. Some elements might be a bit high contrast, like the form inputs, but some people might like the way they look idk :P.

Text

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Lorem Ipsum

to test line-height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at sem sit amet augue sollicitudin tempor nec id elit. Etiam condimentum dui eros, eu viverra ipsum ultricies a. Pellentesque facilisis malesuada tincidunt. Fusce lobortis sagittis augue, at mattis sapien bibendum eget. Ut ac purus suscipit, eleifend eros in, tincidunt enim. Cras massa massa, mattis vitae dui nec, commodo laoreet metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras ac ultrices dolor. Phasellus eget laoreet purus. Mauris ut augue non dui bibendum pharetra a eu enim. Aliquam blandit nunc quis ipsum tincidunt fermentum. Ut vel massa at est mollis venenatis nec eget diam.

Suspendisse eget aliquet sapien. Praesent sit amet nisi elit. Nulla convallis consequat mi, eget lacinia diam scelerisque a. Aliquam erat volutpat. Donec nec tempus ipsum. Aenean tellus nunc, tempus et ultrices semper, maximus eu libero. Curabitur vehicula iaculis turpis, eget vehicula nunc fermentum a. Phasellus laoreet vehicula libero nec dapibus. Nunc est ante, placerat at accumsan non, finibus euismod quam. Pellentesque sed tincidunt sapien. Donec enim sem, ornare ac libero ut, sollicitudin eleifend magna. Donec feugiat vel lorem eget molestie. Nunc porta mi in nisl viverra dignissim. Phasellus in mi in nunc blandit scelerisque. Sed quis ipsum at ipsum interdum tempor. Nunc id ultrices augue.

Nullam a nulla id ante dapibus pharetra aliquet ut massa. Nunc ut diam leo. Etiam quis pharetra nisi. Maecenas tempor odio risus, vitae semper nulla mollis id. Quisque nec leo justo. Duis sed lacus purus. Nulla sagittis nec diam vel ultrices. Integer scelerisque nibh nec ex mattis tincidunt. Integer rhoncus cursus ornare.

Quisque euismod pharetra aliquet. Aliquam quis elit lorem. Nunc vestibulum ligula sed faucibus vehicula. Phasellus a imperdiet diam. Proin egestas neque vitae turpis vehicula dignissim. Nam tincidunt, diam ac venenatis pulvinar, odio lacus accumsan ipsum, eu hendrerit elit tortor dignissim ex. Nullam ut eros id enim hendrerit tempus. Phasellus ut lacinia nisi, nec dignissim purus.

Vestibulum dapibus felis justo, gravida viverra mauris dapibus sit amet. Quisque mattis pellentesque ipsum, suscipit volutpat sem efficitur ut. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id dapibus nisl. Pellentesque et tellus aliquet purus ultrices malesuada sit amet vitae magna. Suspendisse ipsum neque, condimentum et hendrerit eget, varius vitae ex. Sed iaculis lacus turpis, eu placerat eros rhoncus id. Curabitur nulla urna, ornare quis egestas at, facilisis ac magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer non neque et eros faucibus hendrerit at in eros. Praesent posuere enim eget bibendum blandit. Ut ipsum nunc, rhoncus vel massa in, pretium consectetur magna. Praesent et erat et nisl vulputate bibendum. Integer egestas turpis a feugiat dapibus.

Blockquotes

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
Said no one, ever.

Lists

Definition list

Definition List Title: This is a definition list division.

Ordered List

List Item 1
List Item 2
List Item 3

Unordered List

List Item 1
List Item 2
List Item 3

Horizontal rules

Tabular data

Table Caption
Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

Code

Keyboard input: Cmd

Inline code: <div>code</div>

Sample output: This is sample output from a computer program.

Pre-formatted text

P R E F O R M A T T E D T E X T
  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~

Inline elements

This is a text link.

Strong is used to indicate strong importance.

This text has added emphasis.

The b element is stylistically different text from normal text, without any special importance.

The i element is text that is offset from the normal text.

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.

~~This text is deleted~~ and This text is inserted.

~~This text has a strikethrough~~.

Superscript^®.

Subscript for things like H₂O.

This small text is small for for fine print, etc.

Abbreviation: HTML

This text is a short inline quotation.

This is a citation.

The dfn element indicates a definition.

The mark element indicates a highlight.

The variable element, such as x = y.

The time element: 2 weeks ago

HTML Comments

There is comment here:

There is a comment spanning multiple tags and lines below here.

Embedded content

Images

No `<figure>` element

Image alt text

Wrapped in a `<figure>` element, no `<figcaption>`

Wrapped in a `<figure>` element, with a `<figcaption>`

Audio

Video

Canvas

Meter

2 out of 10

Progress

progress

Inline SVG

IFrame

Form elements

Input fields

Text Input

Password

Web Address

Email Address

Phone Number

Number Input

Error

Valid

[Top]

Select menus

Select

[Top]

Checkboxes

Choice A
Choice B
Choice C

[Top]

Radio buttons

Option 1
Option 2
Option 3

[Top]

Textareas

Textarea

[Top]

HTML5 inputs

Color input

Number input

Range input

Date input

Month input

Week input

Datetime input

Datetime-local input

[Top]

Action buttons

[Top]

Source Code (minified):

Source Code (unminified):

Explanation

* { max-width: 100%; }

body { max-width: 50rem; }

body { margin: 2rem auto; }

body { font-size: 1.125rem; }

a { color: tan; }

pre { white-space: pre-wrap; overflow-wrap: break-word; } code { overflow-wrap: break-word; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea { display: block; }

Demo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem Ipsum

Definition list

Ordered List

Unordered List

Pre-formatted text

No <figure> element

Wrapped in a <figure> element, no <figcaption>

Wrapped in a <figure> element, with a <figcaption>

`* { max-width: 100%; }`

`body { max-width: 50rem; }`

`body { margin: 2rem auto; }`

`body { font-size: 1.125rem; }`

`a { color: tan; }`

`pre { white-space: pre-wrap; overflow-wrap: break-word; } code { overflow-wrap: break-word; }`

`input:not([type="checkbox"]):not([type="radio"]), select, textarea { display: block; }`

No `<figure>` element

Wrapped in a `<figure>` element, no `<figcaption>`

Wrapped in a `<figure>` element, with a `<figcaption>`