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__hue--base: 0deg 0% 0%;
--color__hue--highlight: 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
base
base
base--ish
base--mid
base--semi
base--light
base--ghost
highlight
highlight
highlight--ish
highlight--mid
highlight--semi
highlight--light
highlight--ghost
contrast
contrast
contrast--extra
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__hue--base: 0deg 0% 0%; --color__hue--highlight: 0deg 90% 64%; }
Options include:
color__hue--base
color__hue--highlight
color__hue--contrast
color__hue--contrast--extra
Custom colors
Danger, Will Robinson!
If you need to define a new color outside of
base
orhighlight
, but want to use the same dynamic tinting scale as those colors, the following snippet will help::root { --color__hue--danger: 0deg 90% 64%; --color__danger: hsl(var(--color__hue--danger)); --color__danger--ish: hsl(var(--color__hue--danger) / 0.75); --color__danger--mid: hsl(var(--color__hue--danger) / 0.625); --color__danger--semi: hsl(var(--color__hue--danger) / 0.25); --color__danger--light: hsl(var(--color__hue--danger) / 0.125); --color__danger--ghost: hsl(var(--color__hue--danger) / 0.0625); } .dangerBlockquote { --color__bg: var(--color__danger--ghost); --color__border: var(--color__danger--light); }
You can always tweak the alpha values of the
hsla
structure to meet your project’s needs.
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
- Item #1
- Nested Item #1
- Nested Item #2
- Nested-Nested Item #1
- Nested-Nested Item #2
- Item #2
- Item #3
- 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
I am really good at summarizing things
Except for secrets, those are hidden, safe!
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
Column 1 | Column 2 | Column 3 |
---|---|---|
Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
If you’re either bundling the
table
stylesheet or bringing in all of Pasta and you don’t supply a class to atable
, 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 { --evenRow: var(--color__contrast); --oddRow: var(--color__base--light); --padding: var(--size__s); }
Buttons
Buttons come in three flavors
primary
,secondary
andtertiary
, 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) ); }