minimaxCSS

minimal css effort with maximum layout outcome

Start using minimaxcss with:

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

Now writing simple html has a nice default layout:

<main>
  <article>
    <h1>Use html syntax to style your document</h1>
    <p>Simple to write and living the spirit of the semantic web</p>
    <section>
      <p>Use <code>section</code>-tags to structure content.</p>
    </section>
  </article>
</main>

Examples

• Convert any markdown to html for testing
• Misc
• Text
• Large Tables
• Article
• Book
• Picture book
• Monospace
• Forms
• E. Tufte Theme

Editor

Try out the browser based editor. You can import, edit and export html documents. The minimax-stylesheets can be switched on and off.

More granular use cases

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

Additional Layout Features

Use serif-font (Times New Roman):

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

Use a DIN-A4-like human-readable-layout for screen and print:

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

Use alternate free modern fonts (uses Inter instead of Arial, Lora instead of Times New Roman, Fira Code for monospace fonts – with ligatures enabled – except for <code>):

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

Use monospace as font as default document-wide:

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

Printer-friendly forms:

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

Little js magic for smoother UX

• adds autoheight to details and textarea
• adds image lazyloading

<script src="https://cdn.jsdelivr.net/npm/minimaxcss@latest/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)
• <aside><picture/></aside>, <aside><figure/></aside> and <aside class="left"><picture/></aside> (float images inside sections)
• p.initial-letter (fancy first letter)
• .no-smooth-scroll (opt-out of smooth-scrolling-behaviour)
• table.sticky-headings (forces sticky first row and first column)
• button.call-to-action (use --accent-color and --accent-text-color to set your preferred colors)
• .h1, .h2 etc. (simulate headings without using the actual heading elements)

Goals

• zero css/js dependencies, no additional external resources are required
• using pure css
• 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
• 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