@jaredpdesigns/pasta/README.md

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

# 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](https://pasta.jaredpendergraft.com)

***

## Get Started

```bash
npm add @jaredpdesigns/pasta
```

Import the `css` files into your main CSS file

```css
// 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

```css
// 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

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

Add your own flavors

```css
: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;
}
```