### Install primer-tooltips with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-tooltips/README.md

Use this command to install the primer-tooltips package as a dependency for your project.

```bash
$ npm install --save primer-tooltips
```

--------------------------------

### Install primer-marketing-utilities with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-marketing-utilities/README.md

Use this command to install the package. It is recommended to save it as a dependency.

```bash
$ npm install --save primer-marketing-utilities
```

--------------------------------

### Install primer-utilities with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-utilities/README.md

Use this command to install the primer-utilities package as a dependency for your project.

```bash
$ npm install --save primer-utilities
```

--------------------------------

### Install primer-navigation with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-navigation/README.md

Install the primer-navigation module using npm. This command saves the package as a dependency.

```bash
npm install --save primer-navigation
```

--------------------------------

### Install primer-base with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-base/README.md

Use this command to install primer-base as a dependency for your project.

```bash
$ npm install --save primer-base
```

--------------------------------

### Install primer-marketing-support with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-marketing-support/README.md

Install the primer-marketing-support module using npm. This command saves the package as a dependency in your project.

```bash
$ npm install --save support
```

--------------------------------

### Install primer-marketing-typography

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-marketing-type/README.md

Install the primer-marketing-typography package using npm. This command adds the package as a project dependency.

```bash
npm install --save primer-marketing-typography
```

--------------------------------

### HTML Example: Flex Items Start

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-utilities/docs/flexbox.md

Use `.flex-items-start` to align items to the start of the cross axis. Requires a defined minimum height for visual effect.

```html
<div  style="min-height: 150px;" class="border d-flex flex-items-start">
  <div class="p-5 border bg-gray-light">1</div>
  <div class="p-5 border bg-gray-light">2</div>
  <div class="p-5 border bg-gray-light">3</div>
  <div class="p-5 border bg-gray-light">4</div>
</div>
```

--------------------------------

### Install primer-marketing with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-marketing/README.md

Install the primer-marketing package using npm. Ensure you have npm version 3.0 or higher.

```bash
$ npm install --save primer-marketing
```

--------------------------------

### Install primer-support with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-base/node_modules/primer-support/README.md

Install the primer-support module using npm. This command adds the package as a project dependency.

```bash
$ npm install --save primer-support
```

--------------------------------

### HTML Example: Flex Justify Start

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-utilities/docs/flexbox.md

Use `.flex-justify-start` to align items to the start line of the container. By default, this is the left side.

```html
<div class="border d-flex flex-justify-start">
  <div class="p-5 border bg-gray-light">1</div>
  <div class="p-5 border bg-gray-light">2</div>
  <div class="p-5 border bg-gray-light">3</div>
</div>
```

--------------------------------

### Install primer-marketing-buttons with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-marketing-buttons/README.md

Install the primer-marketing-buttons module using npm. This command saves the package as a dependency in your project.

```bash
$ npm install --save primer-marketing-buttons
```

--------------------------------

### Install primer-box with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-box/README.md

Install the primer-box module using npm. This command saves the package as a dependency in your project.

```bash
$ npm install --save primer-box
```

--------------------------------

### Install primer-table-object

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-table-object/README.md

Install the primer-table-object module using npm. This command adds the package as a dependency to your project.

```bash
$ npm install --save primer-table-object
```

--------------------------------

### Install primer-pagination with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-pagination/README.md

Install the primer-pagination package using npm. This command saves the package as a dependency in your project.

```bash
$ npm install --save primer-pagination
```

--------------------------------

### Install primer-truncate with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-truncate/README.md

Install the primer-truncate module using npm. This command saves the package as a dependency in your project.

```bash
$ npm install --save primer-truncate
```

--------------------------------

### Install primer-buttons with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-buttons/README.md

Install the primer-buttons module using npm. This command saves the package as a dependency in your project.

```bash
$ npm install --save primer-buttons
```

--------------------------------

### Essential Files for Starting an Open Source Project

Source: https://context7.com/github/opensource.guide/llms.txt

This markdown section details the essential files needed when starting an open source project, including LICENSE, README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md. It also includes a pre-launch checklist.

```markdown
# Essential project files

## LICENSE - Choose an open source license
# Popular options:
- MIT License: Simple and permissive
- Apache 2.0: Permissive with patent protection
- GPLv3: Copyleft, requires derivative works to be open source

# Add license via GitHub
# When creating a new repository, select "Add a license" option

## README.md - Your project's welcome mat
# Answer these questions:
1. What does this project do?
2. Why is this project useful?
3. How do I get started?
4. Where can I get more help?

## CONTRIBUTING.md - Guide for contributors
# Include:
- How to file a bug report
- How to suggest a new feature
- How to set up development environment
- How to run tests
- Types of contributions you're looking for

## CODE_OF_CONDUCT.md - Community standards
# Use the Contributor Covenant (https://contributor-covenant.org/)
# Used by 40,000+ projects including Kubernetes, Rails, Swift

# Pre-launch checklist
## Documentation
- [ ] LICENSE file with open source license
- [ ] README, CONTRIBUTING, CODE_OF_CONDUCT files
- [ ] Clear project name that doesn't conflict with trademarks
- [ ] Organized issue queue with labels

## Code
- [ ] Consistent code conventions
- [ ] Clear comments documenting intentions
- [ ] No sensitive data in history (passwords, keys)

## People (for companies)
- [ ] Legal department approval
- [ ] Marketing plan for launch
- [ ] Dedicated community manager
- [ ] At least two admins with repository access
```

--------------------------------

### Install primer-layout with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-layout/README.md

Install the primer-layout module using npm. This command saves the package as a dependency in your project.

```bash
$ npm install --save primer-layout
```

--------------------------------

### Install Primer Core with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-core/README.md

Use this command to install the primer-core package. Ensure you have npm version 3.0 or higher.

```bash
$ npm install --save primer-core
```

--------------------------------

### Install primer-forms with npm

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-forms/README.md

Install the primer-forms package using npm. This command saves the package as a dependency in your project.

```bash
$ npm install --save primer-forms
```

--------------------------------

### Example SECURITY.md Content

Source: https://context7.com/github/opensource.guide/llms.txt

This is an example of a SECURITY.md file content, outlining how to report vulnerabilities, expected response times, and the scope of the security policy.

```markdown
# Security Policy

## Reporting a Vulnerability

Please do NOT report security vulnerabilities through public issues.

Instead, please report them to: security@example.com

You should receive a response within 48 hours. If you don't,
please follow up to ensure we received your report.

Please include:
- Type of vulnerability
- Steps to reproduce
- Potential impact
- Any suggested fixes

## Enable Private Vulnerability Reporting
# GitHub: Settings → Security → Enable private reporting
# Allows secure, coordinated disclosure
```

--------------------------------

### Flex auto example

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-utilities/docs/flexbox.md

Demonstrates the use of the `.flex-auto` class to allow flex items to grow and shrink.

```html
<div class="border d-flex">
  <div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
  <div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
  <div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
</div>
```

--------------------------------

### Example: Responsive Row Override

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-utilities/docs/flexbox.md

This example demonstrates overriding a default vertical layout (`.flex-column`) with a horizontal layout (`.flex-md-row`) for medium screens and up.

```html
<div class="border d-flex flex-column flex-md-row">
  <div class="p-5 border bg-gray-light">Item 1</div>
  <div class="p-5 border bg-gray-light">Item 2</div>
  <div class="p-5 border bg-gray-light">Item 3</div>
</div>
```

--------------------------------

### Example Primer Form

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-forms/README.md

A basic HTML form structure using Primer CSS classes for labels, inputs, checkboxes, radio buttons, and submit buttons. This example shows how to structure a simple form with various input types.

```html
<form>
  <label for="name">Name</label>
  <input class="form-control" type="text" id="name">

  <label for="email">Email address</label>
  <input class="form-control" type="email" id="email">

  <label>
    <input type="checkbox"> Remember me
  </label>

  <label>
    <input type="radio" id="herp" name="herpderp" checked> Herp
  </label>
  <label>
    <input type="radio" id="derp" name="herpderp"> Derp
  </label>

  <button class="btn" type="submit">Submit</button>
</form>
```

--------------------------------

### HTML Example: Flex Justify Between

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-utilities/docs/flexbox.md

Use `.flex-justify-between` to distribute items evenly with the first item at the start and the last item at the end.

```html
<div class="border d-flex flex-justify-between">
 <div class="p-5 border bg-gray-light">1</div>
 <div class="p-5 border bg-gray-light">2</div>
 <div class="p-5 border bg-gray-light">3</div>
</div>
```

--------------------------------

### Primer Form Contrast Example

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-forms/README.md

Demonstrates how to apply a light gray background to textual form controls using the `.input-contrast` class. This provides a visual distinction from default white inputs.

```html
<form>
  <input class="form-control" type="text" placeholder="Default input" aria-label="Default input">
  <input class="form-control input-contrast" type="text" placeholder="Input with contrast" aria-label="Input with contrast">
</form>
```

--------------------------------

### Primer Forms Kitchen Sink Example

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-forms/README.md

Demonstrates various form controls and buttons side-by-side for testing sizing and alignment. Includes standard buttons, select menus, text inputs, and select elements in both default and small sizes.

```html
<p>
  <button class="btn" type="button">Button</button>
  <button class="btn select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
    Select menu
  </button>
  <input class="form-control" type="text" placeholder="Standard input" aria-label="Repository description">
  <input class="form-control input-monospace" type="text" placeholder="Monospace input" aria-label="SHA">
  <select class="form-select" aria-label="Important decision">
    <option>Select</option>
    <option value="option 2">Option 2</option>
  </select>
</p>

<p>
  <button class="btn btn-sm" type="button">Small button</button>
  <button class="btn btn-sm select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
    Select menu
  </button>
  <input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Repository description">
  <select class="form-select select-sm" aria-label="Important decision">
    <option>Select</option>
    <option value="option 1">Option 1</option>
  </select>
</p>
```

--------------------------------

### Primer Layout Container Example

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-layout/README.md

Use the `.container` class to center page content and apply a fixed width. A border is added for visual demonstration.

```html
<div class="container border">
  Container
</div>
```

--------------------------------

### Primer Grid Columns Demo

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-layout/README.md

Demonstrates various column layouts using fractional width classes within a container and row. Includes examples for one-fifth, one-fourth, one-third, and one-half column combinations.

```html
<div class="container">
  <div class="columns mb-1">
    <div class="one-fifth column block-blue p-3 border">
      .one-fifth
    </div>
    <div class="four-fifths column block-blue p-3 border">
      .four-fifths
    </div>
  </div>

  <div class="columns mb-1">
    <div class="one-fourth column block-blue p-3 border">
      .one-fourth
    </div>
    <div class="three-fourths column block-blue p-3 border">
      .three-fourths
    </div>
  </div>

  <div class="columns mb-1">
    <div class="one-third column block-blue p-3 border">
      .one-third
    </div>
    <div class="two-thirds column block-blue p-3 border">
      .two-thirds
    </div>
  </div>

  <div class="columns">
    <div class="one-half column block-blue p-3 border">
      .one-half
    </div>
    <div class="one-half column block-blue p-3 border">
      .one-half
    </div>
  </div>
</div>
```

--------------------------------

### Flex self start alignment

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-utilities/docs/flexbox.md

Use `.flex-self-start` to align an individual flex item to the start of the cross axis.

```html
<div style="min-height: 150px;" class="border d-flex">
  <div class="p-5 border bg-gray-light flex-self-start">.flex-self-start</div>
  <div class="p-5 border bg-gray-light">&nbsp;</div>
  <div class="p-5 border bg-gray-light">&nbsp;</div>
</div>
```

--------------------------------

### Responsive Grid Layout

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-layout/docs/grid.md

This example shows how to create a responsive grid where the number of columns displayed changes based on the screen size, utilizing sm, md, and lg breakpoints.

```html
<div class="container-lg clearfix">
  <div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
    .col-sm-6 .col-md-3 .col-lg-2
  </div>
  <div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
    .col-sm-6 .col-md-3 .col-lg-2
  </div>
  <div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
    .col-sm-6 .col-md-3 .col-lg-2
  </div>
  <div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
    .col-sm-6 .col-md-3 .col-lg-2
  </div>
  <div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
    .col-sm-6 .col-md-3 .col-lg-2
  </div>
  <div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
    .col-sm-6 .col-md-3 .col-lg-2
  </div>
</div>
```

```html
<div class="container-lg clearfix">
  <div class="col-sm-6 float-left p-2 border">
    .col-sm-6
  </div>
  <div class="col-sm-6 float-left p-2 border">
    .col-sm-6
  </div>
  <div class="col-sm-6 float-left p-2 border">
    .col-sm-6
  </div>
  <div class="col-sm-6 float-left p-2 border">
    .col-sm-6
  </div>
  <div class="col-sm-6 float-left p-2 border">
    .col-sm-6
  </div>
  <div class="col-sm-6 float-left p-2 border">
    .col-sm-6
  </div>
</div>
```

```html
<div class="container-lg clearfix">
  <div class="col-md-3 float-left p-2 border">
    .col-md-3
  </div>
  <div class="col-md-3 float-left p-2 border">
    .col-md-3
  </div>
  <div class="col-md-3 float-left p-2 border">
    .col-md-3
  </div>
  <div class="col-md-3 float-left p-2 border">
    .col-md-3
  </div>
  <div class="col-md-3 float-left p-2 border">
    .col-md-3
  </div>
  <div class="col-md-3 float-left p-2 border">
    .col-md-3
  </div>
</div>
```

```html
<div class="container-lg clearfix">
  <div class="col-lg-2 float-left p-2 border">
    .col-lg-2
  </div>
  <div class="col-lg-2 float-left p-2 border">
    .col-lg-2
  </div>
  <div class="col-lg-2 float-left p-2 border">
    .col-lg-2
  </div>
  <div class="col-lg-2 float-left p-2 border">
    .col-lg-2
  </div>
  <div class="col-lg-2 float-left p-2 border">
    .col-lg-2
  </div>
  <div class="col-lg-2 float-left p-2 border">
    .col-lg-2
  </div>
</div>
```

--------------------------------

### Align content to the start

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-utilities/docs/flexbox.md

Use `flex-content-start` to align lines of flex items to the start of the cross axis. Requires a flex container with wrapping enabled.

```html
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-start">
  <div class="p-5 border bg-gray-light">1</div>
  <div class="p-5 border bg-gray-light">2</div>
  <div class="p-5 border bg-gray-light">3</div>
  <div class="p-5 border bg-gray-light">4</div>
  <div class="p-5 border bg-gray-light">5</div>
  <div class="p-5 border bg-gray-light">6</div>
  <div class="p-5 border bg-gray-light">7</div>
  <div class="p-5 border bg-gray-light">8</div>
  <div class="p-5 border bg-gray-light">9</div>
  <div class="p-5 border bg-gray-light">10</div>
  <div class="p-5 border bg-gray-light">11</div>
  <div class="p-5 border bg-gray-light">12</div>
</div>
```

--------------------------------

### HTML Breadcrumb Example

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-breadcrumb/README.md

Use breadcrumbs to show hierarchical context on pages that are many levels deep. This example demonstrates the basic structure for a breadcrumb navigation.

```html
<nav aria-label="Breadcrumb">
  <ol>
    <li class="breadcrumb-item text-small"><a href="https://github.com/business">Business</a></li>
    <li class="breadcrumb-item text-small"><a href="https://github.com/business/customers">Customers</a></li>
    <li class="breadcrumb-item breadcrumb-item-selected text-small text-gray" aria-current="page">MailChimp</li>
  </ol>
</nav>
```

--------------------------------

### Build CSS version of primer-base

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-base/README.md

Run this npm script to generate a compiled CSS version of the primer-base module, outputting to build/build.css.

```bash
$ npm run build
```

--------------------------------

### Table Object HTML Example

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-table-object/README.md

Example of using the Table Object structure in HTML. This creates a layout where elements remain on the same horizontal line, suitable for input fields and buttons.

```html
<div class="TableObject">
  <div class="TableObject-item TableObject-item--primary">
    <input class="input-block form-control" type="text" placeholder="Long elastic input form" aria-label="Long elastic input form">
  </div>
  <div class="TableObject-item">
    <button class="btn ml-2" type="button">Button</button>
  </div>
</div>
```

--------------------------------

### Example: Flex Wrap Enabled

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-utilities/docs/flexbox.md

Demonstrates flex items wrapping onto multiple lines when the container width is insufficient, using the `.flex-wrap` class.

```html
<div class="border d-flex flex-wrap">
  <div class="p-5 px-6 border bg-gray-light">1</div>
  <div class="p-5 px-6 border bg-gray-light">2</div>
  <div class="p-5 px-6 border bg-gray-light">3</div>
  <div class="p-5 px-6 border bg-gray-light">4</div>
  <div class="p-5 px-6 border bg-gray-light">5</div>
  <div class="p-5 px-6 border bg-gray-light">6</div>
  <div class="p-5 px-6 border bg-gray-light">7</div>
  <div class="p-5 px-6 border bg-gray-light">8</div>
  <div class="p-5 px-6 border bg-gray-light">9</div>
</div>
```

--------------------------------

### Responsive Container Widths

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-layout/docs/grid.md

Demonstrates the use of container classes to create responsive layouts with maximum widths corresponding to predefined breakpoints.

```html
<div class="container-sm border">
  .container-sm, max-width 544px
</div>

<div class="container-md border">
  .container-md, max-width 768px
</div>

<div class="container-lg border">
  .container-lg, max-width 1012px
</div>

<div class="container-xl border">
  .container-xl, max-width 1280px
</div>
```

--------------------------------

### Input Group Example

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-forms/README.md

Use this component to attach an input and a button to one another.

```erb
<form>
  <div class="input-group">
    <input class="form-control" type="text" placeholder="Username" aria-label="Username">
    <span class="input-group-button">
      <button class="btn" type="button" aria-label="Copy to clipboard">
        <%= octicon "clippy" %>
      </button>
    </span>
  </div>
</form>
```

--------------------------------

### Import primer-marketing Sass

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-marketing/README.md

Import all Sass files from primer-marketing by adding your node_modules directory to the Sass include path.

```scss
@import "primer-marketing/index.scss";
```

--------------------------------

### Primary Button HTML

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-buttons/README.md

Examples of primary buttons using the .btn-primary class, available in both default and small sizes.

```html
<button class="btn btn-primary" type="button">Primary button</button>
<button class="btn btn-sm btn-primary" type="button">Small primary button</button>
```

--------------------------------

### HTML Example: Flex Justify Center

Source: https://github.com/github/opensource.guide/blob/main/node_modules/primer-utilities/docs/flexbox.md

Use `.flex-justify-center` to align items in the middle of the container along the main axis.

```html
<div class="border d-flex flex-justify-center">
 <div class="p-5 border bg-gray-light">1</div>
 <div class="p-5 border bg-gray-light">2</div>
 <div class="p-5 border bg-gray-light">3</div>
</div>
```