Classless stylesheets for fossil skins
(1) By anonymous on 2022-03-28 05:22:38 [source]
All of this information is placed into the public domain and/or released under an MIT licence.
Thank you to drh and the fossil team for providing the excellent fossil software.
Fossil and classless style-sheets.
Classless style-sheets
"Classless" style-sheets improve the appearance of plain HTML rendered in a desktop or mobile browser, usually in an opinionated way, so long as the HTML document is written in "semantic" HTML. Classless style-sheets can produce beautiful, modern, readable styling. What classless style-sheets do not provide is grids for layout, although these can be imported as needed. For example it would be possible to append the grid part of "pure.css" to the style-sheet if you needed grids or responsive grids.
Semantic HTML uses specific rather than generic HTML elements to structure the document according to purpose. So the <body> should be divided into a <header> element, a <main> element and a <footer> element.
In the <header> element, an <h1> element and a <p> element may be used for the heading and subheading respectively. Also a <nav> (navigation) element should be used to contain the <a> "menu" elements in the header. <div> and <span> elements are not particularly semantic because they are generic block and inline containers respectively. Therefore more specific semantic HTML elements should be preferred where possible over <div> and <span> elements when using a classless style-sheet. (<div> and <span> elements are usually used extensively in HTML used with style-sheets based on classes).
A university professor has created a webpage that lets users try out about 148 different (MIT licenced) classless style-sheets. Some of the style-sheets are available on github.
Another classless style-sheet called "simple.css" automatically converts to dark theme if the browser is in dark mode. It works nicely with fossil.
Fossil skins
Classless style-sheets tend to play very nicely with the Fossil skin mechanism because of the clever design of the Fossil CSS generation process. In fact, simple standard "header.txt" and "footer.txt" files are likely to be all that is necessary to adapt to a large range of these classless style-sheets. The following information was adapted from the "default" fossil skin.
header.txt
<header>
<h1>$<project_name></h1>
<p>$<title></p>
<nav>
<th1>
foreach {name url expr class} $mainmenu {
if {![capexpr $expr]} continue
if {[string match /* $url]} {
html "<a href='$home$url'>$name</a>\n"
} else {
html "<a href='$url'>$name</a>\n"
}
}
if {[info exists login]} {
html "<a href='$home/login'>$login</a>\n"
} else {
html "<a href='$home/login'>Login</a>\n"
}
</th1>
</nav>
</header>
<main>
You will note that the hamburger menu and associated javascript function is not present. Some people prefer to avoid javascript, and some prefer to avoid hamburger menus. You could add it, but you may have to consider surrounding it with something other than a <div> with a class, to get it styled well with a classless style-sheet, or alternatively add a class-based <div> selector/action to the classless style-sheet.
footer.txt
</main>
<footer>
This page was generated in about
<th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s
by Fossil $release_version $manifest_version $manifest_date
</footer>
details.txt
Use the standard "details.txt" file.
timeline-arrowheads: 1
timeline-circle-nodes: 1
timeline-color-graph-lines: 1
white-foreground: 0
css.txt
Add the chosen classless CSS file and rename to "css.txt".
Some classless style-sheets which do work with fossil
- Simple CSS (although the <main> section could be tweaked to be a bit wider on the desktop in simple.css)
- Bamboo CSS
The nice thing about Simple CSS is that it makes <a> links in the <nav> element "buttony", which looks good in the fossil menu.
Some classless style-sheets which may work with fossil
I have not tested these with fossil, but they look good on Brave (mobile) and Firefox (desktop). Of these, the only one with "buttony" <a> links is Simple CSS.
Normalize.css which is about 275 SLOC can always be prepended to see if it will help them to work across browsers better instead of using a reset if problems are found:
- Almond CSS
- Bamboo CSS
- Basic CSS
- Bonsai CSS
- Bullframe CSS
- Centurion CSS
- Chota CSS
- Cirrus CSS
- Classless CSS
- CImaterial CSS
- Codify CSS
- Comet CSS
- Concise CSS
- Concrete CSS
- Flat-ui CSS
- Fluidity CSS
- Github-markdown CSS
- Gutenberg CSS
- Hack CSS
- Hello CSS
- Hiq CSS
- Holiday CSS
- Html-starterkit CSS
- Hyp CSS
- Kathamo CSS
- Koochak CSS
- Kraken CSS
- Kube CSS
- Latex CSS
- Lemon CSS
- Lit CSS
- Lotus CSS
- Marx CSS
- Material CSS
- Mercury CSS
- Milligram CSS
- Min CSS
- Minimal CSS
- Minimal-stylesheet CSS
- Mobi CSS
- Mu CSS
- Mui CSS
- Neat CSS
- New CSS
- No-class CSS
- Normalize CSS
- Oh-my-css CSS
- Ok CSS
- Pandoc-scholar CSS
- Paper CSS
- Papier CSS
- Pavilion CSS
- Picnic CSS
- Pico CSS
- Preface CSS
- Primer CSS
- Propeller CSS
- Pure CSS
- Roble CSS
- Sakura CSS
- Sanitize CSS
- Scooter CSS
- Semantic-ui CSS
- Shoelace CSS
- Siimple CSS
- Simple CSS
- Skeleton CSS
- Skeleton-framework CSS
- Skeleton-plus CSS
- Snack CSS
- Spcss CSS
- Spectre CSS
- Style CSS
- Stylize CSS
- Tachyons CSS
- Tent CSS
- Thao CSS
- Tui CSS
- Vanilla CSS
- Water CSS
- Writ CSS
- Yamb CSS
- Yorha CSS
- Ads-notebook CSS
- Ads-tufte CSS
- all Attri-* CSS
- all Awsm-* CSS
- all Boot-* CSS
- most Md-* CSS
- all W3c-* CSS
(2) By Stephan Beal (stephan) on 2022-04-07 15:48:53 in reply to 1 [link] [source]
Fossil and classless style-sheets.
FWIW, even if we don't end up applying any of this directly in fossil, this post was very interesting for me personally and i'll take it to heart the next time i create a new page. My tendency has historically been to liberally apply long, descriptive CSS class names to All of It and let the CSS sort it out, but the approach you describe makes a lot of sense.