Minimal CSS framework
for semantic HTML

Link one stylesheet, and plain HTML looks clean and readable: headings, forms, tables, cards and modals are styled from their elements alone.

Get started Examples

<form>
  <input
    type="email"
    placeholder="Enter your email"
  >
</form>

More than an HTML reset

Readable defaults for every element, a few classes, and custom properties for the rest.

</>

Semantic HTML, few classes

femto styles your HTML elements directly. A few classes cover what HTML has no element for, such as .container and .grid for layout and .secondary, .contrast and .outline for button styles.

See the classes and attributes

Plain CSS

femto is plain CSS, with no Sass, no JavaScript and no build step to use or customize it. Link it from a CDN, download it, or install it from npm.

Get started

Responsive by default

The root font size steps up at 576, 768, 1024, 1280 and 1536px, so text and spacings grow with the screen. One option keeps the font size fixed, and another adds more spacing at each breakpoint.

Discover the responsive font sizes

Light and dark color schemes

femto has a light and a dark color scheme. It follows the visitor's system setting (prefers-color-scheme) without JavaScript, and data-theme chooses one for the whole page or for one element.

Learn about the color schemes

Customizable

Change femto with its --femto-* custom properties. Pick azure or one of 19 other theme colors, add any of 3 options, and load only the modules you need.

Learn about the CSS variables

One file to load

dist/femto.min.css holds all of femto in one minified file, so a page loads one stylesheet and no JavaScript. It uses only CSS that is Baseline Widely Available, apart from some vendor-only rules and a few documented exceptions.

See the files

Write less markup

The same form in femto and in a utility CSS framework: femto styles the elements, so the form needs no classes.

😌 femto

<form>
  <input type="text">
  <button type="submit">Action</button>
</form>

🥵 Utility CSS framework

<div class="container display-flex my-md mx-sm">
  <form class="form shadow-md my-md mx-sm align-center">
    <div class="input-wrapper border-radius-sm">
      <input type="text" class="input text-color-gray placeholder-color-light-gray focus-outline-blue">
    </div>
    <div class="button-wrapper border-radius-sm">
      <button type="submit" class="button bg-color-blue text-color-white focus-light-blue hover-light-blue">
        Action
      </button>
    </div>
  </form>
</div>

Minimal CSS framework for semantic HTML