@npmcorp/pui-css-avatars

@npmcorp/pui-css-avatars

A CSS avatars component that can be installed via this npm package. The package provides all of the CSS you need to use the component.

Installation

To install the package, from the command line, type:

npm install pui-css-avatars

Usage

<img alt="..." class="img-circle avatar" height="100" src="http://placehold.it/100x100" width="100">

You can find more examples of the avatars component in the pui style guide

---

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

Styleguide Github

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.

Changelog

5.1.0 (2016-06-16)

Bug Fixes

• accessibility-dev-tools: remove the tools (3f4faa9)
• alerts: use looser dependency versions (677a9b0)
• alerts: use scoped deps (7c80e30)
• autocomplete: force dep update (3f8c9c4)
• autocomplete: Use scoped dependencies (ccf832c)
• avatars: use scoped deps and loose semver (a636317)
• back-to-top: force updates of deps (540310d)
• back-to-top: update dep on links (3fa0e63)
• back-to-top: Use scoped deps (69f6ad2)
• button-group: force update of deps (10268aa)
• button-group: Use scoped deps (1351bdb)
• buttons: document btn-link (226a2c3)
• buttons: removes all-caps in favor of additional class (b45e8cb)
• buttons: Update button version (da36fa4)
• buttons: Use scoped modules and looser dependencies (1b0fffc)
• code: use scoped deps and loose semver (8ccc4b8)
• collapse: update to scoped + loosen deps (2d9e1b7)
• colors: bumped up the version number (0d45d35)
• drop-down-menu: make sure build is ordered (229f421)
• drop-down-menu: update to scoped + loosen deps (8bf74ce)
• dropdowns: change color/spacing (6da9102)
• dropdowns: make spacing better proportionally (eb9f32f)
• dropdowns: update docs with text class (afdf20d)
• dropdowns: update to scoped + loosen deps (184f824)
• embeds: update to scoped + loosen deps (9a73ba1)
• events: include package.json (56d6074)
• events: Update docs (64cac15)
• events: Update docs (06d0ef9)
• forms: be more explicit about this.max (c7e2dce)
• forms: Better match current forms (7664f0e)
• forms: drop shadows from form-control btns (56d5a57)
• forms: error messages were being eaten (c51e75e)
• forms: Export stepper component (75a2546)
• forms: Make sure select colors aren't wiped out by link change (2a7e652)
• forms: remove max default on form stepper (37cec37)
• forms: remove shadow from buttons (c7df9e8)
• forms: update + loosen deps (73e483f)
• forms: use error system we already have (54f544a)
• grids: update + loosen deps (50a731e)
• header: active links should remain the normal color (e9465b7)
• header: add docs for logged out header (ec999bf)
• header: Address height and line issues (163c148)
• header: bump typography dep and version (ea255ef)
• header: Fix inversion of margin and padding for small-viewport transparent headers overl (e6803dc)
• header: fix lineup issues with logged out header top (379704f)
• header: Increase width of the navigation to accomodate wider type (00b90f8)
• header: make a better wombat for you and me (88d178a)
• header: padding on hover needs to cover (554cc85)
• header: update + loosen deps (f04b692)
• header: version bump (63350e5)
• iconography: address avatar icon sizing (ab0be9d)
• iconography: icon-avatar -> avatar-icon (3fa5757)
• iconography: update + loosen deps (f32520e)
• images: update + loosen deps (618850c)
• labels: update scoped deps (b994261)
• links: Change color to match npm branding (da7b84d)
• links: fixes text alignment for wrapping text (e444a94)
• links: transition should be on opacity (d395e82)
• links: update links to scoped (f723435)
• lists: better class name and documentation ordering (c870f4e)
• lists: do not need list-no-indent (315c7e0)
• lists: documentation fix (248c50f)
• lists: mobile view (681fd24)
• lists: use scoped deps and loose semver (fe1c46b)
• lists: whoops bumping package.json again (9a973ac)
• media: update scoped deps (3b246b3)
• meta: close html tag (78def30)
• meta: contain symbols within svg dimemnsions (59fe8d4)
• meta: fix package name for org feature svg (a1b1457)
• meta: fixes typo in enterprise need help docs (bb6d66b)
• meta: orgs feature needed padding adjustments (21ab20b)
• meta: reference package-based svg (3b87b16)
• meta: svgo --pretty orgs-svgeople-avatar (d661d22)
• meta: update docs to point out the helper (2f7dd0a)
• meta: Use img for need help avatar (3eb7363)
• modals: update deps (8f095dc)
• package.json: adds @npmcorp/pui-css-drop-down-menu (75ca52f)
• panels: update deps (001f8a4)
• panes: update to scoped + loosen deps (f15d48f)
• progress-bars: update deps (af661f4)
• pui: better svgeople images (276901d)
• pui: update header version (abe206c)
• pui: update version of svgeople (8638a5f)
• spinners: use scoped deps + loosen deps (967f9fb)
• svgeople: add forms as dep (b57054f)
• svgeople: add padding to each svgerson (65f58ea)
• svgeople: code clean + docs (67a8d67)
• svgeople: Documentation and API (4f39f45)
• svgeople: Speed and spacing (06c773a)
• tables: Update tables deps (35f1114)
• tabs: update scoped deps (88ae3b3)
• tooltips: update for link color change (ed66890)
• tooltips: update scoped dep (6350035)
• traffic-lights: update to scoped dependencies (2485370)
• traffic-lights: Use scoped deps (c132f5d)
• typography: bolds headings (cdb7c10)
• typography: bump version and css-typography dep (928738b)
• typography: Remove !important from header weight (de25b14)
• typography: scope dependencies (97386ed)
• typography: updates headings and text color (4ed1d67)
• viewport-panes: bump heder dep and version (19ffe4e)
• viewport-panes: documentation fix (aede63f)
• viewport-panes: enterprise work (a485a9b)
• viewport-panes: height -> min-height (4c8920b)
• viewport-panes: interpolation (1f93475)
• viewport-panes: Smaller wide screens (eb6ef6c)
• viewport-panes: Update docs (421f2c8)
• whitespace: breakpoint consistency (994c318)
• whitespace: fix whitespace application bp (0580320)

Features

• backgrounds: add background positioning (61f86b1)
• backgrounds: positioning also now implies no-repeat (00fe3a4)
• backgrounds: support for contained backgrounds (2d612da)
• buttons: add btn-lg class (1506e41)
• buttons: add btn-tertiary class (#182) (14ca425)
• buttons: adds secondary button style (red border) (0f664f3)
• buttons: updates buttons to npm styles (8d0647e)
• colors: Adds npm color palette (f6a70b3)
• colors: documents new npm colors for .bg- and .type- (2747ff5)
• dropdowns: add dropdown-driven-tabs (#172) (5cddfa9)
• dropdowns: use svg icon (a41beee)
• forms: add link updater (e19dcb2)
• forms: add stepper form input (202f3e8)
• forms: link updater input error animation (eeda152)
• grids: add .container-fullwidth class (ba4abf8)
• header: Add constructor-io stylings (51f9d51)
• header: header light logged out (412a2f9)
• iconography: adds avatar icon component (31bddcf)
• links: Add alternate link (4a1c55c)
• links: Add npm-loves-you link (6beb0ef)
• links: adds underlined link style, .link-simple (0385d21)
• links: update link color to be npm blue (04d9c64)
• links: updates link colors to match npm branding (086e244)
• lists: Add functionality to nav-finder (4ecc9dc)
• lists: adds list-no-indent class (7c85b92)
• lists: adds tiny bullet style component (bcafd26)
• lists: new list-card size (11ee3a6)
• marketing: Create custom panel module (b73280b)
• meta: Add meta package (af52952)
• meta: adds need help enterprise partial (deb2d8d)
• meta: adds need help module (a3eb1b1)
• meta: adds orgs need help partial (fd29653)
• mixins: add a11y-only and un-a11y-only (1755ea5)
• panels: adds accented panels (c676308)
• svg-iconography: create separate SVG iconography component (b1ef076)
• svgeople: Create svgeople (aabcbe1)
• typography: adapts type to new designs (de570c0)
• add lined-heading class to typography (0ca878c)
• typography: adds a `.em-medium` class (0892f0c)
• typography: adds gigantic size (e2092cc)
• typography: updates font to Open Sans (17f628e)
• utils: add `nobg-xl` to responsive utils (65c0447)
• utils: Add nobg-* classes (a3cfcba)
• viewport-panes: add .viewport-pane-long and document how the panes differ from each other (fff701b)
• viewport-panes: add viewport-pane component (83cc78e)
• viewport-panes: don't show at certain sizes (38f9bc9)

BREAKING CHANGES

• links: This will affect all links and should be tested carefully. [Finishes #119321553] (da7b84d)
• svgeople: If you were relying upon `fillPeople`, it no longer exists, nor does the `this.people` array (4f39f45)
• iconography: Any case where icon-avatar is being used needs to be changed to avatar-icon and if there is a sibling icon class, it needs to be removed (3fa5757)
• forms: This could break tests down the line and any assumptions made when the max value was not set. Originally, the max defaulted to 99999. If a user had left the `max` attribute out of the input element, with this change, there is no longer that default max to fall back on (37cec37)
• typography: Header font-weight should be a default, but should be able to be easily overwritten by an emphasis class, since the weight is not the primary purpose for it as a class. (de25b14)
• typography: the fonts are all different now; Open Sans is bigger than Source Sans Pro at the same font size... (17f628e)
• viewport-panes: Adds variables that will affect the header as well (83cc78e)
• buttons: (class name) .btn-highlight-alt and .btn-highlight deprecated (8d0647e)

<a name="5.1.0"></a>