Ssstyles › Base

# Base Styles

Source

You can opt to use only the base package. This one uses only HTML tags as selectors and is meant to work with any website with clean HTML right out of the box. It applies some styles to native elements, adds a basic layout and color theming.

It weighs in at 2.6kB gzipped, which makes it neither the lightest, nor the most feature-complete, but I think I struck a nice balance.

Include this snippet in your <head> to use it:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ssstyles/dist/base.css">

Or use this bookmarklet to make a site use this stylesheet: Ssstylize

Here are some included elements:

# Content

A paragraph of text with some links.

And another one. This is an abbr. This text is marked. I can do bold, italic and underlined. There is also deleted and inserted. And don't forget about subscript and superscript.

  1. Toast
  2. Bacon
  3. Pineapple
  4. Cheese

Here is an <hr>:

A blockquote to feature something smart:
Good design involves as little design as possible.

# Images

This is just a placeholder image with no meaningful content
It's an image! Source

# Forms






some input fields







# Tables

Wrap a table in a <figure> to make it scrollable on small screens.
Name Strength Weakness Notes
Paper vs Stone vs Scissor fun to draw on
Scissor vs Paper vs Stone ouchy when careless
Stone vs Scissor vs Paper never disappoints

Also, definition lists:

Coffee
Black hot drink
Sometimes with milk
And even sugar
Milk
White cold drink
Comes after the cornflakes
Tea
Without milk and sugar, please

# Interactive

This is a summary Oh, gosh, you clicked on it. Uhm, this is a bit embarrassing, but I didn't really prepare anything funny to show here.
Sorry.

This is a sample dialog

Boo, I'm a jump scare!

Finally, some status displays:
Meter:
Progress: 70%

# Code

() => {
    console.log("hi");
}

This will do Some stuff, curiously.

Alt + F4

# Headlines

Some headlines

Some headlines

Some headlines

Some headlines

Some headlines
Some headlines