Skip to main content

Getting started

Get started with felt-css

felt-css is Bootstrap 5.3's class names and markup with a switchable wool-felt look. Link one stylesheet, add one attribute, and every card is cut from felt.

View page source on GitHub
On this page

Quick start#

Get started by including felt.css in a plain HTML page. There is no build step and nothing to install.

  1. Copy the files. Put felt.css and the img/ folder next to each other in your project. The stylesheet loads its felt photos and stitch images from img/ relative to itself.

  2. Create a new index.html with the HTML5 doctype and the responsive viewport meta tag.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>felt-css demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  3. Link the stylesheet and pick a look. Add data-look="felt" to <html> for felt; leave it out for the clean look. Include Bootstrap's JavaScript bundle before </body> if you use interactive components.

    <!doctype html>
<html lang="en" data-look="felt">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>felt-css demo</title>
    <link rel="stylesheet" href="felt.css">
  </head>
  <body>
    <div class="container py-4">
      <h1>Hello, world!</h1>
      <button type="button" class="btn btn-primary">Sewn on by hand</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  </body>
</html>

  4. Hello, world! Open the page in your browser. From here on, use Bootstrap's grid, components and utilities exactly as you know them.

Straight from GitHub#

If you don't want to copy files, jsDelivr serves the repository as is, images included. Pin a commit hash instead of main so the felt doesn't change under your feet.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/shostakovich/felt-css@main/felt.css">

What's in the box#

felt-css covers most of Bootstrap 5.3, with Bootstrap's names and behaviour:

Not included: the xl and xxl breakpoints (felt-css stops at lg), carousel, card groups, scrollspy styling, .was-validated and the responsive offcanvas variants. There is no Sass: everything is plain CSS with custom properties.

Important globals#

Like Bootstrap, felt-css relies on a handful of global styles and settings.

HTML5 doctype#

felt-css requires the HTML5 doctype. Without it, you'll see some funky and incomplete styling.

Viewport meta#

felt-css is developed mobile first. Add the responsive viewport meta tag to your <head> so the breakpoints work on phones.

<meta name="viewport" content="width=device-width, initial-scale=1">

Box-sizing#

Every element uses box-sizing: border-box, so padding never changes an element's final width.

Reboot#

felt-css ships a small reset and Reboot-like base layer for headings, prose, tables and forms. See Reboot.

Cascade layers#

All of felt-css lives in cascade layers (reset, tokens, base, components, utilities, felt). Unlayered CSS always beats layered CSS, so your own stylesheet wins without any specificity fights.

Browser support#

  • felt-css needs light-dark(): Chrome 123, Safari 17.5 and Firefox 120 or newer. It also uses :has(), CSS nesting and cascade layers, which those versions all have.
  • It is built and checked in Chromium.
  • In Firefox, outline buttons fall back to tone-on-tone thread instead of thread in the button colour (no -webkit-mask-box-image).
  • Safari has not been tested yet.

Next steps#