Pasta provides a great starting place for web projects. It combines light styling for common web elements, yummy!

Get Started

npm add @jaredpdesigns/pasta

Import the css files into your main CSS file

// Import from node_modules
@import "@jaredpdesigns/pasta/pasta.css";

// Or optionally load from unpkg
@import "https://unpkg.com/@jaredpdesigns/pasta";

Or pick and choose which elements you want to import

// Global reset
@import "@jaredpdesigns/pasta/reset.css";

// Individual areas of focus
@import "@jaredpdesigns/pasta/colors.css";
@import "@jaredpdesigns/pasta/focus.css";
@import "@jaredpdesigns/pasta/shadows.css";
@import "@jaredpdesigns/pasta/spacing.css";
@import "@jaredpdesigns/pasta/type.css";
@import "@jaredpdesigns/pasta/widths.css";

// Option class-based utilities
@import "@jaredpdesigns/pasta/utilities.css";

// Optional extensions for styling other types of content
@import "@jaredpdesigns/pasta/backdrop.css";
@import "@jaredpdesigns/pasta/code.css";
@import "@jaredpdesigns/pasta/controls.css";
@import "@jaredpdesigns/pasta/table.css";

Don’t want to fuss with compiling? Use our pre-configured build for a quick project set-up

<link
  rel="stylesheet"
  href="https://unpkg.com/@jaredpdesigns/pasta"
/>

Add your own flavors

:root {
  --color__set--base: hsl(0deg 0% 0%);
  --color__set--highlight: hsl(0deg 90% 64%);
  --type__family--primary: "Satoshi", sans-serif;
  --type__family--secondary: "Cabinet Grotesk", sans-serif;
}

Colors

Color is a powerful communicator in any design project. After defining core colors in your project, you’ll then have access to the following colors in your project:

If you’re either bundling the utilities stylesheet or bringing in all of Pasta, you’ll easily have access to a large variety of pre-configured color classes including the following:

• .color__bg--${colorName}
• .color__border--${colorName}
• .color__type--${colorName}

For more details, review the utilities documentation.

Palette

To override any of the colors in your own project simply replace the custom property value with your desired color.

Note: adhereance to an HSL color model will maintain dynamic tinting, otherwise you’ll need to map over all color values in root.

:root {
  --color__set--base: hsl(0deg 0% 0%);
  --color__set--highlight: hsl(0deg 90% 64%);
}

Default values:

:root {
  --color__set--base: hsl(218deg 24% 24%);
  --color__set--highlight: hsl(158deg 32% 38%);
  /* This controls the default background color */
  --color__set--contrast: white;
}

Custom colors

Danger, Will Robinson!

If you need to define a new color outside of base or highlight, but want to use the same dynamic tinting scale as those colors, the following snippet will help:

:root {
  --color__set--danger: hsl(0deg 90% 64%);
  --color__danger: var(--color__set--danger);
  --color__danger--ish: color-mix(
    in oklab,
    var(--color__set--danger) 75%,
    var(--color__contrast)
  );
  --color__danger--mid: color-mix(
    in oklab,
    var(--color__set--danger) 62.5%,
    var(--color__contrast)
  );
  --color__danger--semi: color-mix(
    in oklab,
    var(--color__set--danger) 25%,
    var(--color__contrast)
  );
  --color__danger--light: color-mix(
    in oklab,
    var(--color__set--danger) 12.5%,
    var(--color__contrast)
  );
  --color__danger--ghost: color-mix(
    in oklab,
    var(--color__set--danger) 4%,
    var(--color__contrast)
  );
  --color__danger--contrast: color-mix(
    in oklab,
    var(--color__set--danger),
    var(--color__contrast-mix)
  );
}

.dangerBlockquote {
  --color__bg: var(--color__danger--ghost);
  --color__border: var(--color__danger--light);

  color: var(--color__danger--contrast);
}

Notice with the declaration of --color__danger--contrast we utilize the --color__set--contrast-mix variable—in Pasta this value flips to make mix with different percentages of white and black depending on color-scheme.

Typography

Most stuff in our projects are text, so it’s critical we have legible type. Pasta comes with pre-configured type sizes and scales that are mapped to common elements, including what’s listed below.

A variety of type sizes and lineheights are also accessible via the following class structure: .type__size--m-l whereas the size of the type variable is followed by a lineheight variable.

The scale for both includes xxs, xs, s, m, l, xl, xxl, xxxl, xxxxl—mix and match for maximum flavor.

h1

Headline 1

h2

Headline 2

h3

Headline 3

h4

Headline 4

h5

Headline 5

h6

Headline 6

p

The quick brown fox jumps over the lazy dog. But has anyone asked why? What motivates the fox—and what makes the dog so lazy—or is the dog simply exhausted?

Let us investigate foxes and their habits to dive a little deeper, shall we? Foxes are traditionally predatory creatures, whereas dogs have long been domesticated.

ul

• Item #1
  • Nested Item #1
  • Nested Item #2
    • Nested-Nested Item #1
    • Nested-Nested Item #2
• Item #2
• Item #3
• Item #4

ol

1. Item #1
   1. Nested Item #1
   2. Nested Item #2
      1. Nested-Nested Item #1
      2. Nested-Nested Item #2
2. Item #2
3. Item #3
4. Item #4

blockquote

I’m a beautiful blockquote filled with very interesting text. Admire me!

If you don’t supply a class to a blockquote, but instead use it in something like Markdown—or optionally add the class .styled, you’ll see it styled like above. You can override the background and border color of the element by changing the following custom properties:

blockquote:not([class]),
blockquote.styled {
  --color__bg: var(--color__contrast);
  --color__border: var(--color__base--light);
}

Extras

Pasta comes bundled with styling for common elements like code/pre, table, and details as well as lightly styled form elements.

Common Elements

pre

const arr = [
  { title: "Cool Video", description: "Really really cool video" },
  {
    title: "Regular Video",
    description:
      "Really really regular, standard video without anything interesting"
  }
];

const searchTerm = "cool";

function findInObject() {
  return arr.filter((item) =>
    item.title.toLowerCase().includes(searchTerm.toLowerCase())
  );
}
console.log(findInObject());

// [{title: "Cool Video", description: "Really really cool video"}]

If you use highlight.js in your project and are either bundling the code stylesheet or bringing in all of Pasta, you can apply light syntax-highlighting to your project by adding the following to your core CSS:

code,
pre {
  --color__primary: hsl(260, 64%, 75%);
  --color__secondary: hsl(54, 90%, 75%);
  --color__tertiary: hsl(190, 64%, 75%);
}

details

If you don’t apply a class, you get a lightly styled details. If you’d like to use details differently in your UI, Pasta won’t be opinionated about it.

dl

Title

Some description of title that is kinda important

Another Title

Why not discuss feature two? It’s quite something!

table

If you’re either bundling the table stylesheet or bringing in all of Pasta and you don’t supply a class to a table, but instead use it in something like Markdown—or optionally add the class .styled, you’ll see it styled like above. You can override the row stripe color or overall padding by adjusting the following custom properties:

table:not([class]),
table.styled {
  --border: var(--color__base--light);
  --evenRow: var(--color__contrast);
  --oddRow: var(--color__base--ghost);
  --padding: var(--size__s);
}

Buttons

Buttons come in three flavors primary, secondary and tertiary, you can style buttons by using the following classes:

• .button__primary
• .button__secondary
• .button__tertiary

Need to override some part of the pre-configured styles? You can easily tie into the styles by adjusting the following custom properties:

.button__primary {
  --color__bg: var(--color__base);
  --color__border: var(--color__base--light);
  --color__type: var(--color__contrast);
}

Form Elements

If you’re either bundling the controls stylesheet or bringing in all of Pasta, overall sizing of form elements are controlled globally through the following custom properties:

:root {
  --control__font-size: var(--type__size--m);
  --control__line-height: var(--type__lineheight--l);
  --control__padding--block: var(--size__s);
  --control__padding--inline: var(--size__m);
  --control__radius: var(--size__s);
  --control__size: clamp(
    var(--size__xl),
    var(--type__size--target),
    var(--size__xxl)
  );
}