minimaxCSS

Minimal CSS defaults with maximum effect

Demos

• Misc
• Article
• Book I
• Book II
• Forms
• Convert markdown to html for testing
• List of examples

Usage

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/minimaxcss/minimax.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/minimaxcss/minimax-serif.css" />

<script src="https://cdn.jsdelivr.net/npm/minimaxcss/minimax.mjs" type="module"></script>

Reasonable amount of css-classes for optional visual features

• .invisible (equal to visibility: hidden), .dont-display, .dont-screen (don't show on screen) and .dont-print (don't show on print)
• hr.ornament (fancy hr with dotted border and ornament)
• picture.float, picture.float.left (float images inside sections)
• p.initial-letter (fancy first letter)
• .no-smooth-scroll (opt-out of smooth-scrolling-behaviour)

Goals

• use default html components instead of class-overloaded div-elements:
  • e.g.: use hr instead of <div class="separator-line"></div>, <details>…≤/details> instead of <div class="accordion">…≤/div> etc…
• customize specific layout via css variables
• use <section> for structuring content and forms
• enables lazy-loading on images
• responsive – whenever it makes sense (mobile, desktop, dark-mode, print …)
• works on Chrome/Edge, Safari and Firefox

Forms

Use a <section> directly nested in form to enable form layout:

<form>
  <section>
    <section>
      <label for="name">Your name:</label>
      <input type="text" />
    <section>
    <footer>
      <button role="submit">Sign up</button>
    </footer>
  </section>
</form>

Autoheight

Let auto adjust the height on the following elements (js file needs to be included for that):

Details

<details autoheight>
  <summary>Details</summary>
  <section>…</section>
</details>

Textarea

<textarea autoheight>…</textarea>

<hr>

Use <hr> to add page breaks for printing

Add two <hr> elements after each other:

<hr>
<hr>

Only one separator-line will be seen on screen. No separator-line will be visible on the printing layout.

<hr> in ornament style

<hr class="ornament">

Use your own:

<hr data-ornament="⚛">

Serif font style for traditional book-like-layout

Add <link rel="stylesheet" href="minimax-serif.css" />.

You can now enjoy a fancy separator-line with an ornament:

First-Letter

<p class="first-letter">The first letter `T` will be placed prominently of three lines.</p>

Modify important CSS-variables for your needs

--accent-color: …;
--accent-text-color: …;
--active-color: …;

License

See License