functora-css

A classless, JS-free, dependency-free, configuration-free, mobile-first, responsive, lightweight, semantic, pure CSS framework with light and dark themes and a collapsible navbar.

This page is built entirely with semantic HTML elements and styled exclusively by functora-css - no extra styles, no JavaScript.

The framework source code is available on github.

The framework minified bundle is available at functora.github.io/css/functora.min.css.

Appearance

You can switch between light and dark themes using three mechanisms: system preference, HTML attribute, or checkbox.

1. Automatic

No additional markup is needed. The theme automatically matches the OS preference. 

<!doctype html>
<html lang="en">
  <head>
    <link href="functora.min.css" rel="stylesheet" />
  </head>
  <body>
    <h1>Automatic theme</h1>
  </body>
</html>

2. Attribute

Set functora-theme-dark on <html> to override system preference. Use this when the preference is stored server-side or in localStorage. 

<html functora-theme-dark>
  <!-- content -->
</html>

3. Checkbox

Place a hidden checkbox and a visible label anywhere on the page. No JavaScript, no storage needed. The label shows ☀️ or 🌙 automatically.

Inside the navbar - place the checkbox as the last child of <nav> and the label inside <ul> as a nav item: 

<nav>
  <label>
    <header>
      <a href="#">Site</a>
    </header>
    <ul>
      <li><a href="/">Home</a></li>
      <li><label for="functora-theme-dark">Theme</label></li>
    </ul>
  </label>
  <input type="checkbox" id="functora-theme-dark" />
</nav>

Standalone (no navbar) - place the checkbox and label anywhere in the document:

Add checked for dark by default:

<input type="checkbox" id="functora-theme-dark" checked />
<label btn for="functora-theme-dark">Theme</label>

Omit checked for light by default:

<input type="checkbox" id="functora-theme-dark" />
<label btn for="functora-theme-dark">Theme</label>

Buttons

Standard buttons

<button>Default</button>
<button primary>Primary</button>
<button round>Round</button>
<button disabled>Disabled</button>

Anchor as button

Link button Primary link 

<a btn href="#">Link button</a>
<a btn primary href="#">Primary link</a>

Submit button

<input type="submit" value="Submit" />

Buttons with icons

<button>
  <svg ...>...</svg>
  With icon
</button>
<button primary>
  <svg ...>...</svg>
  Save
</button>

Forms

Text inputs

<label for="demo-name">Name</label>
<input id="demo-name" type="text" placeholder="Your name" />

Textarea

<label for="demo-bio">Bio</label>
<textarea id="demo-bio" placeholder="Tell us about yourself"></textarea>

Select

<label for="demo-lang">Language</label>
<select id="demo-lang">
  <option>Rust</option>
  <option>TypeScript</option>
  <option>Python</option>
</select>

Radio and checkbox


<input type="radio" name="demo-radio" id="demo-r1" /><label for="demo-r1">Option A</label>
<input type="radio" name="demo-radio" id="demo-r2" checked /><label for="demo-r2">Option B</label>
<br />
<input type="checkbox" id="demo-c1" /><label for="demo-c1">Check me</label>
<input type="checkbox" id="demo-c2" checked /><label for="demo-c2">Already checked</label>

Fieldset

Preferences 

<fieldset>
  <legend>Preferences</legend>
  <input type="radio" name="demo-fieldset-radio" id="demo-fr1" /><label for="demo-fr1">Option A</label>
  <input type="radio" name="demo-fieldset-radio" id="demo-fr2" checked /><label for="demo-fr2">Option B</label>
  <br />
  <input type="checkbox" id="demo-fc1" /><label for="demo-fc1">Check me</label>
  <input type="checkbox" id="demo-fc2" checked /><label for="demo-fc2">Already checked</label>
  <p>
    <button type="submit" primary>Submit</button>
    <button type="reset">Reset</button>
  </p>
</fieldset>

Typography

Headings

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6
<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>

Paragraphs

Paragraph with an anchor link.

Another paragraph.

<p>Paragraph with an <a href="#">anchor link</a>.</p>
<p>Another paragraph.</p>

Anchor links

Default anchor 

<a href="#">Default anchor</a>

Emphasis and inline elements

bold italic highlighted small deleted abbr 

<strong>bold</strong>
<em>italic</em>
<mark>highlighted</mark>
<small>small</small>
<del>deleted</del>
<abbr title="abbreviation">abbr</abbr>

Horizontal rule

<hr />

Sections

<section>
  <h2>Section title</h2>
  <p>Section content goes here.</p>
</section>

Media

<img src="photo.jpg" alt="description" />
<video src="video.mp4" controls></video>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. 
<blockquote>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus
  urna sed urna ultricies ac tempor dui sagittis.
</blockquote>

With attribution

The best way to predict the future is to invent it.

- Alan Kay 
<blockquote>
  <p>The best way to predict the future is to invent it.</p>
  <cite>- Alan Kay</cite>
</blockquote>

Code

Inline code

The function returns a Result<String, Error> type. 

<p>The function returns a <code>Result<String, Error></code> type.</p>

Code block

fn main() {
    println!("hello from functora-css");
}
<pre><code>
fn main() {
    println!("hello from functora-css");
}
</code></pre>

Lists

Unordered list

<ul>
  <li>Unordered list item one</li>
  <li>Unordered list item two</li>
  <li>
    Unordered list item three
    <ul>
      <li>Nested item (circle)</li>
      <li>Nested item (circle)</li>
    </ul>
  </li>
</ul>

Ordered list

  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three
    1. Nested item (lower-alpha)
    2. Nested item (lower-alpha)
<ol>
  <li>Ordered list item one</li>
  <li>Ordered list item two</li>
  <li>
    Ordered list item three
    <ol>
      <li>Nested item (lower-alpha)</li>
      <li>Nested item (lower-alpha)</li>
    </ol>
  </li>
</ol>

Tables

Name Role Status
Alice Developer Active
Bob Designer Away
Carol Manager Active 
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Developer</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Designer</td>
      <td>Away</td>
    </tr>
    <tr>
      <td>Carol</td>
      <td>Manager</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

Tags

default primary 

<tag>default</tag>
<tag primary>primary</tag>

Tooltips

Basic tooltip

Hover me (tooltip) 

<span tt="Hello from functora-css">Hover me (tooltip)</span>

Tooltip on buttons

<button tt="This is a normal button">Hover button</button>
<button primary tt="Primary button tooltip">Primary</button>

Disabled button tooltip

<button disabled dtt="This button is disabled">
  Disabled with tooltip
</button>

Anchor link tooltip

Anchor tooltip 

<a att href="https://functora.github.io/functora-css.html">Anchor tooltip</a>

Cards

Card title

Content inside a <card> element with a subtle shadow.

Another card

Cards stack vertically and collapse to full-width on mobile.

demo functora-css 
<card>
  <h3>Card title</h3>
  <p>Content inside a <card> element with a subtle shadow.</p>
</card>
<card>
  <h3>Another card</h3>
  <p>Cards stack vertically and collapse to full-width on mobile.</p>
  <hr />
  <tag>demo</tag>
  <tag>functora-css</tag>
</card>

Utility

Bypass class exclusion

<p class="my-component" xx>
  <!-- styled by both functora-css and .my-component -->
</p>

Full width

<button full>Full width button</button>

Full width on mobile

<button m-full>Full on mobile</button>

Hide element

<p hidden>You cannot see this text.</p>

Font families

Serif font - serif

Sans-serif font - sans

Monospace font - mono

<p serif>Serif font - <code>serif</code></p>
<p sans>Sans-serif font - <code>sans</code></p>
<p mono>Monospace font - <code>mono</code></p>

Font sizes

Extra large - fs="xl"

Large - fs="l"

Medium - fs="m"

Small - fs="s"

Extra small - fs="xs"

<p fs="xl">Extra large - <code>fs="xl"</code></p>
<p fs="l">Large - <code>fs="l"</code></p>
<p fs="m">Medium - <code>fs="m"</code></p>
<p fs="s">Small - <code>fs="s"</code></p>
<p fs="xs">Extra small - <code>fs="xs"</code></p>

Padding top

Top padding 2rem - pt="2"

<p pt="2">Top padding 2rem - <code>pt="2"</code></p>

Padding bottom

Bottom padding 2rem - pb="2"

<p pb="2">Bottom padding 2rem - <code>pb="2"</code></p>

Padding all sides

All padding 2rem - pa="2"

<p pa="2">All padding 2rem - <code>pa="2"</code></p>

Text alignment

Left aligned - txt="l"

Center aligned - txt="c"

Right aligned - txt="r"

Justified - txt="j". Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

<p txt="l">Left aligned - <code>txt="l"</code></p>
<p txt="c">Center aligned - <code>txt="c"</code></p>
<p txt="r">Right aligned - <code>txt="r"</code></p>
<p txt="j">Justified - <code>txt="j"</code>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>