poc.css

How

The poc.css is a list of css styles that provide the base typography and html element styles for your project. Refer to the code on Github.

For most projects, you can just use the url in html.head:

<link rel="stylesheet" href="https://unpkg.com/poc.css" />

For ESM or other frameworks, you can also using import:

import 'poc.css'

Why

Whenever I create simple pages to research ideas or concepts, I get tired of spending a lot of time on front-end styles like setting up postcss, tailwind, or CSS in JS. In fact, a style that contains the basic html elements is enough, for which I created poc.css.

This is not meant to replace any solution, but to give scenarios like POCs, personal projects, and placeholder logic a fallback option that allows you to focus more on the thing itself, rather than add a lot of dependencies for the simple style.

The poc.css is Omakase. If you need more customization then you should consider using a larger solution rather than patching the styles.

Themes

The theme is set to light mode by default, you can switch to other styles by adding attributes to the html, when set to system, it will automatically follow the user's browser theme.

<html data-theme="dark" />
<html data-theme="light" />
<html data-theme="system" />

Examples

The following are all examples, with content sourced from MDN. You can find the HTML source file on example.html (no magic, just HTML).

List

Typically, ordered list items display with a preceding marker, such as a number or letter. The ol and ul elements may nest as deeply as desired, alternating between ol and ul however you like.

Steps in a recipe
Turn-by-turn directions
The list of ingredients in decreasing proportion on nutrition information labels

The ol HTML element represents an ordered list of items — typically rendered as a numbered list. To determine which list to use, try changing the order of the list items; if the meaning changes, use the ol element — otherwise you can use ul.

Mix flour, baking powder, sugar, and salt.
In another bowl, mix eggs, milk, and oil.
Stir both mixtures together.

Fill muffin tray 3/4 full.
Bake for 20 minutes.

Button

The button HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

Image

The figure HTML element represents self-contained content, potentially with an optional caption, which is specified using the figcaption element. The figure, its caption, and its contents are referenced as a single unit.

Content

The blockquote HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the cite element.

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.
-- HTML: HyperText Markup Language

The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary element. A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the summary element are used as the label for the disclosure widget.

Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.

System Requirements

Table

A table is a structured set of data made up of rows and columns (tabular data). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.

Stats on cloud services
Name	Hosted	Total	Billing	Admin
Fly	Yes	20	100$	Ana
Railway	Yes	18	20$	John
Heroku	No	0	80$	Witt

Form

As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your website—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.

Add maintainer

Please add at least one maintenance person to the system, email and initial password are required.