@hitrecord/alpine

⛰ Alpine

An internal shared component library

---

Publishing Alpine

1. Add any dependencies needed and increase the package version in package.publish.json. This is the package file and dependency list that will be installed into the consuming app.

2. npm run package to create the dist folder with assets

3. npm run publish to publish this package to HitRecord's private npm.

---

Using Alpine

1. npm i --save @hitrecord/alpine

2. @import '~@hitrecord/alpine/main.css'; in your app's main style.

---

Grid

A 12 column grid is built into alpine and leveraged with utility classes. Grid container max width: 1344px. Grid gap: 24px.

A parent class of .grid-container will create a grid container. Use class .grid-item with screen size and column span (i.e. l-4) on direct children to control items in the grid.

Valid screen and span options are sm-2 ...sm-12, md-2 ...md-12, lg-2 ...lg-12

<div class="grid-container">
  <div class="grid-item sm-12 md-6 lg-4">Item 1</div>
  <div class="grid-item sm-12 md-6 lg-4">Item 2</div>
  <div class="grid-item sm-12 md-6 lg-4">Item 3</div>
</div>

Offsets can be added like this.

<div class="grid-container">
  <div class="grid-item sm-8 offset-sm-2">Item 1</div>
</div>

This will center 8 columns with two on each on side on every screen size.

You can also nest grids like this.

<div class="grid-container">
  <div class="grid-item sm-12 md-6 lg-4 grid-container">
    <div class="grid-item sm-12 lg-6">Nested Grid Item 1</div>
    <div class="grid-item sm-12 lg-6">Nested Grid Item 2</div>
  </div>
  <div class="grid-item sm-12 md-6 lg-4">Item 2</div>
  <div class="grid-item sm-12 md-6 lg-4">Item 3</div>
</div>

All direct children will fall into a 12 column grid even if the grid-item class is not present.

Customizing grid gap

By default the grid gap is 1.5 rem. This will work for most cases but additional values are available. They are 0, 1, 2 rem. You can use them on just the row, just the column, or both.

<section class="grid-container grid-gap-0></section>
<section class="grid-container grid-column-gap-0></section>
<section class="grid-container grid-row-gap-2></section>

Adding pipes between grid items.

Some designs call for pipes between each grid element. To do this, just add the class with the color pipe-(color) and pipes will appear vertically between the grid items. If the container is not full width, use margins to avoid the last pipe from appearing. If margins can't be used, wrap the container in a div with padding. <div class="padding-24></div>

<ul class="grid-container pipe-quicksilver">
  <li class="grid-item sm-3 padding-24">Grid Content 1</li>
  <li class="grid-item sm-3 padding-24">Grid Content 2</li>
  <li class="grid-item sm-3 padding-24">Grid Content 3</li>
  <li class="grid-item sm-3 padding-24">Grid Content 4</li>
</ul>

---

Layout

As new designs come in, helper classes will be added to create the layout. These should not change much, if at all, because the design team is pushing for consistency.

The .alpine-content class will give you the basic content area with shadow. To control the width of the content area, use .alpine-content along with .sm:container, .md:container, .lg:container. These will give the content a width of 600, 888, and 1344 pixels respectively.

.alpine-content {
  background: white;
  margin-left: auto;
  margin-right: auto;
  border-radius: .25rem;
  overflow: hidden;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
}

---

Color

The colors below can be used as background or font colors. They can be applied as utility attributes or utility classes with the proper prefix (bg-, color-).

<p class="color-cadet bg-snow"></p>

<div color="davy" bg="pear"></div>

Paris Blue #003A4E Paris Shade #002633 Paris Black #000F14

Cinnabar #EA3C3C

Pear #95BE27

Scooter #2984A3

Cadet #8BA5AE

Davy #595959

Quicksilver #A5A5A5

Snow #F9F9F9

Snow #F0F0F0

Azure #F6F9F9

White #FFFFFF

Form Lines #9EB4BC

Border #DDDDDD

Dimmed #CCCCCC

---

Spacing

Padding and margins can be applied as utility attributes or utility classes with the following prefixes.

Valid margin options are margin, margin-t, margin-r, margin-b, margin-l, margin-x, margin-y

Valid padding options are padding, padding-t, padding-r, padding-b, padding-l, padding-x, padding-y

Valid values are 0, 4, 8, 16, 24, 32, 48, 56, 72

<p class="margin-b-72">This has margin-bottom of 72px</p>

<div class="padding-48">This has a padding of 48px</div>

You can use screen prefixes (md, lg) on space values.

<p class="margin-b-72 md:margin-b-16">This has margin-bottom of 72px on small screens and 16px on medium up</p>

<div class="padding-48 lg:padding-32">This has a padding of 48px on small and medium screens and 32px on large screens.</div>

---

Buttons

<button class="alpine-btn primary">Primary Action</button>
<button class="alpine-btn secondary">Secondary Action</button>
<button class="alpine-btn tertiary">Dismissal Action</button>

You can also add an arrow left or right with the .arrow-right and .arrow-left classes.

<button class="alpine-btn primary arrow-right">Save & Continue</button>
<button class="alpine-btn tertiary arrow-left">Back</button>

Any button can be made with a custom background color. The text and hover colors will automatically be generated based on the background color.

<button class="alpine-btn bg-davy">Custom Button</button>

Add the class .small to make a small button.

<button class="alpine-btn primary small">Custom Button</button>

---

Typography

h1, h2, h3

h1, h2, and h3 are defined in Alpine and used with the classes .h1-alpine, .h2-alpine, .h3-alpine accordingly. Additionally, .h2-alpine-lite is available for a 400 weight h2 which is a common element used.

Alpine Body

To make sure the following classes don't interfere with other stylesheets, a class of .alpine-body must be applied to a parent container.

.alpine-body {
  font-family: 'Roboto', Helvetica Neue, sans-serif;
  color: davy;
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

Size

Font sizes will be set on a tag but utility classes are available if needed with our defined font sizes. 10, 11, 15, 13, 19, 24, 32

<p class="size-24">This font-size is 24px</p>

Weight

The three font weights available are 400, 500, and 700.

<p class="weight-700">This weight is 700</p>

Badge

The default badge can be used with class .alpine-badge. The badge will have white text on Paris Blue background.

<span class="alpine-badge">Default Badge</span>

To use badges with a different background color, just add the color as a class. The text color will automatically be set can be explicitly set with color-pear as well.

<span class="alpine-badge davy">Davy Badge</span>

Icons

We have our own icons available as a font. Use it inline <p><i class="alpine-icon-bolt"></i> Challenge</p>

Use it as a button <i class="alpine-icon-bolt btn"></i>

Standard Icons

alpine-icon-bolt
alpine-icon-bookmark
alpine-icon-caret--large
alpine-icon-caret--small
alpine-icon-chat
alpine-icon-checkmark-enclosed
alpine-icon-checkmark
alpine-icon-collapse
alpine-icon-collection
alpine-icon-document
alpine-icon-dots-horizontal
alpine-icon-download
alpine-icon-envelope
alpine-icon-expand
alpine-icon-following--small
alpine-icon-globe
alpine-icon-heart
alpine-icon-image
alpine-icon-list
alpine-icon-lock-closed
alpine-icon-magnifying-glass
alpine-icon-pause
alpine-icon-person
alpine-icon-play
alpine-icon-plus-hollow
alpine-icon-plus
alpine-icon-question
alpine-icon-record
alpine-icon-reel
alpine-icon-remix
alpine-icon-share
alpine-icon-slate
alpine-icon-soundwave
alpine-icon-star--small
alpine-icon-star
alpine-icon-studio
alpine-icon-tag
alpine-icon-trash
alpine-icon-tv
alpine-icon-volume
alpine-icon-x--small
alpine-icon-x-large

Action Icons

alpine-icon-action-checkmark
alpine-icon-action-close
alpine-icon-action-plus
alpine-icon-action-remove

Interest Type Icons These are svg background images. They default to 74px x 74px

alpine-category-animation
alpine-category-filming
alpine-category-music
alpine-category-photography
alpine-category-video-editing
alpine-category-on-camera
alpine-category-visual-art
alpine-category-voice-acting
alpine-category-writing

---

Flex

Utilities for creating flex containers. Flex is powerful. Reference the MDN Flex Docs.

.flex	          { display: flex };
.inline-flex	  { display: inline-flex };

Utilities for controlling the direction of flex items. Flex Direction

.flex-row         { flex-direction: row };
.flex-row-reverse { flex-direction: row-reverse };
.flex-col         { flex-direction: column };
.flex-col-reverse { flex-direction: column-reverse };

Utilities for controlling how flex items wrap. Flex Wrap

.flex-no-wrap      { flex-wrap: nowrap };
.flex-wrap         { flex-wrap: wrap };
.flex-wrap-reverse { flex-wrap: wrap-reverse };

Utilities for controlling how flex items are positioned along a container's cross axis. Align Items

.items-stretch    { align-items: stretch };
.items-start      { align-items: flex-start };
.items-center     { align-items: center };
.items-end        { align-items: flex-end };
.items-baseline   { align-items: baseline };

Utilities for controlling how lines are positioned in multi-line flex containers. Align Content

.content-start    { align-content: flex-start };
.content-center   { align-content: center };
.content-end      { align-content: flex-end };
.content-between  { align-content: space-between };
.content-around   { align-content: space-around };

Utilities for controlling how an individual flex item is positioned along its container's cross axis. Align Self

.self-auto        { align-self: auto };
.self-start       { align-self: flex-start };
.self-center      { align-self: center };
.self-end         { align-self: flex-end };
.self-stretch     { align-self: stretch };

Utilities for controlling how flex items are positioned along a container's main axis. Justify Content

.justify-start    { justify-content: flex-start };
.justify-center   { justify-content: center };
.justify-end      { justify-content: flex-end };
.justify-between  { justify-content: space-between };
.justify-around   { justify-content: space-around };

Utilities for controlling how flex items grow and shrink. Flex

.flex-initial     { flex: initial };
.flex-auto        { flex: auto };
.flex-none        { flex: none };
.flex-grow        { flex-grow: 1 };
.flex-shrink      { flex-shrink: 1 };
.flex-no-grow     { flex-grow: 0 };
.flex-no-shrink   { flex-shrink: 0 };

Utilities for controlling how much space flex items occupy. Accepts 1 through 12.

.flex-(1-12)      {flex: (1-12)}

---

Borders

A border can be added to element with a utility class.

Defaults with the alpine border color (#DDDDDD).

.border {
  border: 1px solid #DDDDDD;
}

.border-dashed {
  border: 1px dashed #DDDDDD;
}

.border-dashed-2 {
  border: 2px dashed #DDDDDD;
}

Borders can also have any color defined in the Alpine color set.

.border-cinnabar {
  border: 1px solid $cinnabar;
}

.border-cinnabar-dashed {
  border: 1px dashed $cinnabar;
}

.border-cinnabar-dashed-2 {
  border: 2px dashed $cinnabar;
}

---

Form

Input

Use class alpine-input with type set to text.

<input class="alpine-input" placeholder="Give your challenge an enticing call to action" type="text">

Input with count

To add character counts, use an Angular Template Reference Variable to capture the value and max length to limit input.

Below is an example of one way to display feedback to the end user using character count.

  <input #input maxlength="140" class="alpine-input" placeholder="Give your challenge an enticing call to action" type="text">
  <span class="input-hint color-quicksilver margin-t-4">{{ input.value?.length || 0 }}/140</span>

Search

Use an alpine-search-wrapper class around an icon and alpine-input field with type set to search.

<div class="alpine-search-wrapper">
  <mat-icon class="alpine-icon">search</mat-icon>
  <input class="alpine-input" placeholder="Search" type="search">
</div>

---

Extras

These classes are available. Most are self explanatory but documentation is coming soon.

To hide any element on a particular screen size.

.hide-sm
.hide-md
.hide-lg

.line-height-0

.align-left, .align-center, .align-right

.uppercase

.overflow-hidden

.pointer

.block

.inline

.inline-block

.bg-cover

.bg-contain

.round This will apply a border-radius of 1000px for round images.

These will make an image square with 32x32 or 36x36 respectively. Used for avatars (with .round) and thumbnail images.

img.image-32

img.image-36

.shadow {
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
}

.shadow-2 {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

Opacity

  opacity-0
  opacity-25
  opacity-50
  opacity-75
  opacity-80
  opacity-100

Components

Alpine Illustrations

Selector alpine-illustrations

Required Property Binding

• type: 'empty-contributions' | 'empty-comments' | 'empty-steps' | 'find-project' | 'start-project' | 'start-creative-prompt' | 'upload-something';

Optional Property Binding

• size?: 80

 <alpine-illustration [type]="'empty-steps'"></alpine-illustration>

The default size is 144x144 but in some places you'll need an 80x80 version. Add [size]=80 to the end of the class to get this smaller version.

 <alpine-illustration [type]="'empty-steps'" [size]="80"></alpine-illustration>

You can also pass in custom content.

 <alpine-illustration [type]="'upload-something'">
  <h2>Upload Your Own Art</h2>
 </alpine-illustration>

---

Alpine Modal

Sample usage with a modal launcher. A two way binding of a boolean is required to be passed to the property of showModal.

<i class="alpine-icon-trash size-24 pointer" (click)="showModal=true"></i>


<alpine-modal [(showModal)]="showModal">
  <div class="margin-b-32">
    <h2>Delete This?</h2>
    <p>You’ve modified this project step. If you want to save this step for later you can put it in draft mode from the project overview.</p>
  </div>
  <div>
    <button class="alpine-btn tertiary margin-r-16" (click)="showModal=false">Save Draft</button>
    <button class="alpine-btn primary" (click)="showModal=false  ">Yes, Delete</button>
  </div>
</alpine-modal>

---

Alpine Dropdown

Selector alpine-dropdown

Types of Dropdowns

<li class="dropdown-item" [attr.data-value]="item.id">
  <p class="margin-0">{{challenge.title}}</p>
  <i class="alpine-icon-checkmark size-24 color-davy"></i>
</li>

<li class="badge-dropdown-item" [attr.data-value]="item.id">
  <span class="alpine-badge-mini">{{challenge.type}}</span>
  <p>{{challenge.title}}</p>
</li>

<li class="inline-icon" [attr.data-value]="item.id">
  <i class="alpine-icon-heart size-24 color-cadet margin-r-16"></i>
  <p class="margin-0" [innerHTML]="challenge.title"></p>
</li>

Option Bindings

• dropdownState (optional): string 2
• placeholderHtml (optional): html string <p>Select Option</p>
• locked (optional): boolean = false;
• hasTarget (optional): boolean = true;
• showDropdown (optional): boolean = false;

You have to pass in a data attribute value [attr.data-value] on the outer html of the iterated content. This is so the dropdown state has something to sync.

---

Alpine Paginator

Selector alpine-paginator

<alpine-paginator
  [length]="144"
  [pageSize]="12"
  [pageIndex]="0"
  [pageSizeOptions]="[12,24,36]">
</alpine-paginator>

Property Bindings

• length: total number of items.
• pageSize (optional): number of items to display on a page. Defaults to first item in pageSizeOptions.
• pageIndex (optional): zero-based index of the list of items. Defaults to 0.
• pageSizeOptions: an array of provided page size options to display.