Clam.css

Clam.css provides a good-enough set of styles to kick off your new project. It's meant for building prototypes, where you want to build stuff quickly instead of wrestling with CSS. It styles plain HTML, so you don't need to learn a new framework or remember any class names.

Clam.css is also mobile responsive and has a dark mode which follows your system's theme. If you found a bug or have a feature request, please create an issue on GitHub.

Quick start

Clam.css is a single CSS file, so to use it you just need to include it in your HTML file. You can do this by including it from a CDN or by installing it from NPM. You can also download the source code directly and put it in your project.

Straight from the CDN

The simplest way to use Clam.css is to include it directly from the CDN. Just copy the code below and paste it in the <head> of your HTML file. Clam.css uses modern normalize for normalization, so you should include it as well. 

<link rel="stylesheet" href="https://unpkg.com/modern-normalize" /> 
<link rel="stylesheet" href="https://unpkg.com/clam.css" />

Install from NPM

Another option is to install Clam.css from NPM using your preffered package manager (npm, yarn, pnpm, bun, etc.). 

pnpm add clam.css

Usage might depend on the javascript framework you're using. In Next.js, you can add this line to your root layout: 

import "clam.css"

Docs

Typography

Clam.css uses Inter as the default font and 1.5 as the default line height. I think this configuration is good enough for most sites. I didn't include styles for the h5 and h6 tags because I personally never found myself needing them at all. Very rarely would you need a heading below h4.

Heading 1 2.25rem

Heading 2 1.5rem

Heading 3 1.25rem

Heading 4 1rem

In case you didn't know, you can do alot with plain HTML, such as make text bold, italic, underline text, strikethroughs, inline code, and even highlight text. Use links to link to other parts of your page or to an external site like GitHub.

Buttons

Clam.css provides two styles of buttons, default and primary. All buttons are styled as default by default. If you want to use primary, you need to add the btn-primary class.

You can also style links as buttons. To do this, you need to add the btn class to your a tag. I want to keep Clam.css simple to use, so there won't be a lot of class names to remember.

This is a button link This is a primary button link

Forms and inputs

Clam.css overrides the default styles of some input elements (radio buttons, checkboxes, and select/dropdowns) because they're IMO, ridiculously hard to style. or dropdown input. Note that forms don't have the border, rounded corners, and shadows by default. This is from the .card class that will be covered in later sections.

This is an example form
Account type

Images

Images are responsive by default. The rounded corners aren't default, if you want them, you'll have to add it yourself. Corner radius is one of the CSS variables I used, so if you want to give some element rounded corners, simply copy paste this into its style attribute: border-radius: var(--border-radius)

a picture of a giant clam
Photo by Francesco Ungaro on Unsplash

Cards

Cards are the one of the things that I always use for my applications. So even though I initially wanted to make Clam.css fully classless, I couldn't because there's no way to get cards easily without writing some CSS. I added the card class for this reason. article elements also get this styling by default.

Cards are awesome

Add the card class to any element you want to give them the card style.

Utility classes

These are some utility classes that I always find myself using in my projects, so I'm including them here. These should help lessen the amount of CSS you need to write for layouts.

.danger

This class applies the --danger variable as the color of the element. Useful for error messages.

Example:

Oh no! An unexpected error occured!

.space-x-2, space-x-4

This is the tailwind class for adding even horizontal margins between elements in a block container.

Example:

.space-x-2

.space-x-4

.space-y-2, space-y-4

This is the tailwind class for adding even vertical margins between elements in a block container.

Example:

.space-x-2

.space-x-4

.flex, .flex-col

.flex applies the styles display: flex, align-items: center, and gap: .5rem to the element. .flex-col applies the style flex-direction: column to the element.

In my experience, these classes are enough for basic layouts.

Customization

Clam.css uses CSS variables to set values such as the color and border radiues of an element. To change their values, you need to override them in your own stylesheet. Clam.css uses tailwind colors. You can use that as a reference to guide you when you're changing the colors.

The dark theme uses slightly different colors that the default light theme, so if you didn't disable the dark theme, you'll have to change the colors for the dark theme too. If you want to disable the dark theme, you can paste this line into your <head> element. 

<meta name="color-scheme" content="light only">

Below is the list of variables used:

Default background and text color

--bg: #fff;                 /* white */
--fg: #020617;              /* slate-950 */

Background, hover, and text color for primary buttons and links 

--primary: #2563eb;         /* blue-600 */
--primary-hover: #1d4ed8;   /* blue-700 */
--primary-fg: #fff;         /* white */

Background, hover, and text color of all the other elements

--secondary: #f1f5f9;       /* slate-100 */
--secondary-hover: #e2e8f0; /* slate-200 */
--secondary-fg: #020617;    /* slate-950 */

Background and text color for inputs and their placeholder

--muted: #f8fafc;           /* slate-50 */
--muted-fg: #334155;        /* slate-700 */

Background and text color for danger/destructive elements

--danger: #dc2626;          /* red-600 */
--danger-fg: #fff;          /* white */

Border and outline color

--border: #94a3b8;          /* slate-400 */
--outline: #3b82f6;         /* blue-500 */

Border radius (default 6px)

--border-radius: 0.375rem;