Pasta

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

Check out the docs: https://pasta.jaredpendergraft.com

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;
}