Presentational components to share between hitRECord products.
npm install @hitrecord/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.
---
1. npm i --save @hitrecord/alpine
2. @import '~@hitrecord/alpine/main.css'; in your app's main style.
---
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
``
Item 1
Item 2
Item 3
Offsets can be added like this.
`
Item 1
This will center 8 columns with two on each on side on every screen size.
You can also nest grids like this.
`
Nested Grid Item 1
Nested Grid Item 2
Item 2
Item 3
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.
`
#### 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.
`
---
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);
}
---
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-).
`
!#003A4E Paris Blue
!#002633 Paris Shade
!#000F14 Paris Black
!#EA3C3C Cinnabar
!#95BE27 Pear
!#2984A3 Scooter
!#8BA5AE Cadet
!#595959 Davy
!#A5A5A5 Quicksilver
!#F9F9F9 Snow
!#F0F0F0 Snow
!#F6F9F9 Azure
!#FFFFFF White
!#F6F9F9 Form Lines
!#FFFFFF Border
!#FFFFFF Dimmed
---
$3
Padding and margins can be applied as utility attributes or utility classes with the following prefixes.
Valid margin options are
Valid padding options are
Valid values are
This has margin-bottom of 72px
This has a padding of 48px
You can use screen prefixes (md, lg) on space values.
This has margin-bottom of 72px on small screens and 16px on medium up
This has a padding of 48px on small and medium screens and 32px on large screens.
---$3
You can also add an arrow left or right with the
and .arrow-left classes.
`
Any button can be made with a custom background color. The text and hover colors will automatically be generated based on the background color.
Add the class
to make a small button.
`
---$3
#### h1, h2, h3
h1, h2, and h3 are defined in Alpine and used with the classes
accordingly. Additionally, .h2-alpine-lite is available for a 400 weight h2 which is a common element used.$3
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.
This font-size is 24px
#### Weight
The three font weights available are 400, 500, and 700.
This weight is 700
#### Badge
The default badge can be used with class
. The badge will have white text on Paris Blue background.`
Default Badge
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
as well.`
Davy Badge
#### Icons
We have our own icons available as a font. Use it inline
Challenge
Use it as a button
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
---
$3
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)}
---
$3
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;
}
---
$3
#### Input
Use class
with type set to 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.value?.length || 0 }}/140
#### Search
Use an
class around an icon and alpine-input field with type set to search.
`
search
---
#### 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
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-32img.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
$3
#### Alpine Illustrations
Selector
Required Property Binding
- type:
'empty-contributions' |
'empty-comments' |
'empty-steps' |
'find-project' |
'start-project' |
'start-creative-prompt' |
'upload-something';
Optional Property Binding
- size?: 80
The default size is 144x144 but in some places you'll need an 80x80 version. Add
to the end of the class to get this smaller version.`
You can also pass in custom content.
Upload Your Own Art
---
#### Alpine Modal
Sample usage with a modal launcher. A two way binding of a boolean is required to be passed to the property of
.`
Delete This?
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.
---
#### Alpine Dropdown
Selector
Types of Dropdowns
{{challenge.title}}
{{challenge.type}}
{{challenge.title}}
Option Bindings
- dropdownState (optional): string
- placeholderHtml (optional): html string Select Option
- locked (optional): boolean = false;
- hasTarget (optional): boolean = true;
- showDropdown (optional): boolean = false;You have to pass in a data attribute value
on the outer html of the iterated content. This is so the dropdown state has something to sync.---
#### Alpine Paginator
Selector
alpine-paginator
[pageSize]="12"
[pageIndex]="0"
[pageSizeOptions]="[12,24,36]">
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.