Fossil Forum

Classless stylesheets for fossil skins
Login

Classless stylesheets for fossil skins

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:

  1. Almond CSS
  2. Bamboo CSS
  3. Basic CSS
  4. Bonsai CSS
  5. Bullframe CSS
  6. Centurion CSS
  7. Chota CSS
  8. Cirrus CSS
  9. Classless CSS
  10. CImaterial CSS
  11. Codify CSS
  12. Comet CSS
  13. Concise CSS
  14. Concrete CSS
  15. Flat-ui CSS
  16. Fluidity CSS
  17. Github-markdown CSS
  18. Gutenberg CSS
  19. Hack CSS
  20. Hello CSS
  21. Hiq CSS
  22. Holiday CSS
  23. Html-starterkit CSS
  24. Hyp CSS
  25. Kathamo CSS
  26. Koochak CSS
  27. Kraken CSS
  28. Kube CSS
  29. Latex CSS
  30. Lemon CSS
  31. Lit CSS
  32. Lotus CSS
  33. Marx CSS
  34. Material CSS
  35. Mercury CSS
  36. Milligram CSS
  37. Min CSS
  38. Minimal CSS
  39. Minimal-stylesheet CSS
  40. Mobi CSS
  41. Mu CSS
  42. Mui CSS
  43. Neat CSS
  44. New CSS
  45. No-class CSS
  46. Normalize CSS
  47. Oh-my-css CSS
  48. Ok CSS
  49. Pandoc-scholar CSS
  50. Paper CSS
  51. Papier CSS
  52. Pavilion CSS
  53. Picnic CSS
  54. Pico CSS
  55. Preface CSS
  56. Primer CSS
  57. Propeller CSS
  58. Pure CSS
  59. Roble CSS
  60. Sakura CSS
  61. Sanitize CSS
  62. Scooter CSS
  63. Semantic-ui CSS
  64. Shoelace CSS
  65. Siimple CSS
  66. Simple CSS
  67. Skeleton CSS
  68. Skeleton-framework CSS
  69. Skeleton-plus CSS
  70. Snack CSS
  71. Spcss CSS
  72. Spectre CSS
  73. Style CSS
  74. Stylize CSS
  75. Tachyons CSS
  76. Tent CSS
  77. Thao CSS
  78. Tui CSS
  79. Vanilla CSS
  80. Water CSS
  81. Writ CSS
  82. Yamb CSS
  83. Yorha CSS
  84. Ads-notebook CSS
  85. Ads-tufte CSS
  86. all Attri-* CSS
  87. all Awsm-* CSS
  88. all Boot-* CSS
  89. most Md-* CSS
  90. 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.