CSS Starter

The CSS Starter contains components and patterns for building pure CSS UI. It is not a CSS framework!

To build a site with the CSS starter, start from scratch with only a reset and a blank CSS file. Build your styles as you build your markup. Pull styles, markup, and patterns from the starter as you need them. As your styles differ from the starter styles, modify the styles rather than overriding them.

These are some great resources to build and maintain clean CSS codebases.

• Josh Comeau
• CSS Tricks
• MDN Web Docs
• web.dev
• HTMHell
• Can I use

Typography

Heading 1

Heading 2

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

1. Some
2. list
3. items

• Some
• list
• items

Forms

Inline form

Tables

Modals

Click here to open the modal

Tooltips

Hover over me to see a tooltip.

Hover over me to see a tooltip with a ton of text.

Cards

• Lorem ipsum

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat, enim id efficitur porta, diam sem porta sapien, ut dignissim velit erat quis sapien. Nullam vulputate enim placerat tortor consequat, vulputate blandit nunc tempor. Integer purus augue, fringilla eu molestie in, consequat at turpis.

• Orci varius

  Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vel pulvinar orci, ac auctor urna. Nulla aliquam enim rutrum, auctor urna at, facilisis metus. Vivamus euismod arcu ut leo tincidunt auctor. Vestibulum auctor neque leo, vitae dignissim tellus lobortis vitae. Fusce vestibulum eleifend tortor et convallis. Aliquam congue nec ipsum id accumsan. Ut et sagittis velit. Vestibulum lacinia, diam vitae sodales euismod, nulla diam molestie velit, vitae iaculis neque nisl sit amet metus. Cras vehicula auctor fermentum.

• Mauris felis

  Mauris felis lorem, condimentum vel lobortis et, condimentum eu libero. Fusce eget iaculis metus. Pellentesque quis ligula eget sem bibendum ultrices. Maecenas et ante id ex ultrices sagittis. Suspendisse malesuada eleifend arcu congue tempus. Pellentesque sed dictum ex. Pellentesque orci mi, vestibulum quis enim at, posuere iaculis neque.

Buttons

Code

Code can be displayed inline with the <code> tag, or in a block

like this,
with <pre> and <code>

Toggles

Toggles should be used for actions that take effect on click, as opposed to checkboxes, which should be used for actions that take effect when a form is submitted.

Flash messages

Accordions

If a group of <details> elements all have the same name attribute, most browsers will only allow one of them to be open at a time. Firefox doesn't support this, but it's supported by most other browsers, and degrades relatively gracefully.

Theming

The theme.css file contains colors, icons, and other variables that make up this site's theme.

Variables

Theme variables are defined on :root so they can be used in all elements. Color variables are at the top of the :root styles. These define all colors to be used in the CSS files. Color variables must only be used in the theme file, and should not be imported from other CSS files.

Below the color variable we define variables like --text-color and --border-color that we intend to use in other CSS files. These variables should reference color variables, and define our default theme. We can define an alternate theme (with @media (prefers-color-scheme: dark), perhaps) by overriding these variables.

:root {
    /* Color variables */
    --white: #EEEEEE;
    --black: #333333;

    /* Default theme variables */
    --text-color: var(--black);
    --background-color: var(--white);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark theme variables */
        --text-color: var(--white);
        --background-color: var(--black);
    }
}

Browser theme

Set the accent-color property on the html tag so checkboxes and outlines match your site's theme.

html {
    accent-color: var(--primary);
}

Add a meta tag that sets the theme color to the head of your document to style browser chrome when a user visits your site.

<meta name="theme-color" content="#196EC2"/>

Icons

Use SVG icons whenever possible and practical. They can scale to any size, accept CSS styles, and are usually smaller that other image formats.

Variables

To use our theme's CSS variables in SVG icons, we have to include SVGs into the page a bit differently. The usual method on an image tag doesn't work, because the SVGs aren't a part of the DOM.

<img src="/images/spinner.svg" alt="loading">

Instead, we must include the full SVG directly with an <svg> tag or reference from an <svg> tag using a <use> tag.

<svg>
    <use xlink:href="/images/spinner.svg#icon"></use>
</svg>

This ensures that the SVG is a part of the DOM, so will be able to use our CSS variables. If we use our theme's CSS variables to style our SVGs we'll be able to use the same icons for different themes (light and dark mode, for example).

Sprites

This site uses an SVG sprite file to include many SVGs in one file. This helps a bit with performance since the browser makes fewer requests to load icons and can help when changing multiple icons at once. It's very cumbersome to reference SVG sprites in a CSS file, so we use separate files for SVGs referenced from CSS.

Favicon

The starter uses an SVG favicon for modern browsers and provides an ico fallback for browsers without SVG favicon support (like Safari and IE). The SVG favicon uses a @media (prefers-color-scheme: dark) query to serve a different color favicon depending on the user's color scheme. The ico favicon consists of a dark icon on a light background so that it displays well on any background color.

Sidebar

The starter's sidebar follows a pattern seen in many apps. On wide screens the sidebar is permanently displayed on the left side of the page and the page's content is displayed to its right. On narrower screens the sidebar is hidden by default, and is only displayed when a user clicks on the menu icon.

This layout is achieved with CSS Grid, in particular grid template areas. The default layout defines areas for each of the top-level layout elements, placing the nav in the sidebar area.

body {
    ...
    grid-template-areas: 'header header'
                         'sidebar main'
                         'footer footer';
}

nav {
    grid-area: sidebar;
}

On small screens, we omit the sidebar from the grid layout and position the sidebar absolutely, using the left property to toggle its visibility.

@media screen and (max-width: 800px) {
    body {
        ...
        grid-template-areas: 'header'
                             'main'
                             'footer';
    }

    nav {
        grid-area: unset;
        position: absolute;
        top: var(--header-height);
        bottom: 0;
        left: calc(-1 * var(--nav-width));
    }

    .menu-open nav {
        left: 0;
    }
}