fox-css

about fox-css

use fox-css to style your semantic html. no need to memorize class names. light and dark

navigation


flex

add .flex to split the content into segments. number of segments equal to number of children of .flex. If the width is 700px or less, flex-direction becomes column.

flex example 1

left

alfa

right

bravo

flex example 2

fox waiting patiently
fox walking through snow
fox laying in snow
fox turning around
fox turning around

asides

create an aside tag (in a <article> or <section> tag)

aside example 1

using asides

any aside element with a parent article or parent section will be floated right. it will have a width of 35% of its parent container. you can use asides however you want. place figures, images or text in them or whatever. just do not nest asides

aside example 2

text formatting

use inline quotation tags to insert brief quotes

the small element is small

using the mark element to highlight words for reference or notational purposes. press the space key to move down

code snippets like this new Promise(r => setTimeout(r, 500)) also work

mdn is an abbreviation

sample or quoted output from a computer program
Keyboard not found
Press F1 to continue

the chemistry molecule C8H10N4O2 is caffeine

The pythagorean theorem is often expressed as

a2 + b2 = c2


links

with familiar, but distinct colors

fox-css firefox mdn example