Skip to content

Super­Minimal­CSS

About

Super­Minimal­CSS is pure black & white CSS awesomeness with nice typography (for both English and Chinese). Less is more is the main principle of this mini design system.

Super­Minimal­CSS’s design guidelines.
Colors
Classes
Gradients
Animations
Breakpoints
Custom fonts
Auto dark mode
Hover & focus styles
Auto high contrast mode
Fluid typography & spacing
Under 15KB minified file size
Browser zoom & font-size compatibility

⚠ Fair warning: this pen is constantly being updated and using logical CSS that might not have good browser support.


Foundations

The system is built on a small set of design tokens.

Color (or lack thereof)
Token Light Mode Value Dark Mode Value Description
--color-text #202020 #f0f0f0 The page text color.
--color-bg #f4f4f4 #090909 The page background color.

Everything is black and white. Actually, off-black and off-white because the strong contrast of true black and white will hurt your eyes. You are welcome.

There are only 2 tokens: page text color and page background color. The two colors are basically the opposite of each other, which means high contrast. Each element is colored with considerations to that relationship.

Spacing
Token Value Description
--gutter Scale from 1ch to 3ch The inline spacing base and the grid gutter.
--stack Scale from 1.25ex to 1.75ex The block spacing base and the default paragraph spacing.
--line-length 70ch The optimal line length for reading.
--page-padding-inline Scale from 10vw to whatever is available after subtracting the optimal line length of 70ch from 100% viewpoint width The inline inset spacing of a single-column page layout.

Spacing is fluid. It scales with viewport and character width horizontally; it scales with viewport and x-height vertically. This approach allows any System UI font to have unique spacing.

There is no range of spacing tokens, only the base ones. For each use case, spacing is calculated using the base tokens.

Typography
Token Value Description
--font System UI Sans The sans-serif font for heading and body text.
--font-italic Georgia The classic font is used solely for blockquotes and italic text (because italic sans-serif is ugly).
--font-code System UI Monospace The monospace font for code text.
--font-size 100% The root font-size of a page.

System UI fonts are applied to optimize performance and the heading hierarchy is defined by the browser defaults.

The root font-size is fluid, which allows all text to scale with viewport.


Elements

Some of the most used html elements designed in black & white.

Inline Text

There are various ways to style text: emphasis (italic), strong emphasis (bold), link, abbr, code, key, superscript, subscript, small, and quote.

Details and Summary

You are looking at it. This is the details and you just clicked summary to expand it.

Blockquote

Simplicity is the ultimate sophistication.

— Leonardo da Vinci
Code Block
// This is a block of code.
pre { display: block; }
Description List
Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
Un-ordered List
Ordered List
  1. This is a list item.
  2. This is 1st level.
    1. This is 2nd level.
      1. This is 3rd level.
      2. This is 3rd level.
    2. This is 2nd level.
  3. This is a list item.
Figure
Placeholder
Fig 1: This figure has an image and figcaption.
Table
Table caption.
Top Heading Top Heading Top Heading Top Heading Top Heading Top Heading
Side Heading Cell Cell Cell Cell Cell Cell
Side Heading Cell Cell Cell Cell Cell Cell
Footer Side Heading Footer cell Footer cell Footer cell Footer cell Footer cell Footer cell
Form Elements
This is a fieldset
  1. ⚠ Error: please enter a valid email.
  2. ⚠ Error: please enter a valid email.
  3. ↑ Note: plain text and HTML are allowed.

This is another fieldset
This is yet another fieldset

Headings

This is H2

This is H3

This is H4

This is H5
This is H6
Skip link

Hard refresh the page and hit the tab key. Skip link must be the first child of the <body> element.


Add-ons

The add-ons contain the most common layouts. Data attributes are required for styling.

You may say, Isn’t this cheating? Using attributes for styling is not so different than using classes. Well, yes. That’s why I call these add-ons. They are optional.

Flag
Placeholder

Flag: image on the left and text on the right

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae cupiditate, praesentium ducimus necessitatibus tenetur molestias est fuga consequuntur maiores.

Grid
Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder
Page layout

The current page is a single column page layout with header and footer. Header and footer are pushed against the top and bottom of the page respectively, regardless of how tall the main content is. Page content has a max width of 75 characters, which is the optimal line length.


Article Demo: Everything All Together Now

The following displays a bunch of placeholder texts and images.

For decades, South Florida1 schoolchildren and adults fascinated by far-off galaxies, earthly ecosystems, the properties of light and sound and other wonders of science had only a quaint, antiquated museum here in which to explore their interests. Now, with the long-delayed opening of a vast new science museum downtown set for Monday, visitors will be able to stand underneath a suspended, 500,000-gallon aquarium tank and gaze at hammerhead and tiger sharks, mahi mahi, devil rays and other creatures through a 60,000-pound oculus, a lens that will give the impression of seeing the fisha from the bottom of a huge cocktail glass.

Placeholder
Fig 1: The recording starts with the patter of a summer squall.

Swimming hundreds of feet beneath the ocean’s surface in many parts of the world are prolific architects called giant larvaceans. These zooplankton are not particularly giant themselves (they resemble tadpoles and are about the size of a pinkie finger), but every day, they construct one or more spacious houses that can exceed three feet in length. The houses are transparent mucus structures that encase the creatures inside. Giant larvaceans beat their tails to pump seawater through these structures, which filter tiny bits of dead or drifting organic matter for the animals to eat. When their filters get clogged, the larvaceans abandon ship and construct a new house. Laden with debris from the water column, old houses rapidly sink to the seafloor.

In Science Advances on Wednesday

Scientists near California’s Monterey Bay have found that, through this process, giant larvaceans can filter all of the bay’s water from about 300 to 1,000 feet deep in less than two weeks, making them the fastest known zooplankton filter feeders. In doing so, the creatures help transfer carbon that has been removed from the atmosphere by photosynthesizing organisms to the deep sea, where it can be buried and stored long term. And given their abundance in other parts of the world, these organisms likely play a crucial role in the global carbon cycle. When it comes to the flow of carbon in the ocean, we don’t know nearly as much as we should,” said Kakani Katija, a principal engineer at the Monterey Bay Aquarium Research Institute and the study’s lead author. If we really want to understand how the system works, we have to look at all the players involved. Giant larvaceans are one important group we need to learn more about.” enter

My favorite book is The Elements of Typographic Style.

— Mike Mai

In The Past

Other scientists have tried studying giant larvaceans in the laboratory. But these efforts always failed because the animals’ houses were too fragile to be harvested and collected specimens were never able to build houses outside the ocean. To study the zooplankton in their natural habitat, Dr. Katija and her collaborators developed a new deep-sea imaging instrument, called DeepPIV, which they paired with a remotely operated vehicle. DeepPIV projects a sheet of laser light that cuts straight through a larvacean’s mucus house.

.ranger--texas { color: chucknorris; }

The recording starts with the patter of a summer squall. Later, a drifting tone like that of a not-quite-tuned-in radio station rises and for a while drowns out the patter. These are the sounds encountered by NASA’s Cassini spacecraft as it dove through the gap between Saturn and its innermost ring on April 26, the first of 22 such encounters before it will plunge into Saturn’s atmosphere in September.

What Cassini Did Not Detect

Were many of the collisions of dust particles hitting the spacecraft as it passed through the plane of the rings. You can hear a couple of clicks,” said William S. Kurth, a research scientist at the University of Iowa who is the principal investigator for Cassini’s radio and plasma science instrument. The few dust hits that were recorded sounded like the small pops caused by dust on a LP record, he said. What he had expected was something more like the din of driving through Iowa in a hailstorm,” Dr. Kurth said. Since Cassini had not passed through this region before, scientists and engineers did not know for certain what it would encounter. Cassini would be traveling at more than 70,000 miles per hour as it passed within 2,000 miles of the cloud tops, and a chance hit with a sand grain could be trouble. The analysis indicated that the chances of such a collision were slim, but still risky enough that mission managers did not send Cassini here until the mission’s final months. As a better-safe-than-sorry precaution, the spacecraft was pointed with its big radio dish facing forward, like a shield. Not only was there nothing catastrophic, there was hardly anything at all. The few clicking sounds were generated by dust the size of cigarette smoke particles about a micron, or one-25,000th of an inch, in diameter. To be clear: Cassini did not actually hear any sounds.

Placeholder
Fig 2
Placeholder
Fig 3
Placeholder
Fig 4
  1. It is, after all, flying
  2. through space where there is no air
  3. and thus no vibrating air molecules to convey sound waves.

But space is full of radio waves, recorded by Dr. Kurth’s instrument, and those waves, just like the ones bouncing through the Earth’s atmosphere to broadcast the songs of Bruno Mars, Beyoncé and Taylor Swift, can be converted into audible sounds. Dr. Kurth said the background patter was likely oscillations of charged particles in the upper part of Saturn’s ionosphere where atoms are broken apart by solar and cosmic radiation. The louder tones were almost certainly whistler mode emissions” when the charged particles oscillate in unison.

Sifting Through Teaspoons of Clay

And sand scraped from the floors of caves, German researchers have managed to isolate ancient human DNA — without turning up a single bone. Their new technique, described in a study published on Thursday in the journal Science, promises to open new avenues of research into human prehistory and was met with excitement by geneticists and archaeologists. It’s a bit like discovering that you can extract gold dust from the air,” said Adam Siepel, a population geneticist at Cold Spring Harbor Laboratory.An absolutely amazing and exciting paper,” added David Reich, a genetics professor at Harvard who focuses on ancient DNA. Until recently, the only way to study the genes of ancient humans like the Neanderthals and their cousins, the Denisovans, was to recover DNA from fossil bones. But they are scarce and hard to find, which has greatly limited research into where early humans lived and how widely they ranged. The only Denisovan bones and teeth that scientists have, for example, come from a single cave in Siberia.

Fig 5: Available players.
Name Gender Age
Player 1 Mike Mai Male 25
Player 2 Angi Cheung Female 25

Looking for These Genetic Signposts

In sediment has become possible only in the last few years, with recent developments in technology, including rapid sequencing of DNA. Although DNA sticks to minerals and decayed plants in soil, scientists did not know whether it would ever be possible to fish out gene fragments that were tens of thousands of years old and buried deep among other genetic debris. Bits of genes from ancient humans make up just a minute fraction of the DNA floating around in the natural world. But the German scientists, led by Matthias Meyer at the Max Planck Institute for Developmental Biology in Tübingen, have spent years developing methods to find DNA even where it seemed impossibly scarce and degraded. There’s been a real revolution in technology invented by this lab,” Dr. Reich said. Matthias is kind of a wizard in pushing the envelope.” Scientists began by retrieving DNA from ancient bones: first Neanderthals, then Denisovans. To identify the Denisovans, Svante Paabo, a geneticist at the Planck Institute and a co-author of the new paper, had only a child’s pinkie bone to work with. His group surprised the world in 2010 by reporting that it had extracted DNA from the bone, finding that it belonged to a group of humans distinct from both Neanderthals and modern humans. But that sort of analysis is limited by the availability of fossil bones. In a lot of cases, you can get bones, but not enough,” said Hendrik Poinar, an evolutionary geneticist at McMaster University.

If you just have one small piece of bone from one site, curators do not want you to grind it up.

蓋聞天地之數,有十二萬九千六百歲為一元。將一元分為十二會,乃子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥之十二支也。每會該一萬八百歲。且就一日而論:子時得陽氣,而丑則雞鳴;寅不通光,而卯則日出;辰時食後,而巳則挨排;日午天中,而未則西蹉;申時晡,而日落酉,戌黃昏,而入定亥。譬於大數,若到戌會之終,則天地昏曚而萬物否矣。再去五千四百歲,交亥會之初,則當黑暗,而兩間人物俱無矣,故曰混沌。又五千四百歲,亥會將終,貞下起元,近子之會,而復逐漸開明。邵康節曰:冬至子之半,天心無改移。一陽初動處,萬物未生時。到此,天始有根。再五千四百歲,正當子會,輕清上騰,有日,有月,有星,有辰。日、月、星、辰,謂之四象。故曰,天開於子。又經五千四百歲,子會將終,近丑之會,而逐漸堅實。《易》曰:大哉乾元!至哉坤元!萬物資生,乃順承天。至此,地始凝結。再五千四百歲,正當丑會,重濁下凝,有水,有火,有山,有石,有土。水、火、山、石、土,謂之五形。故曰,地闢於丑。又經五千四百歲,丑會終而寅會之初,發生萬物。曆曰:天氣下降,地氣上升;天地交合,群物皆生。至此,天清地爽,陰陽交合。再五千四百歲,正當寅會,生人,生獸,生禽,正謂天地人,三才定位。故曰,人生於寅。

感盤古開闢,三皇治世,五帝定倫,世界之間,遂分為四大部洲:曰東勝神洲,曰西牛賀洲,曰南贍部洲,曰北俱蘆洲。這部書單表東勝神洲。海外有一國土,名曰傲來國。國近大海,海中有一座名山,喚為花果山。此山乃十洲之祖脈,三島之來龍,自開清濁而立,鴻濛判後而成。真個好山!有詞賦為證。賦曰:

勢鎮汪洋,威寧瑤海。勢鎮汪洋,潮湧銀山魚入穴;威寧瑤海,波翻雪浪蜃離淵。水火方隅高積上,東海之處聳崇巔。丹崖怪石,削壁奇峰。丹崖上,彩鳳雙鳴;削壁前,麒麟獨臥。峰頭時聽錦雞鳴,石窟每觀龍出入。林中有壽鹿仙狐,樹上有靈禽玄鶴。瑤草奇花不謝,青松翠柏長春。仙桃常結果,修竹每留雲。一條澗壑籐蘿密,四面原堤草色新。正是百川會處擎天柱,萬劫無移大地根。

那座山正當頂上,有一塊仙石。其石有三丈六尺五寸高,有二丈四尺圍圓。三丈六尺五寸高,按周天三百六十五度;二丈四尺圍圓,按政曆二十四氣。上有九竅八孔,按九宮八卦。四面更無樹木遮陰,左右倒有芝蘭相襯。蓋自開闢以來,每受天真地秀,日精月華,感之既久,遂有靈通之意。內育仙胞,一日迸裂,產一石卵,似圓毬樣大。因見風,化作一個石猴,五官俱備,四肢皆全。便就學爬學走,拜了四方。目運兩道金光,射沖斗府。驚動高天上聖大慈仁者玉皇大天尊玄穹高上帝,駕座金闕雲宮靈霄寶殿,聚集仙卿,見有金光燄燄,即命千里眼、順風耳開南天門觀看。二將果奉旨出門外,看的真,聽的明。須臾回報道:臣奉旨觀聽金光之處,乃東勝神洲海東傲來小國之界,有一座花果山,山上有一仙石,石產一卵,見風化一石猴,在那裡拜四方,眼運金光,射沖斗府。如今服餌水食,金光將潛息矣。玉帝垂賜恩慈曰:下方之物,乃天地精華所生,不足為異。